> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/cn/experience/campaign/create-new-1/countdown.md).

# 倒计时功能

在弹窗或悬浮条里放一个倒计时，把"还剩多久结束"直接摆在用户眼前，用紧迫感推一把转化。

***

## 开始之前 <a href="#before-you-start" id="before-you-start"></a>

* 倒计时是弹窗 / 悬浮条里的一种**元素**，得先有一个弹窗体验 → [弹窗创建方法](/cn/experience/campaign/create-new-1.md)
* **倒计时的日期时间按访问者的时区显示** —— 面向多个国家投放时，各地看到的剩余时间会不同
* 结束之后是继续显示还是自动关掉，是两种完全不同的用法，设之前先想清楚

***

### **主要应用场景 🕒** <a href="#key-use-cases" id="key-use-cases"></a>

#### 1. 电商网站活动 🛍️ <a href="#id-1.-campaigns-on-e-commerce-sites" id="id-1.-campaigns-on-e-commerce-sites"></a>

**场景**：限时优惠券分发或折扣销售

**显示方式**：以弹窗/浮动条形式显示距活动结束的剩余时间倒计时

#### 2. 会员网站注册活动 📝 <a href="#id-2.-registration-events-on-membership-sites" id="id-2.-registration-events-on-membership-sites"></a>

**场景**：期间限定免费会员注册活动

**显示方式**：以弹窗/浮动条形式显示距活动结束的剩余天数倒计时

#### 3. 限定商品销售 🏷️ <a href="#id-3.-sales-of-limited-products" id="id-3.-sales-of-limited-products"></a>

**场景**：数量有限商品的销售

**显示方式**：以弹窗/浮动条形式显示距销售结束的时间和剩余数量倒计时

## **倒计时功能设置指南 ⏳** <a href="#countdown-feature-setup-guide" id="countdown-feature-setup-guide"></a>

### 1. 创建弹窗体验并添加倒计时 <a href="#id-1.-create-a-web-customer-experience-and-add-a-countdown" id="id-1.-create-a-web-customer-experience-and-add-a-countdown"></a>

### 2. 显示设置 🔢 <a href="#id-2.-display-settings" id="id-2.-display-settings"></a>

#### 倒计时时间的显示单位 <a href="#countdown-time-display-unit" id="countdown-time-display-unit"></a>

可从日、小时、分钟、秒中选择

根据目的选择合适的单位

#### 标签自定义 <a href="#label-customization" id="label-customization"></a>

可自由定义各单位（日、小时、分钟、秒）的标签文本

例：“Days” → “日间”, “Hours” → “小时”

💡 提示：根据目标人群使用相应的语言和表达。

**注意**：倒计时中指定的日期和时间会反映访问者的时区。

### 3. 结束后的行为设置 🔄 <a href="#id-3.-behavior-after-countdown-ends" id="id-3.-behavior-after-countdown-ends"></a>

“保持显示”：倒计时结束后继续显示

“关闭”：倒计时结束后自动隐藏

✅ 用例：

“保持显示” → 事件结束后显示消息

“关闭” → 限时优惠的结束

### 3. 倒计时样式编辑 🎨 <a href="#id-3.-edit-countdown-style" id="id-3.-edit-countdown-style"></a>

#### 可调整的元素： <a href="#adjustable-elements" id="adjustable-elements"></a>

数字背景色

圆角程度

数字、标签和冒号的颜色

字体和字体大小

#### 显示位置和大小 <a href="#display-position-and-size" id="display-position-and-size"></a>

可通过拖拽自由调整

🔧 最佳实践：选择与品牌颜色和现有设计相协调的样式

### 设置后的确认 👁️ <a href="#confirmation-after-setup" id="confirmation-after-setup"></a>

设置完成后，必须使用预览功能确认以下内容：

是否显示了正确的时间单位

自定义标签是否正确反映

样式是否与品牌形象相符

不同设备上的显示是否合适

***

## 做完之后怎么确认 <a href="#verify" id="verify"></a>

用[体验预览](/cn/experience/campaign/preview.md)在 PC 和手机上各看一次，逐条对：

* 时间单位是不是你要的（日 / 小时 / 分 / 秒）
* 自定义标签文字有没有正确显示
* 样式和品牌调性搭不搭
* 两种设备上排版都正常

***

## 相关页面 <a href="#related-pages" id="related-pages"></a>

* [弹窗创建方法](/cn/experience/campaign/create-new-1.md)
* [创建弹窗/悬浮条的方法](/cn/experience/campaign/create-new-1/popup-bar-creation.md)
* [显示/停止时间设置](/cn/experience/campaign/create-new-1/display-timing.md)
* [体验预览](/cn/experience/campaign/preview.md)