Are you looking for a way to create a touchpoint with a countdown timer?
Then let us help you out!
In this article, we will explain to you how to create a touchpoint containing a countdown timer.
First, we start off by creating a new touchpoint and give it a fitting name. In this example, we will go with the title of [Notification] Persuasion Timer.
We will set the touchpoint type to ‘Website’ and select 'Static Content'. Since no (custom) content items will be used by this touchpoint. The position and layout are all up for personal preference. We will keep the default settings for this article.
In the elements section, we will go for a persuasion based upon the fast delivery of a webshop. Order today and receive your item tomorrow!
Within the description box, we will add an id that will be used later on, in order to show the countdown timer. You can just copy the following snippet: <div id="datatrics-countdown">
Add the following CSS Class Names:
datatrics-box--persuasion datatrics-box--timer datatrics-box--smaller datatrics-box--inverse
After filling in these fields, there is only one part left to add, which is the JavaScript of the touchpoint. Take the following code snippet and paste it within the JavaScript tab without the comments.
//
// Use openingtimes to dynamically generate the end date for the timer based on the current day of the week.
// The format inside the setHours function is as follows: setHours(hour, min, sec, millisec).
//
var openingtimes = {
0: {
label: 'Sunday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(17,0,0)
},
1: {
label: 'Monday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
2: {
label: 'Tuesday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
3: {
label: 'Wednesday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
4: {
label: 'Thursday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
5: {
label: 'Friday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
6: {
label: 'Saturday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(17,0,0)
}
};
datatricsFn.datatricsCountdown({
// CSS Selector which the timer will be placed in.
element: '#datatrics-countdown',
// Should the timer show a day? Set to false to disable.
include_days: true,
// Set an end date for the timer. Use a dynamically generated end date or a specific end date.
// Generated: new Date(openingtimes[new Date().getDay()].end)
// Specific: new Date('06/22/2030 18:00:00')
end_date: new Date(openingtimes[new Date().getDay()].end),
// Set a time in milliseconds how often the timer should update.
interval: 1000,
// Set labels that are used inside the timer.
days_label: 'days',
hours_label: 'hours',
minutes_label: 'minutes',
seconds_label: 'seconds',
expired_label: 'Order now and receive in two days'
});
If not present, you also need the following script within the 'scripts' tab within the project themes. To keep everything clean, copy the code and delete the comments.
var datatricsFn = { // Create a variable that contains the function
datatricsCountdown: function (payload){ // Create function with "payload" as a parameter
const el = document.querySelector(payload.element); // Creates const "el" that checks the DOM for a payload.element
function render() { // Creates a function called "render"
const now = new Date().getTime(); // create const called now that gets the current time
const distance = payload.end_date - now; // Create const distance that subtracts now from the end date to get remaining time.
let html = ''; // Creates let html without a value
if (distance > 0) { // Checks if there is still remainingtime in the day
let d = Math.floor(distance / (1000 * 60 * 60 * 24)); // Sets a let for days
let h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // Sets a let for hours
let m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); // Sets a let for minutes
let s = Math.floor((distance % (1000 * 60)) / 1000); // Sets a let for seconds
d = d < 10 ? '0' + d : d; // If d is < 10, d = 0 + d. If not, d = d.
h = h < 10 ? '0' + h : h; // If d is < 10, d = 0 + d. If not, d = d.
m = m < 10 ? '0' + m : m; // If d is < 10, d = 0 + d. If not, d = d.
s = s < 10 ? '0' + s : s; // If d is < 10, d = 0 + d. If not, d = d.
if (payload.include_days) { // Checks if the payload contains the field "include_days"
html += `<div class="days" data-label="${payload.days_label}">${d}</div>`; // Sets html to also show days
}
html += `<div class="hours" data-label="${payload.hours_label}">${h}</div>`; // Sets html to also show hours
html += `<div class="minutes" data-label="${payload.minutes_label}">${m}</div>`; // Sets html to also show minutes
html += `<div class="seconds" data-label="${payload.seconds_label}">${s}</div>`; // Sets html to also show seconds
} else {
html = `<div class="expired">${payload.expired_label}</div>`; // If there is no remaining time, show expired label
clearInterval(interval);
}
el.innerHTML = `<div class="datatrics-countdown">${html}</div>`;// Shows outcome of html
}
render(); // render the outcome once
let interval = setInterval(function() { // render the outcome at the specified interval in the payload
render();
}, payload.interval);
}
};
Now that we are already within the project themes, add the following CSS to the CSS tab:
#datatrics-box-container.datatrics-box--timer .datatrics-countdown {
display: flex;
align-items: stretch;
justify-content: center;
height: 70px;
}
#datatrics-box-container.datatrics-box--timer .datatrics-countdown div {
padding: 10px;
font-size: 24px;
color: #ccc;
text-align: center;
border-radius: dtBorderRadiuspx;
color: dtPrimaryColor;
border: 1px solid dtPrimaryColor;
font-weight: bold;
flex: 70px 0 0;
margin: 0 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#datatrics-box-container.datatrics-box--timer .datatrics-countdown div:after {
content: attr(data-label);
display: block;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 8px;
margin-top: 5px;
}
#datatrics-box-container.datatrics-box--timer .datatrics-countdown .expired {
flex: 100% 0 0;
}
#datatrics-box-container.datatrics-box--timer.datatrics-box--smaller .datatrics-countdown {
height: 60px;
}
#datatrics-box-container.datatrics-box--timer.datatrics-box--smaller .datatrics-countdown div {
font-size: 18px;
flex: 60px 0 0;
}
#datatrics-box-container.datatrics-box--timer.datatrics-box--smaller .datatrics-countdown div:after {
font-size: 6px;
}
#datatrics-box-container.datatrics-box--timer.datatrics-box--inverse .datatrics-countdown div {
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
}
You can now return to the touchpoint, and place the following CSS within the editor:
#datatrics-box-container .datatrics-box-caption {
text-align: center;
margin-top: 10px;
}
Save the touchpoint and you are all set. As an extra feature, you can also add a timer for how long you want to show the touchpoint to the user.
All this will result in the following touchpoint:
