How do I add countdown timers in the Drag & Drop Email Editor?
Does your library have a big event coming up? Maybe your Summer Reading Program Kickoff, Grand Opening, or New Collection Release? Build community anticipation for the event by including a countdown timer in your emails! Choose the jump start method or skip to dive in deeper and get a few pro tips.
Jump start:
If your template shows a countdown timer placeholder, just click on it and the timer settings will open.
Need to adjust the end date and time? Click in the date box to open the calendar and select your date. Then use the hour and minute drop-downs to set your time. And don’t forget to set your time zone!
Want to only show your countdown in hours and not days? Click the Display days toggle.
Need to adjust the end date and time? Click in the date box to open the calendar and select your date. Then use the hour and minute drop-downs to set your time. And don’t forget to set your time zone!
Want to only show your countdown in hours and not days? Click the Display days toggle.
End date and time: Use the calendar to select the end date for the timer. Use the time drop-down menus to select the end time.
Time zone: Use the drop-down menu to select your time zone.
Number font: Use the drop-down menus to select a font and font size for the timer. To set the color of the font, click the color box. Enter a color hex code, use one of the preselected colors, or use the Color Picker.
Time zone: Use the drop-down menu to select your time zone.
Number font: Use the drop-down menus to select a font and font size for the timer. To set the color of the font, click the color box. Enter a color hex code, use one of the preselected colors, or use the Color Picker.
Timer background color: By default, the timer will show with a transparent background. To change the background color, click the color box. Enter a color hex code, use one of the preselected colors, or use the Color Picker.
Display days: This toggle default is on. To show only hours, minutes, and seconds, click to turn it off.
Separator: The default separator is a colon. DD:HH:MM:SS. To change it, type your preferred separator into the box. (e.g., -, |, *)
Display days: This toggle default is on. To show only hours, minutes, and seconds, click to turn it off.
Separator: The default separator is a colon. DD:HH:MM:SS. To change it, type your preferred separator into the box. (e.g., -, |, *)
Number labels: By default, this toggle is on to display the labels beneath the numbers (days, hours, minutes, seconds). To remove the labels, click to turn it off.
Label language: Use the drop-down menu to set the language for the timer labels (days, hours, minutes, seconds).
Label font: Use the drop-down menus to select a font and font size for the timer labels. To set the color of the font, click the color box. Enter a color hex code, use one of the preselected colors, or use the Color Picker.
Expired timer image: You can include an image that will show in place of the timer once the countdown is over. Click to toggle on. This will open the LibraryAware Image Selector. Search for an image or upload your own and click Select.
Link: Enter the link of where you want viewers to be directed when they click on the timer. Use the Site drop-down menu to select the type of link you want to include. To link to a book in your catalog, an e-resource, or uploaded file, click the Additional Link Options button. This link will be applied to the Expired timer image as well.
Alternate text: Add alt text to the timer for accessibility. See: Accessibility in LibraryAware Emails.
Alignment: To align the timer within the container, select left, center, or right alignment.
Label language: Use the drop-down menu to set the language for the timer labels (days, hours, minutes, seconds).
Label font: Use the drop-down menus to select a font and font size for the timer labels. To set the color of the font, click the color box. Enter a color hex code, use one of the preselected colors, or use the Color Picker.
Expired timer image: You can include an image that will show in place of the timer once the countdown is over. Click to toggle on. This will open the LibraryAware Image Selector. Search for an image or upload your own and click Select.
Link: Enter the link of where you want viewers to be directed when they click on the timer. Use the Site drop-down menu to select the type of link you want to include. To link to a book in your catalog, an e-resource, or uploaded file, click the Additional Link Options button. This link will be applied to the Expired timer image as well.
NOTE: When linking to a book in your catalog, catalog holdings information will be displayed if your library has On The Shelf (OTS). For libraries not using OTS, to ensure you are linking to the copy owned by your library, search by ISBN.
Alternate text: Add alt text to the timer for accessibility. See: Accessibility in LibraryAware Emails.
Alignment: To align the timer within the container, select left, center, or right alignment.
To set a different alignment for mobile view, click the mobile icon then set the alignment.
Pro tip! Some elements look good on desktop devices when center-aligned but may not look as good on mobile devices. You may want to set different alignments for certain elements on mobile and desktop devices. Click the Device Preview icon to see how your email will look on desktop and mobile devices.
Size: Adjust the width and height of the timer using the + and – controls or by entering numerical values. Restore the image to original image size by clicking the Restore to actual size icon.
Adjust to width: To increase the width of the timer to fill the width of the Container, click to toggle on.
Responsive image: This option allows the image to adjust to the width of the screen of the mobile device.
Advanced settings: Click to toggle on. Further setting options will then be available:
Padding: Padding refers to the margin around images or text. To add padding to the edges of a Timer Block, use the + and – controls to adjust the padding for all edges.
To adjust the padding for each edge separately, click More to toggle it on.
Responsive image: This option allows the image to adjust to the width of the screen of the mobile device.
Note: Adaptivity only works on devices that support it.
Advanced settings: Click to toggle on. Further setting options will then be available:
- Retina Display support – This toggle default is on. Click to turn it off.
- Labels letter case – Click on the case you want to apply to the Timer, Capitalize (First letter of the word is capitalized), Uppercase (all caps), or Lowercase.
- Digits color: Days, Hours, Minutes, Seconds – To set the color of each of these individually, click the color box next to the one(s) you wish to change. Enter a color hex code, use one of the preselected colors, or use the Color Picker.
- Separator font – If you want the Separators to be in a different font from the digits, use the drop-down menus to select a font and font size for the Separators. To set the color of the font, click the color box. Enter a color hex code, use one of the preselected colors, or use the Color Picker.
- Labels color: Days, Hours, Minutes, Seconds – To set the color of each of these individually, click the color box next to the one(s) you wish to change. Enter a color hex code, use one of the preselected colors, or use the Color Picker.
Pro tip! Think high contrast when choosing colors for your text and backgrounds. Test out color combinations with an online contrast analyzer like Contrast Checker.
Padding: Padding refers to the margin around images or text. To add padding to the edges of a Timer Block, use the + and – controls to adjust the padding for all edges.
To adjust the padding for each edge separately, click More to toggle it on.
Click the mobile icon to adjust padding for the mobile version.
Add an anchor link: Anchor links allow viewers to jump to specific areas within the email. To add an anchor link to the Timer Block, click to toggle on Add an anchor link and enter a name for the anchor.
Next, click on the Block that you would like linked to this anchor.
Hide element: If you wish to hide a timer from view on either desktop or mobile devices, select the corresponding icon in the Hide element section.
Include in: By default, the timer will be included in both HTML and AMPHTML emails. This is shown in the Include in setting. We do not recommend you change this setting.
Delete: To delete a Timer Block, hover over it in the e-blast. A menu tab will appear on the right side of the block. Click the tab then the trash can icon.
Pro tip! Sometimes you want to make your email design “clean” with lots of white space. Sometimes you use padding for containers and structures to fill them in with a color background. This all looks good on desktop devices, but on mobile devices it may make those elements less attractive. So, you may want to remove padding for mobile devices. Click the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.
Add an anchor link: Anchor links allow viewers to jump to specific areas within the email. To add an anchor link to the Timer Block, click to toggle on Add an anchor link and enter a name for the anchor.
Next, click on the Block that you would like linked to this anchor.
- To link a piece of text in a Text Block, highlight it and click the Change Link icon on the formatting toolbar. In the settings menu, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.
- To add the link to other Blocks, in the settings menu for that Block, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.
NOTE: Anchor links are not supported in some email clients: iOS Gmail app, iOS Apple Mail, Outlook app on Android, Outlook app for macOS and AMP Emails.
Hide element: If you wish to hide a timer from view on either desktop or mobile devices, select the corresponding icon in the Hide element section.
Pro tip! There are a few reasons why you might need this option. For example, you may want to hide some elements on mobile devices to avoid horizontal scrolling, which could happen if you apply a large font size to the text. Click the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.
Include in: By default, the timer will be included in both HTML and AMPHTML emails. This is shown in the Include in setting. We do not recommend you change this setting.
Delete: To delete a Timer Block, hover over it in the e-blast. A menu tab will appear on the right side of the block. Click the tab then the trash can icon.
