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',
        },
      },
    },
  },
});