--- title: "How to Create and Embed a Countdown Timer" slug: "how-to-create-and-embed-a-countdown-timer" description: "Create urgency with Countdown Timers in ClickFunnels. Learn to embed them in emails and pages for real-time updates and increased audience engagement." updated: 2025-07-14T13:03:52Z published: 2025-07-14T13:03:52Z canonical: "support.myclickfunnels.com/how-to-create-and-embed-a-countdown-timer" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # How to Create and Embed a Countdown Timer **Countdown Timers** in ClickFunnels allow you to create a sense of urgency and encourage your audience to take immediate action. This documentation will guide you through creating and embedding a Countdown Timer in your email campaigns. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-RRNGA7X3.png) --- ## Requirements - ClickFunnels [Scale, Optimize or Dominate plan](/v1/docs/clickfunnels-pricing) - [The Countdown Funnels app added to your workspace](/v1/docs/adding-apps-to-your-clickfunnels-workspace) --- ## Overview of Countdown Timers Countdown Timers are customizable elements that display a live countdown to a specific date or time. They can be used to count down to events, deadlines, or any key moments relevant to your campaigns. You can use Countdown Timers on funnel pages or in emails to provide real-time updates, ensuring that your audience always sees the remaining time until an important milestone. --- ## Creating a New Countdown Timer 1. Navigate to **Apps** on the left-hand menu and select **Countdown Funnels**. 2. Under the Countdown Funnels menu, click **Countdown Timers**. 3. Click the **Create Countdown Timer** button in the top-right corner. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-GTFGCIC4.png) 4. After creating the event, adjust its settings, such as event type and details. For a detailed explanation, refer to the [Setting Up the Countdown Event](/v1/docs/how-to-create-and-embed-a-countdown-timer#setting-up-the-countdown-timer) section. --- ## Setting Up the Countdown Timer #### Name Provide a unique name for your Countdown Timer so you can easily identify it later. #### Enabled Toggle this option to enable or disable the timer. When disabled, the timer will not appear in your funnel or emails. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-VUCON7H3.png) ### General Use this section to configure the core appearance of your timer: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-I3RCZZW8.png) - Adjust the **Counter Font Size** and **Font Color** to customize the timer's appearance. - Enable or disable **Leading Zeros** (e.g., show "03" vs "3"). ### Labels This section helps you adjust the visibility and styling of time labels: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-R4VLYIE6.png) - Show or hide labels for **Days**, **Hours**, **Minutes**, and **Seconds**. - Customize the **Font Size** and **Label Color**. - Optionally, define custom labels for each time unit (e.g., "Days" or "Hours"). #### Background Customize the timer's background for better visual alignment with your page design: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-5H8SI5OP.png) - Set the **Background Color** and **Matte Color**. - Upload a **Background Image** if desired. - Adjust the **Corner Radius** to round the timer's edges. #### Expiration Use this section to control what happens when the timer reaches zero: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-AUWGHAJJ.png) - Select an **Expire Mode** to either show zeros, hide the timer, or display a message. - Add a custom **Expire Message** to display when the countdown ends. #### Preview The Preview panel provides a live view of how your timer will appear both during the countdown and after expiration. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-DS84AED2.png) #### Embed Code Generate the HTML code for embedding your timer: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-66XSZEGI.png) - **Event Emails**: This option synchronizes the timer with a countdown event for email workflows. - **Fixed DateTime**: Use this option to set a specific expiration date and time for embedding on pages. Once you have completed setting up the timer, click **Create Countdown Timer** to save your changes. --- ## Embedding A Countdown Timer Once your timer is created, you can embed it in emails or on pages. #### Email Embedding The **Event Email Embed Code** allows you to include a live countdown timer in your emails. This feature ensures that registrants see a real-time countdown to the event start time, helping them stay informed and prepared for the event. When contacts are triggered through a workflow based on event registration, the countdown timer dynamically adjusts to display the remaining time for the event. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-63VBDSEL.png) **To set up the email embedding:** 1. **Create a Funnel**: Ensure your funnel includes a page with a Calendar Event attached. Learn more about attaching a countdown calendar event in a funnel step in our article [How to Add a Countdown Calendar Event in a Funnel Step](/v1/docs/how-to-manage-events-in-a-funnel-step). 2. **Set Up a Workflow**: Create a workflow that triggers with the event "Calendar Event - Contact Registered." Learn more about workflow triggers in the article [How to Manage Workflow Triggers](/v1/docs/how-to-manage-workflow-triggers). ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(970).png) 3. **Select the Funnel**: Choose the funnel where the contact registers for the event. 4. **Edit the Email**: Open the email editor within the workflow. 5. **Insert the HTML Element**: Drag and drop an HTML block into the email editor. 6. **Paste the Embed Code**: Copy the embed code from the Countdown Event settings and paste it into the HTML editor. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(969).png) 7. **Save and Publish**: Save the email and publish the workflow. When the email is sent, the **Event Embed Code** will automatically display the remaining time until the event. This approach ensures a personalized and accurate countdown for each recipient, increasing the likelihood of action. > [!NOTE] > **Note:** > > The Event Email Embed Code will only work when emails are sent via a workflow using the "[**Send Email**](/v1/docs/workflows-send-email-step-automate-your-email-campaigns)" step and triggered by the event "**Calendar Event - Contact Registered**." It will not work with Broadcast emails or emails sent outside of ClickFunnels. #### Embedding on Pages 1. Go to the **Embed Code** section in the Timer editor. 2. Select **Fixed Datetime** to set a specific expiration date and time for the timer. This option allows the timer to be displayed on your page. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-259U6CW7.png) 3. Copy the provided HTML code snippet. 4. Navigate to your page editor and open the desired page. 5. Add an **HTML/Custom JS Element** to your page. 6. Paste the embed code into the editor. Edit the text `?end=2025-01-25 20:56"` in the embed code to adjust the countdown date and time. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-CIPOXGVL.png) 7. Save and preview your page to verify the timer is displaying correctly. You can learn more about embedding code in the page editor in the article [Embedding Third Party Embed Code](/v1/docs/embedding-third-party-embed-code). > [!NOTE] > **Note:** > > ClickFunnels includes the **Countdown** element feature in the page editor, allowing you to showcase a countdown to a particular date. You can use the Countdown element in the page editor instead of the Countdown Timer feature. For more details about the Countdown element, please check the article [Countdown: Display a Countdown Timer on Your Page](/v1/docs/countdown-display-a-countdown-timer-on-your-page). --- ## Editing an Existing Countdown Timer 1. Navigate to the **Countdown Timers** menu in the **Countdown Funnels** app. 2. Locate the timer you want to edit and click the **Gear** ⚙️ icon.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-JVCEMO3P.png) 3. Make the necessary changes to the timer details. 4. Click **Update Countdown Timer** to save your changes. --- ## Deleting a Countdown Timer 1. Navigate to the **Countdown Timers** menu in the **Countdown Funnels** app. 2. Locate the timer you want to delete and click the **Trash**🗑️ icon. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-9PN54B72.png) 3. Confirm the deletion in the pop-up dialog. > [!CAUTION] > **Warning:** > > Deleting a Countdown Timer is an permanent action and **cannot be undone**. Please ensure that you are removing the correct timer that is no longer required. ## Related - [Countdown: Display a Countdown Timer on Your Page](/countdown-display-a-countdown-timer-on-your-page.md) - [How to Create and Manage Countdown Events](/how-to-create-and-manage-countdown-events.md) - [Adding a Countdown Calendar Event in a Funnel Step](/adding-a-countdown-calendar-event-in-a-funnel-step.md) - ['Calendar Event Delay' Step - Delay Actions Based on Calendar Events](/calendar-event-delay-step-delay-actions-based-on-calendar-events.md)