Timer
Paid Feature
This feature is only available in paid plans. Learn More
Timer is a built-in tool used to create countdown timers. This tool create a countdown GIF image to run a realtime countdown. It is supported in both display modes: email and web pages.
Enable / Disable
Timer tool is a premium tool. If you have it in your subscription, It's enabled by default but you can choose to disable it.
unlayer.init({
tools: {
timer: {
enabled: false
}
}
});
Default Values
Timer tool comes with the following default values. You can choose to change any of these.
Property | Default Value |
---|---|
countdown | { countdownUrl: https://cdn.tools.unlayer.com/countdown/countdown.gif`,endTime: '', backgroundColor: '#000000', labelColor: '#FFFFFF', labelFontFamily: 'Open Sans', labelFontSize: 28, digitColor: '#FFFFFF', digitFontFamily: 'Open Sans', digitFontSize: 75, timezone: 'America/Los_Angeles', locale: null, showLabels: true }` |
width | { autoWidth: true, width: '100%' } |
textAlign | center |
altText | Countdown |
action | { name: 'web', values: { href: '', target: '_blank' } } |
Here are a few examples on how to change these default values.
Countdown Properties
You can change any of the default countdown properties such as labels, language, fonts, timezone, etc.
unlayer.init({
tools: {
timer: {
properties: {
countdown: {
value: {
countdownUrl: `https://cdn.tools.unlayer.com/countdown/countdown.gif`,
endTime: '',
backgroundColor: '#000000',
labelColor: '#FFFFFF',
labelFontFamily: 'Open Sans',
labelFontSize: 28,
digitColor: '#FFFFFF',
digitFontFamily: 'Open Sans',
digitFontSize: 75,
timezone: 'America/Los_Angeles',
locale: null,
showLabels: false
}
}
}
}
}
});
Layout
By default, the layout is set to horizontal but you can change it to vertical.
unlayer.init({
tools: {
timer: {
properties: {
layout: {
value: "vertical"
}
}
}
}
});
Width
By default, countdown GIF image is added with auto width turned on. You can change it.
unlayer.init({
tools: {
timer: {
properties: {
width: {
value: {
autoWidth: false,
width: '50%'
}
}
}
}
}
});
Alternate Text
unlayer.init({
tools: {
timer: {
properties: {
altText: {
value: "Countdown Timer"
}
}
}
}
});
Updated about 2 months ago