GuidesChangelogAPI ReferenceExamplesStatus

Timer

Suggest Edits

🚧

Premium Tool

This tool is only available as an add-on in premium plans.

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 almost 4 years ago