> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Adding a countdown

A countdown timer is a great tool for letting your visitors know when a promotion or discount is about to end, announcing the time until the launch of a new product, your projects, or services, and more.

The steps in this article will help you learn how to add and configure a countdown timer on your website.

| ${color}[#1aa900](Tip:) The countdown block is also well-suited for use in pop-up windows. Learn more about their functionality in this article: [Adding and customizing a pop-up](/en-us/article/adding-and-customizing-a-pop-up-1q9r53i/).

**Contents**:
* [Adding a Countdown](#1-adding-a-countdown)
* [Configuring a Countdown](#1-configuring-a-countdown)

# Adding a Countdown

①  You can add a ready-made block with this element. See the **Countdown** section when adding a new block.

| ${color}[#1aa900](Tip:) refer to the article [on adding blocks](/en-us/article/adding-blocks-178s0sh/).

② You can also add this element to an existing filled or empty column in one of your blocks. To do this, click the **Add element** icon and select the **Countdown** element from the list of available options:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-zvorotnogo-vidliku-_bywx49.png)
| ${color}[#1aa900](Tip:) You can find this element in the Widget tab when adding an element.

|| ${color}[#ffa800](Note:) As of now, this element is not available for the Flex block.

# Configuring a Countdown

1. To open the countdown element settings, tap the element and click the gear icon that appears at the bottom:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-zvorotnogo-vidliku-_1i5lfpo.png)
2. In the **General** tab, you can:

① change the countdown display type:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-zvorotnogo-vidliku-_z18gg6.png)
② choose the countdown type: **Exact date** or **Period**:

* If you select the **Exact date** countdown type, you can specify the end date and time of the countdown, as well as choose which date components to display: days, hours, minutes, and seconds: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-zvorotnogo-vidliku-_1lvmlif.png)
| ${color}[#1aa900](Tip:) You can also set the end date without opening the countdown settings—click on the element and select the date and time in the line that appears below the element: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-zvorotnogo-vidliku-_s6auo9.png)
* If the **Period** countdown type is selected, you can also choose which date components will be displayed in the countdown and set the desired period—specifically, the number of days, hours, or minutes from which the countdown will start:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-zvorotnogo-vidliku-_1j60d39.png)
Additionally, you can configure when the countdown will start and the action to take after the countdown ends:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-zvorotnogo-vidliku-_xf64r9.png)
|| ${color}[#ffa800](Note:) If the After a client's first visit to the site option is selected, the countdown will start individually for each visitor. 

3. In the **Content** tab, you can rename the countdown labels:

![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-zvorotnogo-vidliku-_1o1dg3.png)
4. [Publish the site](/en-us/article/publishing-a-site-tgxmch/) so that the changes you made are visible to your site’s visitors.