> 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/faq/experience-edit/javascript-popup.md).

# 使用Javascript指定弹窗的显示

弹窗和悬浮条除了按时间、滚动等内置条件触发，还可以**由你自己的 JavaScript 来触发** —— 想让它在什么时刻出现就什么时刻出现。

{% hint style="info" %}
**只有弹窗和悬浮条支持这种方式**，页面编辑不支持。另外，同一次访问内可以多次触发。
{% endhint %}

***

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

* 你得能往页面上加 JavaScript（或者有人能帮你加）
* 每个创意的 ID **各不相同** —— 换版本、换设备都是不同的 ID，别复用

***

## 设置步骤 <a href="#configuration-method" id="configuration-method"></a>

{% stepper %}
{% step %}

### 先把创意做好

按 [弹窗创建方法](/cn/experience/campaign/create-new-1.md) 建好弹窗或悬浮条。
{% endstep %}

{% step %}

### 展示时机选“当访客触发特定代码时显示”

在体验设置页左侧点**弹窗触发/停止时机**，**展示时机**选第三项。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-38be498bd78eca8e8f2f67636d512b4c8e94aed6%2Fexperience-display-timing-01.png?alt=media" alt="展示时机的三个选项，第三项是“当访客触发特定代码时显示”"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### 复制给出的触发代码

形如：

```javascript
ptengine && ptengine.showEngagement('xxxxxxxx');
```

{% hint style="warning" %}
`xxxxxxxx` 是**创意 ID**，不是档案 ID。注意：

* ID **因创意、设备、版本而异** —— 每个都要单独取
* 做 A/B 测试时，**每个版本的代码都要实现**
* PC 和手机分别配了创意时，**每个设备的代码都要实现**
  {% endhint %}
  {% endstep %}

{% step %}

### 把代码放到页面上，在想触发的时刻调用它

{% endstep %}

{% step %}

### 保存并发布体验

{% endstep %}
{% endstepper %}

***

## 实现示例 <a href="#implementation-examples" id="implementation-examples"></a>

**直接写在 HTML 的事件属性里：**

```html
<button id="loginBtn" onclick="ptengine && ptengine.showEngagement('xxxxxxxx')">login</button>
```

**用 JavaScript 绑定事件：**

```javascript
document.getElementById("loginBtn").addEventListener("click", function () {
  ptengine && ptengine.showEngagement('xxxxxxxx');
});
```

{% hint style="info" %}
前面那段 `ptengine &&` 是**防护写法** —— 基础代码还没加载完时 `ptengine` 不存在，直接调用会报错。保留它。
{% endhint %}

***

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

* 用[体验预览](/cn/experience/campaign/preview.md)打开页面，手动触发一次，看弹窗出不出来
* 不出来 → 先在浏览器控制台敲 `ptengine` 看有没有这个对象（没有就是基础代码没装好或还没加载完），再核对创意 ID 有没有抄错
* 还是不行 → [体验无法正常显示](/cn/faq/experience-edit/campaign-not-displaying.md)

***

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

* [弹窗创建方法](/cn/experience/campaign/create-new-1.md)
* [显示/停止时间设置](/cn/experience/campaign/create-new-1/display-timing.md) — 其他几种触发方式
* [体验预览](/cn/experience/campaign/preview.md)
* [体验无法正常显示](/cn/faq/experience-edit/campaign-not-displaying.md)