Adding the Countdown Element
Countdown timers are a powerful tool to add urgency to your offers, which can significantly help increase sign-up rates. In Alia, you can easily insert a timer into any container within your popup using the Countdown element.
In the Alia editor, select the container where you want the countdown timer to appear.
Click the "+" icon located on the container.
Select "Add child element" from the menu.
Choose Countdown from the "Add element" section to insert it into your layout.
Note: If you want the timer to appear only on a specific step (e.g., the email step or the reward step) rather than the entire popup, ensure you select a container located specifically within that step's hierarchy.
Setting Up Your Timer Type
Alia offers three distinct ways to configure how your timer counts down. You can choose the one that best fits your marketing campaign:
Fixed duration: Starts a countdown from a set amount of time (e.g., 30 seconds or 24 hours) from the moment the user sees the popup.
To date: Counts down to a specific calendar date and time. This is ideal for seasonal sales or product launches.
To end of: Automatically counts down to the end of a recurring time period, such as the end of the current day, week, or month.
Formatting and Styling
Once your timer logic is set, you can customize its appearance to match your brand's aesthetic.
Choosing the Format
You can adjust the visual structure of the timer units:
Separator Style: Choose whether to separate time units with colons (00:00) or letters (00h 00m).
Unit Selection: Toggle which units are displayed based on your needs. You can include Days, Hours, Minutes, and Seconds.
Changing the Look
To edit the visual design, click on the Countdown element in the editor. Under the "Text" settings in the sidebar, you can modify:
Font size and weight
Text color
Alignment and spacing
Desktop and Mobile Synchronization
It is important to remember that Alia allows for independent layouts between mobile and desktop to ensure the best user experience. Because of this, the timer does not automatically get added to the desktop version if you first created it on mobile.
To ensure your timer appears on all devices, simply switch to the Desktop view in the editor and repeat the insertion steps. This gives you the flexibility to style the timer differently for larger screens if desired.