This feature available on All Plans
Contents
Widget Settings
Setup
Visibility
CSS Class
Overview
The Countdown Widget displays a countdown on your campaign (in days, hours, and minutes), winding down to a date and time of your choice.
To add one of these widgets to your campaign, click the Countdown Widget icon in the Add Widgets Panel, or click and drag the icon into your preview area.
Widget Settings
The widget settings popup is where you'll make any needed changes to your Countdown Widget. To change the widget name, click on the pencil icon in the top-left (next to the name) then type your new name.
You will also see the CSS ID (starting with a #) of your new widget listed in the top-right corner of the popup.
You'll want to move through each item in the menu on the left side to make sure you've completely customized the Countdown Widget in the way you'd like. You can navigate through these sections using the Back and Next buttons at the bottom.
When you're finished making changes to your widget, click the blue Save and Exit button.
Setup
Use the Setup section to establish the target date for your countdown, and how it displays. The dropdown boxes can be used to select the Year, Month, Day, Hour (using a 24-hour clock), and the Time zone you wish to use.
By default the widget will display the number of days left until your target date. If you would like to include Hours to go or Minutes to go as well, click the appropriate checkbox(es) in the Also Show section.
Visibility
If you'd like to limit visibility of the widget to a specific date and time (for example, to make the widget disappear when the countdown is over), make the widget a popup, only show the widget in your Builder, or limit in which country/countries the widget can be seen; you'd do so in the Visibility section. More information about these settings can be found in the Widget Visibility help doc.
CSS Class
In this section, you can add a CSS Class that will be associated with the Countdown Widget - that way you can target it with custom CSS code. Rules and naming conventions are provided so that you don't use a class that won't work. Simply add your CSS class(es) to the Extra CSS Classes field.
