Countdown timer¶
Availability: All contexts
The countdown-timer module is designed to display a real-time countdown to a specific date and time. It serves as a visual driver for urgency during sales or events. The module supports background images with overlays and provides a secondary "Final banner" state to display alternative content once the countdown expires.
Configuration parameters¶
endDateTime¶
string (Required) The target date and time when the countdown ends. Expected format: YYYY-MM-DD HH:MM:SS.
endCountdownAction¶
Either hide or showEndBanner. Determines the module's behavior after the timer reaches zero:
- hide: The module is completely hidden.
- showEndBanner: Displays the content configured in the "Final banner" section.
backgroundImage¶
string URL to the background image file.
alt¶
string Alternative text description for the background image for accessibility and SEO.
hasBackgroundOverlay¶
int If set to 1, a color overlay is applied over the background image to improve text readability.
backgroundOverlay¶
string The color of the overlay. Supports hex codes and theme variables (e.g., @primaryColor).
bannerSize¶
string The vertical size (height) of the banner. Options:
- small
- medium
- large
contentPosition¶
string Position of the text and counter within the module container. Options include center, top-left, bottom-right, etc.
contentAlignment¶
string Horizontal alignment of the inner content. Options: start, center, end.
digitsTextColor¶
string Color of the countdown numbers. Defaults to @globalFontColor.
digitsBackgroundColor¶
string Background color of the individual digit tiles. Defaults to @globalBodyBackgroundColor.
borderRadius¶
int Corner radius of the digit tiles, ranging from 0 (square) to 100 (circular).
timeUnitsPosition¶
string Placement of the labels (Days, Hours, Minutes, Seconds) relative to the digits:
- inside: Labels are inside the digit tile.
- under: Labels are displayed below the digit tile.
shouldShowSeparator¶
int If set to 1, a visual separator (colon) is displayed between the time units.
hasActiveCounterHeader¶
int If set to 1, the heading is displayed while the counter is active.
activeCounterHeaderContent¶
string Text content of the active state heading. Supports translations.
activeCounterHeaderLevel¶
string The HTML heading tag level (h2 through h6).
hasActiveCounterDescription¶
int If set to 1, the additional description text is displayed.
activeCounterDescription¶
string The text content for the description. Supports translations.
activeCounterDescriptionPlacement¶
string Position of the description: above or below the counter tiles.
hasActiveCounterButton¶
int If set to 1, a Call to Action button is displayed.
activeCounterButtonType¶
string The visual style of the button: primary, secondary, outline, or ghost.
activeCounterButtonUrl¶
string The target URL for the button link. Supports relative and absolute paths.
hasEndBannerHeader¶
int If set to 1, a heading is displayed after the countdown has ended (if showEndBanner is active).
endBannerHeaderContent¶
string Text content of the heading in the expired state. Supports translations.
endBannerHeaderLevel¶
string The HTML heading tag level (h2 through h6).
hasEndBannerDescription¶
int If set to 1, the additional description text is displayed.
endBannerDescription¶
string The text content for the description. Supports translations.
endBannerDescriptionPlacement¶
string Position of the description: above or below the header.
hasEndBannerButton¶
int If set to 1, a Call to Action button is displayed.
endBannerButtonType¶
string The visual style of the button: primary, secondary, outline, or ghost.
endBannerButtonUrl¶
string The target URL for the button link. Supports relative and absolute paths.
Module source code¶
{% from "@macros/header.twig" import header %}
{% set textAlign = 'center' %}
{% if moduleConfig.contentAlignment == 'start' %}
{% set textAlign = 'left' %}
{% elseif moduleConfig.contentAlignment == 'end' %}
{% set textAlign = 'right' %}
{% endif %}
{% set endDate = moduleConfig.endDateTime.iso8601() %}
<countdown-timer
id="countdown-timer-{{ moduleInstance }}"
class="countdown-timer countdown-timer_{{ moduleConfig.bannerSize }} countdown-timer__position_{{ moduleConfig.contentPosition }} {{ moduleConfig.classNames }}"
end-date="{{ endDate }}"
end-action="{{ moduleConfig.endCountdownAction }}"
tabindex="0"
role="timer"
{% if moduleConfig.backgroundImage.paths.original %}style="--background-url: url('{{ moduleConfig.backgroundImage.paths.original }}');"{% endif %}
{% if moduleConfig.alt %} aria-label="{{ moduleConfig.alt }}"{% endif %}
>
{% if moduleConfig.hasBackgroundOverlay %}
<div class="countdown-timer__overlay" aria-hidden="true" style="--overlayBackgroundColor: {{ moduleConfig.backgroundOverlay }};"></div>
{% endif %}
<div class="countdown-timer__active justify-items-{{ moduleConfig.contentAlignment }} text-align-{{ textAlign }}">
{% if moduleConfig.hasActiveCounterHeader and moduleConfig.activeCounterHeaderContent and moduleConfig.activeCounterHeaderLevel %}
{{
header({
level: moduleConfig.activeCounterHeaderLevel|default('h2'),
content: moduleConfig.activeCounterHeaderContent,
classNames: "countdown-timer__header "
})
}}
{% endif %}
{% if moduleConfig.hasActiveCounterDescription and moduleConfig.activeCounterDescriptionPlacement == 'above' %}
<div class="countdown-timer__description countdown-timer__description_above text-align-{{ textAlign }}">
{{ moduleConfig.activeCounterDescription }}
</div>
{% endif %}
<div
class="countdown-timer__countdown"
style="
--timeUnitBackgroundColor: {{ moduleConfig.digitsBackgroundColor }};
--borderRadius: {{ moduleConfig.borderRadius }};
--textColor: {{ moduleConfig.digitsTextColor }};"
>
<span class="sr-only">{{ translate("Countdown to") }}: {{ endDate }}</span>
<div class="countdown-timer__unit countdown-timer__unit_days {% if moduleConfig.timeUnitsPosition == 'inside' %}countdown-timer__unit_with-background{% endif %} resetcss">
<span class="countdown-timer__value {% if moduleConfig.timeUnitsPosition == 'under' %}countdown-timer__value_with-background{% endif %}" data-unit="days" aria-hidden="true">00</span>
<span class="countdown-timer__label" aria-hidden="true">{{ translate("Days") }}</span>
</div>
{% if moduleConfig.shouldShowSeparator %}
<span class="countdown-timer__separator" aria-hidden="true">:</span>
{% endif %}
<div class="countdown-timer__unit countdown-timer__unit_hours {% if moduleConfig.timeUnitsPosition == 'inside' %}countdown-timer__unit_with-background{% endif %} resetcss">
<span class="countdown-timer__value {% if moduleConfig.timeUnitsPosition == 'under' %}countdown-timer__value_with-background{% endif %}" data-unit="hours" aria-hidden="true">00</span>
<span class="countdown-timer__label" aria-hidden="true">{{ translate("Hours") }}</span>
</div>
{% if moduleConfig.shouldShowSeparator %}
<span class="countdown-timer__separator" aria-hidden="true">:</span>
{% endif %}
<div class="countdown-timer__unit countdown-timer__unit_minutes {% if moduleConfig.timeUnitsPosition == 'inside' %}countdown-timer__unit_with-background{% endif %} resetcss">
<span class="countdown-timer__value {% if moduleConfig.timeUnitsPosition == 'under' %}countdown-timer__value_with-background{% endif %}" data-unit="minutes" aria-hidden="true">00</span>
<span class="countdown-timer__label" aria-hidden="true">{{ translate("Minutes") }}</span>
</div>
{% if moduleConfig.shouldShowSeparator %}
<span class="countdown-timer__separator" aria-hidden="true">:</span>
{% endif %}
<div class="countdown-timer__unit countdown-timer__unit_seconds {% if moduleConfig.timeUnitsPosition == 'inside' %}countdown-timer__unit_with-background{% endif %} resetcss">
<span class="countdown-timer__value {% if moduleConfig.timeUnitsPosition == 'under' %}countdown-timer__value_with-background{% endif %}" data-unit="seconds" aria-hidden="true">00</span>
<span class="countdown-timer__label" aria-hidden="true">{{ translate("Seconds") }}</span>
</div>
</div>
{% if moduleConfig.hasActiveCounterDescription and moduleConfig.activeCounterDescriptionPlacement == 'below' %}
<div class="countdown-timer__description countdown-timer__description_below text-align-{{ textAlign }}">
{{ moduleConfig.activeCounterDescription }}
</div>
{% endif %}
{% if moduleConfig.hasActiveCounterButton %}
<a
class="btn btn_{{ moduleConfig.activeCounterButtonSize }} btn_{{ moduleConfig.activeCounterButtonType }} countdown-timer__button"
href="{{ moduleConfig.activeCounterButtonUrl }}"
rel="noopener noreferrer"
{% if not moduleConfig.shouldOpenActiveCounterLinkInTheSameTab %}target="_blank"{% endif %}
>
{{ moduleConfig.activeCounterButtonContent }}
</a>
{% endif %}
</div>
{% if moduleConfig.endCountdownAction == 'showEndBanner'%}
<div class="countdown-timer__ended justify-items-{{ moduleConfig.contentAlignment }} text-align-{{ textAlign }}" hidden>
{% if moduleConfig.hasEndBannerHeader and moduleConfig.endBannerHeaderContent and moduleConfig.endBannerHeaderLevel %}
{{
header({
level: moduleConfig.endBannerHeaderLevel|default('h2'),
content: moduleConfig.endBannerHeaderContent,
classNames: "countdown-timer__header"
})
}}
{% endif %}
{% if moduleConfig.hasEndBannerDescription %}
<div class="countdown-timer__description text-align-{{ textAlign }}">
{{ moduleConfig.endBannerDescription }}
</div>
{% endif %}
{% if moduleConfig.hasEndBannerButton %}
<a
class="btn btn_{{ moduleConfig.endBannerButtonSize }} btn_{{ moduleConfig.endBannerButtonType }} countdown-timer__button"
href="{{ moduleConfig.endBannerButtonUrl }}"
rel="noopener noreferrer"
{% if not moduleConfig.shouldOpenEndBannerLinkInTheSameTab %}target="_blank"{% endif %}
>
{{ moduleConfig.endBannerButtonContent }}
</a>
{% endif %}
</div>
{% endif %}
</countdown-timer>
Macros reference¶
Used styles¶
Module configuration schema¶
[
{
"label": "General settings",
"state": "unfolded",
"elements": [
{
"type": "datePicker",
"name": "endDateTime",
"label": "End date and time",
"isRequired": true,
"options": {
"withTime": true
}
},
{
"name": "endCountdownAction",
"type": "radio",
"label": "Action after countdown ends",
"defaultValue": "hide",
"options": {
"radioOptions": [
{
"key": "hide",
"label": "hide module"
},
{
"key": "showEndBanner",
"label": "display final banner"
}
]
}
},
{
"name": "backgroundImage",
"type": "imageUpload",
"label": "Background image",
"options": {
"requireImageSize": false,
"allowedExtensions": ["webp", "svg", "jpg", "png", "gif", "jpeg"]
}
},
{
"type": "text",
"name": "alt",
"label": "Alternative image description (\"alt\")",
"supportsTranslations": true,
"hint": "Alternative text (\"alt\" attribute) should contain a description of what the graphic presents. This description is read by software for the blind and analyzed when search engines index the page."
},
{
"name": "hasBackgroundOverlay",
"type": "checkbox",
"label": "Add color overlay",
"hint": "Use this if you're placing text over an image. A solid or semi-transparent overlay will improve text readability.",
"defaultValue": 0,
"children": [
{
"name": "backgroundOverlay",
"type": "colorPicker",
"label": "Overlay color",
"defaultValue": "#FFFFFF4D",
"relations": [
{
"parentName": "hasBackgroundOverlay",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
],
"options": {
"allowVariables": true
}
}
]
},
{
"name": "bannerSize",
"type": "select",
"label": "Banner size",
"defaultValue": "small",
"options": {
"selectOptions": [
{
"key": "large",
"label": "Large <<height>>"
},
{
"key": "medium",
"label": "Medium"
},
{
"key": "small",
"label": "Small <<height>>"
}
]
}
},
{
"name": "contentPosition",
"type": "select",
"label": "Content position",
"defaultValue": "center",
"options": {
"selectOptions": [
{
"key": "bottom-right",
"label": "Bottom right"
},
{
"key": "bottom-center",
"label": "Bottom center"
},
{
"key": "bottom-left",
"label": "Bottom left"
},
{
"key": "center-right",
"label": "Middle right"
},
{
"key": "center",
"label": "Center <<in_the_middle>>"
},
{
"key": "center-left",
"label": "Middle left"
},
{
"key": "top-right",
"label": "Top right"
},
{
"key": "top-center",
"label": "Top center"
},
{
"key": "top-left",
"label": "Top left"
}
]
}
},
{
"name": "contentAlignment",
"type": "select",
"options": {
"selectOptions": [
{
"key": "start",
"label": "Left <<to_left>>"
},
{
"key": "center",
"label": "Center"
},
{
"key": "end",
"label": "Right <<to_right>>"
}
]
},
"label": "Content alignment",
"defaultValue": "center"
}
]
},
{
"label": "Counter",
"state": "unfolded",
"elements": [
{
"name": "digitsTextColor",
"type": "colorPicker",
"label": "Digit color",
"defaultValue": "@globalFontColor",
"options": {
"allowVariables": true
}
},
{
"name": "digitsBackgroundColor",
"type": "colorPicker",
"label": "Digit background color",
"defaultValue": "@globalBodyBackgroundColor",
"options": {
"allowVariables": true
}
},
{
"type": "number",
"name": "borderRadius",
"label": "Background rounding",
"labelDescription": "0% - rectangular, 100% - round background",
"defaultValue": 0,
"isRequired": true,
"validators": [
{
"type": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 0
}
},
{
"type": "lessEqThan",
"options": {
"max": 100
}
}
],
"options": {
"postfix": "%"
}
},
{
"name": "timeUnitsPosition",
"type": "radio",
"label": "Time unit display",
"defaultValue": "inside",
"options": {
"radioOptions": [
{
"key": "inside",
"label": "inside digit tile"
},
{
"key": "under",
"label": "below digit tile"
}
]
}
},
{
"name": "shouldShowSeparator",
"type": "checkbox",
"label": "Display separator between digits",
"defaultValue": 1
}
]
},
{
"label": "Countdown banner",
"state": "unfolded",
"elements": [
{
"type": "checkbox",
"name": "hasActiveCounterHeader",
"label": "Display heading",
"defaultValue": 1,
"children": [
{
"type": "text",
"name": "activeCounterHeaderContent",
"label": "Module heading content",
"defaultValue": "",
"supportsTranslations": 1,
"relations": [
{
"parentName": "hasActiveCounterHeader",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "select",
"name": "activeCounterHeaderLevel",
"label": "Heading level",
"hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
"defaultValue": "h2",
"options": {
"selectOptions": [
{
"key": "h2",
"label": "H2"
},
{
"key": "h3",
"label": "H3"
},
{
"key": "h4",
"label": "H4"
},
{
"key": "h5",
"label": "H5"
},
{
"key": "h6",
"label": "H6"
}
]
},
"relations": [
{
"parentName": "hasActiveCounterHeader",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
}
]
},
{
"name": "hasActiveCounterDescription",
"type": "checkbox",
"label": "Display additional description",
"defaultValue": 0,
"children": [
{
"type": "textarea",
"name": "activeCounterDescription",
"label": "Description",
"supportsTranslations": true,
"relations": [
{
"parentName": "hasActiveCounterDescription",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"name": "activeCounterDescriptionPlacement",
"type": "select",
"label": "Description position",
"defaultValue": "above",
"options": {
"selectOptions": [
{
"key": "above",
"label": "Above counter"
},
{
"key": "below",
"label": "Below counter"
}
]
},
"relations": [
{
"parentName": "hasActiveCounterDescription",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
}
]
},
{
"type": "checkbox",
"name": "hasActiveCounterButton",
"label": "Add button",
"defaultValue": 0,
"children": [
{
"type": "text",
"name": "activeCounterButtonContent",
"label": "Button content",
"supportsTranslations": 1,
"relations": [
{
"parentName": "hasActiveCounterButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "select",
"name": "activeCounterButtonType",
"label": "Button type",
"defaultValue": "primary",
"options": {
"selectOptions": [
{
"key": "primary",
"label": "Primary <<button>>"
},
{
"key": "secondary",
"label": "Secondary"
},
{
"key": "outline",
"label": "Outline"
},
{
"key": "ghost",
"label": "Ghost (text only)"
}
]
},
"relations": [
{
"parentName": "hasActiveCounterButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "select",
"name": "activeCounterButtonSize",
"label": "Button size",
"defaultValue": "m",
"options": {
"selectOptions": [
{
"key": "xs",
"label": "XS"
},
{
"key": "s",
"label": "S"
},
{
"key": "m",
"label": "M"
},
{
"key": "l",
"label": "L"
}
]
},
"relations": [
{
"parentName": "hasActiveCounterButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "text",
"name": "activeCounterButtonUrl",
"label": "Webpage URL",
"options": {
"placeholder": "https:// or /"
},
"supportsTranslations": 1,
"validators": [
{
"type": "url",
"options": {
"allowRelativePath": true
}
}
],
"relations": [
{
"parentName": "hasActiveCounterButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "checkbox",
"name": "shouldOpenActiveCounterLinkInTheSameTab",
"label": "Open the link in the same tab",
"hint": "Opening links in the same tab makes navigation easier: using the \"back\" button is possible. The customer can decide to open the page in a new tab.",
"defaultValue": 1,
"relations": [
{
"parentName": "hasActiveCounterButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
}
]
}
]
},
{
"label": "Final banner",
"state": "folded",
"elements": [
{
"type": "checkbox",
"name": "hasEndBannerHeader",
"label": "Display heading",
"defaultValue": 0,
"children": [
{
"type": "text",
"name": "endBannerHeaderContent",
"label": "Module heading content",
"defaultValue": "",
"supportsTranslations": 1,
"relations": [
{
"parentName": "hasEndBannerHeader",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "select",
"name": "endBannerHeaderLevel",
"label": "Heading level",
"hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
"defaultValue": "h2",
"options": {
"selectOptions": [
{
"key": "h2",
"label": "H2"
},
{
"key": "h3",
"label": "H3"
},
{
"key": "h4",
"label": "H4"
},
{
"key": "h5",
"label": "H5"
},
{
"key": "h6",
"label": "H6"
}
]
},
"relations": [
{
"parentName": "hasEndBannerHeader",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
}
]
},
{
"name": "hasEndBannerDescription",
"type": "checkbox",
"label": "Display additional description below the heading",
"defaultValue": 0,
"children": [
{
"type": "textarea",
"name": "endBannerDescription",
"label": "Description",
"supportsTranslations": true,
"relations": [
{
"parentName": "hasEndBannerDescription",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
}
]
},
{
"type": "checkbox",
"name": "hasEndBannerButton",
"label": "Add button",
"defaultValue": 0,
"children": [
{
"type": "text",
"name": "endBannerButtonContent",
"label": "Button content",
"supportsTranslations": 1,
"relations": [
{
"parentName": "hasEndBannerButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "select",
"name": "endBannerButtonType",
"label": "Button type",
"defaultValue": "primary",
"options": {
"selectOptions": [
{
"key": "primary",
"label": "Primary <<button>>"
},
{
"key": "secondary",
"label": "Secondary"
},
{
"key": "outline",
"label": "Outline"
},
{
"key": "ghost",
"label": "Ghost (text only)"
}
]
},
"relations": [
{
"parentName": "hasEndBannerButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "select",
"name": "endBannerButtonSize",
"label": "Button size",
"defaultValue": "m",
"options": {
"selectOptions": [
{
"key": "xs",
"label": "XS"
},
{
"key": "s",
"label": "S"
},
{
"key": "m",
"label": "M"
},
{
"key": "l",
"label": "L"
}
]
},
"relations": [
{
"parentName": "hasEndBannerButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "text",
"name": "endBannerButtonUrl",
"label": "Webpage URL",
"options": {
"placeholder": "https:// or /"
},
"supportsTranslations": 1,
"validators": [
{
"type": "url",
"options": {
"allowRelativePath": true
}
}
],
"relations": [
{
"parentName": "hasEndBannerButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "checkbox",
"name": "shouldOpenEndBannerLinkInTheSameTab",
"label": "Open the link in the same tab",
"hint": "Opening links in the same tab makes navigation easier: using the \"back\" button is possible. The customer can decide to open the page in a new tab.",
"defaultValue": 1,
"relations": [
{
"parentName": "hasEndBannerButton",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
}
]
}
]
},
{
"label": "CSS",
"state": "folded",
"elements": [
{
"name": "classNames",
"type": "text",
"label": "CSS class",
"labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
}
]
}
]