Introduction
The countdown timer aims to create a sense of urgency and encourage users to make a purchase before the sale ends.
In this article, we will create a non-intrusive banner at the top of the website that displays a countdown timer for a sale. We will use the On-site Messaging (OSM) feature of MoEngage to achieve this.
Expected Result
Users will see a non-intrusive banner with a countdown timer at the top of the website, highlighting the remaining time for a sale. This will increase the sense of urgency and potentially boost sales during the promotional period.
Create an OSM Campaign.
In this section, let us create an OSM campaign to show a non-intrusive banner at the top of the website.
Step 1: Target Users
- Navigate to the sidebar on the left and click Engage > Campaigns and click + Create campaign, or click + Create new > Campaign.
- Under Inbound, click On-site.
You are taken to the first step "Target users" of defining your campaign. - Enter the following details:
- Campaign name: Enter a name for the campaign. For example, "Countdown Timer Banner".
- Campaign tags: Select the relevant campaign tags.
- In the Target platforms section, select Web.
- In the Trigger criteria section, select On Page Load.
- Set the trigger to display the countdown banner when a user visits the website.
- Ensure the banner is shown after the user has been on the website for at least 5 seconds to avoid being too intrusive.
-
In the Select pages section, select the All pages option.
-
In the Target Audience section, select All users to target all users who visit the website during the sale period.
- Select the Exclude Users check box and define a condition to exclude users who have already made a purchase during the sale.
- Click Next to move to the second step "Content" where you can define the content that will go into your campaign.
Step 2: Content
- In the Search templates field, search with the keyword “countdown” to find a list of pop-up windows.
- In the Banner templates section, hover your mouse on the Banner: Countdown timer with button template and click Select Template.
-
Design the countdown timer banner in the desktop and mobile views:
-
Add a title: "Hurry up! Sale ends in"
-
Style: Use a bold and attractive font to grab attention.
-
Include a countdown timer: Display the remaining time for the sale. Ensure the timer counts down in real-time.
-
Add a call-to-action (CTA) button: "Shop Now"
-
Link: Direct the button to the sale page.
-
Style: Make the button stand out with a vibrant color and clear font.
-
-
Design the pop-up in the mobile view: Reduce the text size of the elements and hide any element, if required.
- Ensure the banner is non-intrusive: Position the banner at the top of the website so it does not cover any content or disrupt the user experience. Select the Push the content of the page down check box to ensure the banner is non-intrusive.
-
- Click Next to move to the third step "Schedule and goals" where you can define the schedule and goal of your campaign.
Step 3: Scheduling and goals
-
Set up campaign scheduling and delivery controls:
-
Determine the duration for which the campaign will run, aligning with the sale period.
-
Configure the banner to be shown only once per session to avoid repetitive prompts and enhance user experience.
- Configure the frequency and limits to ensure the message is shown appropriately.
-
-
After all the settings are verified, click Publish to launch the campaign.
User Interaction
- Targeted users will visit the website during the sale period.
- After 5 seconds, the non-intrusive banner with the countdown timer will appear at the top of the website.
- Users can click the CTA button to explore the sale items or ignore the banner if they are not interested.
Conclusion
By implementing this countdown timer banner, users are subtly informed about the limited-time sale, creating a sense of urgency that encourages them to make a purchase before the sale ends. This approach helps to increase user engagement and boost sales during the promotional period.