This article covers how to design an on-site campaign with the timer and spinner widgets. These elements can be used in conjunction with any other elements in the Visual Template Editor.
Access the Bluecore Site™ Visual Template Editor by following the below steps.
Navigate to the flag icon on the left-hand navigation.
Go to Site.
Then Campaigns.
Click New in the upper right-hand corner.
Click Campaign.
Select a Campaign Type.
Configure the Message Settings.
Click Save and Continue.
Go to the Message tab.
Click Create in VTE.
Add a layer to the canvas to get started.
TIMER WIDGET
Use the timer widget in an on-site campaign to express a sense of urgency to your customers or drive excitement for a new product release by showing a timer counting down to the release date. Use this element to show a countdown to something with hours, minutes, and seconds.
TIMER DESIGN
Configure the following for the design of the timer.
Styling: Regular styling or an alarm clock design
Container width, height, block background color
Border
Number Settings: Color, size, font, spacing
Text Settings: Show text labels (hour, minute, second), colons, text position, color, font configuration, and padding.
TIMER SETTINGS
Configure the following settings for the timer.
Select to show the timer with a specific time or an amount of time after the timer has been seen.
The specific time setting allows you to set up content until a certain time period. This will be determined for each user and the timer ends when this time criteria is met.
The time after seen setting enables a dynamic use case where the timer starts the countdown when the user first sees the promotion. The timer will be specific to each user since the first engagement is different, however the end time will be what is set post the interaction.
End time
Time zone of the user (this is available based on the browser that’s being used) or a selected time zone (this is converted to the users local browser time)
Select what to do when the timer ends: do nothing, close the campaign, show a confirmation message (be sure to configure this additional screen), or show another campaign (select a previously created campaign from the drop-down menu).
POSITION AND ANIMATION
You can drag and drop the element on the canvas on the right-hand side with your mouse, or apply any of the below position options for exact placement.
Left and Top Position: Enter a percentage of left and top alignment.
Layer Alignment: Select auto, left, center, or right alignment on the layer.
Stick to side: Offset the element to a specific side (pixels). This is especially useful to make the popup responsive and allow the elements stay within the boundaries if the screen is resized.
Animation Effect: Catch the customers attention by selecting an animation for the text. Enter a start delay and a speed for the animation.
SPINNER WIDGET
Use a spinner (or spin-to-win widget) on an on-site campaign to gamify a campaign experience. Entice your customers to win something, such as a percentage off or free shipping by entering their email address.
SPINNER SETTINGS
Configure the following settings and design for the spinner.
Spinner prize options: Enter a winning option and four non-winning options. There is only one winning option that the spinner will always land on.
Spinner design: Configure the design of the spinner with templated styles. Then, configure the colors, borders, peg styles, text and font configurations, and height and width.
POSITION AND ANIMATION
You can drag and drop the element on the canvas on the right-hand side with your mouse, or apply any of the below position options for exact placement.
Left and Top Position: Enter a percentage of left and top alignment.
Layer Alignment: Select auto, left, center, or right alignment on the layer.
Stick to side: Offset the element to a specific side (pixels). This is especially useful to make the popup responsive and allow the elements stay within the boundaries if the screen is resized.
Animation Effect: Catch the customers attention by selecting an animation for the text. Enter a start delay and a speed for the animation.
