GuidesChangelogAPI ReferenceExamplesStatus
Guides

Timer

Suggest Edits

🚧

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.

PropertyDefault 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%' }
textAligncenter
altTextCountdown
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 1 month ago