> For the complete documentation index, see [llms.txt](https://userflux.gitbook.io/userflux-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://userflux.gitbook.io/userflux-docs/feature-guides/user-journeys/email-builder/timers.md).

# Timers

Countdown timers are a powerful tool to create urgency and encourage immediate action from your email recipients. This guide explains how to add and configure a dynamic countdown timer.

### Adding a Timer Element

1. **Access the Content Tab:** Ensure the **Content** tab is selected in the right-hand sidebar.
2. **Drag and Drop:**

   * Locate the "Timer" element (often represented by a clock icon) in the sidebar.
   * Click and drag the "Timer" element onto your email canvas, placing it within a column or content area.

   Upon dropping, a placeholder timer (often showing default numbers or a static image) will appear on the canvas. Its specific properties will load in the right-hand sidebar under the "Content" tab, usually labelled "Countdown."

<figure><img src="/files/XvU2fDX4rrL7yqhvlJKb" alt=""><figcaption></figcaption></figure>

### Configuring the Countdown Timer

With the timer element selected, use the options in the right-hand sidebar to set its end point and customize its appearance.

#### Countdown Settings

* **End Time:** This is the most critical setting.
  * **Date:** Click the date field to open a calendar and select the date when the countdown should end (e.g., July 18, 2025).
  * **Time:** Click the time field to open a time selector (or type directly) and set the exact time the countdown should end (e.g., 3:15 PM).
* **Timezone:** Select the appropriate timezone for the end time from the dropdown list (e.g., "America/Los\_Angeles", changed to "America/Lima"). This ensures the countdown is accurate for all recipients regardless of their location relative to the event's timezone.
* **Language:** Choose the language for the labels (Days, Hours, Minutes, Seconds) from the dropdown (e.g., "English"). This allows you to localise the timer display.
* **Labels (Show/Hide):**
  * Toggle the "Labels" switch on or off.
  * **On:** Displays labels like "Days," "Hours," "Minutes," "Seconds" below the corresponding numbers.&#x20;
  * **Off:** Hides these textual labels, showing only the numbers. (

<div align="left"><figure><img src="/files/wMPc99spTCfOzQJ95OhA" alt="" width="346"><figcaption></figcaption></figure></div>

#### Styling the Timer

Customise the visual appearance of the timer components.

* **Background Colour:** Select a background colour for the entire timer block using the colour picker.
* **Digits Colour:** Select the colour for the numbers (digits) of the countdown using the colour picker (e.g., a bright red `#FF0000` ).
* **Labels Colour:** Select the colour for the text labels (Days, Hours, etc.) using the color picker (e.g., a bright blue `#0000EE` selected).
* **Digits Font:** Select a font family for the numbers from the dropdown (e.g., "Open Sans" changed to "Comic Sans MS").
* **Digits Font Size:** Adjust the size of the numbers in pixels (e.g., `40px` changed to `44px`).
* **Labels Font:** Select a font family for the text labels from the dropdown (e.g., "Open Sans" changed to "Courier New").
* **Labels Font Size:** Adjust the size of the text labels in pixels (e.g., `16px` changed to `27px`).

<div align="left"><figure><img src="/files/CGf3kiDSMTA2zwYR9aU8" alt="" width="343"><figcaption></figcaption></figure></div>

#### Image Settings (Fallback/Underlying Image)

* **Width:**
  * **Auto On:** The timer image width adjusts automatically.
  * **Auto Off:** Allows manual control of the width using a slider.
* **Align:** Align the timer image (Left, Center, Right) within its container.
* **Alternate Text:** Provide descriptive alt text for the timer image (e.g., "Countdown timer for sale," "SALE ENDS"). This is crucial for accessibility.

#### Action (When Timer is Clicked - Optional)

You can make the entire timer image clickable.

* **Image Link:** Choose an action type from the dropdown (e.g., `Open Website, Send Email, Dial a Phone`).
* **URL / Target:** If linking to a website, provide the URL and specify the target (`New Tab` or `Same Tab`).

<div align="left"><figure><img src="/files/EmlHNZE7IZej4wAtlwBb" alt="" width="343"><figcaption></figcaption></figure></div>

#### General (Container Padding)

Controls padding around the entire timer block.

* **Container Padding:**
  * **All Sides:** Set equal padding (e.g., `10px`).
  * **More Options:** For individual side padding.

<div align="left"><figure><img src="/files/kaV3BM1PzYD0YqK5MJVP" alt="" width="342"><figcaption></figcaption></figure></div>

#### Responsive Design

Manage visibility on different devices.

* **Hide on Desktop:** Hide the timer on desktop views.

<div align="left"><figure><img src="/files/lLTNY2G8fmrLLwC4RXIO" alt="" width="338"><figcaption></figcaption></figure></div>