Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

🚧

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.

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 3 months ago


Timer


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.