# Countdown Timer

{% tabs %}
{% tab title="Content Tab" %}

## <mark style="color:green;">Configure Timer</mark>

⏰ **Timer Setup**\
Add a timer block and set your countdown details.

**Timer Fields:**

* **End Date & Time** – Select when the countdown will finish.
* **Time Zone** – Choose the correct time zone for accuracy.
* **Action on Completion** – Decide what happens when the timer hits zero (e.g., redirect, show message, or hide element).

🧮 **Display Options**

* **Format:** Choose what units to display (Days, Hours, Minutes, Seconds).
* **Initial State:** Option to hide timer until loaded.
  {% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Customize Appearance</mark>

### 🎨 **Timer Design**

* **Background Color:** Add a background to the timer area.
* **Corner Radius:** Round off the timer edges for smoother visuals.
* **Padding & Spacing:** Adjust internal and external margins.

🏷 **Text & Number Styles**

* **Font Style:** Heading, Label, or Custom size.
* **Color:** Match your app theme.
* **Alignment:** Centered or aligned to the edges.

🎯 **Timer Box Style**

* **Border or Shadow:** Add subtle borders or drop shadows to enhance visibility.
* **Animation:** Enable smooth transitions as numbers change.

### 👁️ **Visibility**

* **Platform:** Android, iOS, or PWA
* **Device:** Mobile / Tablet
* **User Type:** Guest / Logged-in
  {% endtab %}
  {% endtabs %}

### ✅ **Use Case Examples**

* **Flash Sale:** Countdown to the end of an offer.
* **Event Launch:** Show time remaining until an event begins.
* **Feature Unlock:** Display time left until a new update goes live.

## <mark style="color:green;">📱 How It Looks</mark>

Below are example of how the Countdown Timer appears in the app:

> ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FKd1Ry6RpTHCME04S5NmT%2FScreenshot%202025-11-12%20at%2012.27.56%E2%80%AFPM.png?alt=media\&token=fe8e38f2-5e5c-41d8-aa44-090e5a5b24eb)
