Sales events and discount coupons are frequently advertised on Web Form widgets. You can incentivize your website visitors to participate in a time sensitive opportunity by creating a countdown timer that displays the amount of time remaining before the offer expires. A countdown timer is a specialized type of clock that measures time intervals. The CreateTimer Helper Function assists you with creating countdown timers that appear on your lightboxes.
The following sections explain how to construct the object argument for the api.utils.createTimer function as well as how to configure the DOM elements of a countdown timer within the lightbox editor.
The text property of message.[TIME-ELEMENT] is optional. If no value is provided the createrTimer function will attempt to take the value from the corresponding DOM element. If there is no value in the DOM element, the value of message.[TIME-ELEMENT].text will be set to "##" so that the replacement can occur. The value of the text property should contain the characters "##". These characters are used as replacement characters for the time values of the countdown timer. For example, the text element of the Hours time element might be set to "H ##" while the minute and second time elements are set to "M ##" and "S ##".
The timerData object may be supplied with a property named "cb". "cb" stands for "callback" and the value of this property should be set to the name of a custom function that you create. The callback function is responsible for populating the time element values of the countdown timer. This option is useful if you are looking to add animated effects to a countdown timer.
Creating DOM Elements within the Lightbox Editor
Within the Web Form's interface you can use the Text element options to create DOM elements to display the values for days, hours, minutes, and seconds. The text value for the element should be set to "##" or to an empty string.
Rather than displaying the time units of the countdown timer in individual DOM elements, the entire time value can be displayed in a single DOM element. You utilize the message property general to achieve this. The format for the general property is similar to how the days, hours, minutes, and second elements are formatted. The class value in the metadata section should match what is being referenced in the Custom JS section.
The following format strings can be used to display the time units of the countdown timer.
- %D - Days
- %HH - Hours
- %MM - Minutes
- %SS - Seconds
Or the text can be added to the general text element within the lightbox editor.