> 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/popup-bar-creation.md).

# 创建弹窗/悬浮条的方法

弹窗编辑器里能放哪些元素、每种元素能调什么，这一页逐个说明，每节都配了对应面板的截图。

**整体流程**（新建 → 设时机 → 设页面人群 → 发布 → 看报告）见 [弹窗创建方法](/cn/experience/campaign/create-new-1.md)，这里只讲编辑器本身。

***

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

* 先按 [弹窗创建方法](/cn/experience/campaign/create-new-1.md) 新建一个**弹窗**体验，选模板或“创建空白弹窗或悬浮条”，进入编辑器
* **一个弹窗或悬浮条最多放 1 个表单**
* 图片单张最大 **6M**，支持 JPG / JPEG / PNG / GIF / SVG / WEBP

***

## 编辑弹窗 <a href="#editing-popups" id="editing-popups"></a>

在画布上点一下弹窗本体，上方会浮出弹窗级别的工具条：**位置&大小**、**背景&样式**、🔗（弹窗点击动作）、**⋯**（更多）。

### 位置&大小 <a href="#position-and-size" id="position-and-size"></a>

点“位置&大小”打开**弹窗布局**面板：九宫格选弹窗在屏幕上的落点，下面填宽度、高度。

勾上**阴影**，弹窗弹出时页面背景会压暗；再勾**点击阴影关闭弹框**，访客点弹窗外面就能关掉它。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-a65410dc61a89ee7baa9778c95f5ef7393c2943d%2Fexperience-create-new-1-popup-layout-01.png?alt=media" alt="弹窗布局面板：九宫格位置、宽度高度、阴影"><figcaption></figcaption></figure>

### 背景&样式 <a href="#background-and-style" id="background-and-style"></a>

**弹窗样式**面板里，背景可以选纯色（左边水滴图标）或图片（右边图片图标），再调**圆角弧度**、**阴影**，以及右上角的**关闭按钮**要不要显示。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-4c52dbcf0f260b59efd8a602abb0cfedddb2eaf2%2Fexperience-create-new-1-popup-style-01.png?alt=media" alt="弹窗样式面板：背景、圆角弧度、阴影、关闭按钮"><figcaption></figcaption></figure>

### 弹窗点击动作 <a href="#click-action" id="click-action"></a>

🔗 图标打开**弹窗点击动作**面板，把整个弹窗变成一个可点区域：

* **应用点击动作** — 打开后选动作类型，选项和按钮一样（见下面的[按钮](#button)）
* **追踪点击为事件** — 把这次点击记成一个事件，之后能在[事件监测](/cn/experience/setting/event-tracking.md)里看

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-fe0c385af2973dda6822050307ee7c3ff652419e%2Fexperience-create-new-1-popup-clickaction-01.png?alt=media" alt="弹窗点击动作面板"><figcaption></figcaption></figure>

### 保存至我的模版 <a href="#save-to-my-templates" id="save-to-my-templates"></a>

工具条最右边的 **⋯** 里有**保存至我的模版**，把当前创意存进模版库，下次新建体验时可以直接拿来用。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-6c728f0c86cea392c022943c80ce0fda8b82f661%2Fexperience-create-new-1-popup-savetemplate-01.png?alt=media" alt="更多菜单中的保存至我的模版"><figcaption></figcaption></figure>

### 添加元素 <a href="#add-elements" id="add-elements"></a>

左侧竖条从上到下是 7 类元素：**文本**、**图片**、**视频**、**按钮**、**添加元素**（形状/图标）、**表单**、**倒计时**。点一下就往弹窗里加一个，加完的元素选中后会浮出它自己的工具条。

***

## 文本 <a href="#text" id="text"></a>

点左侧的 **T** 加一个文本元素。选中后工具条是：**编辑**、🔗（点击动作）、复制、图层、删除。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-344f7d2ff09c4e788e7f11fae4f40860e9fb4165%2Fexperience-create-new-1-element-text-toolbar-01.png?alt=media" alt="文本元素与它的工具条"><figcaption></figcaption></figure>

点**编辑**打开**文本样式**面板：字体、字体大小、字重、行间距、对齐方式、字体颜色，下面一排是斜体 / 下划线 / 删除线 / 高亮，再下面是有序列表和无序列表。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-1f71486c09f99f2bb33e78c33e48c54cd6a07b7d%2Fexperience-create-new-1-element-text-01.png?alt=media" alt="文本样式面板"><figcaption></figcaption></figure>

***

## 图像 <a href="#image" id="image"></a>

点图片图标，弹出**上传图片或引用图片链接**：可以把本地文件拖进虚线框，也可以在下面直接填图片 URL。

**可上传格式**：JPG、JPEG、PNG、GIF、SVG、WEBP；**单张最大 6M**。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-10d151c945d1074883538696dc3ab3982fe922f2%2Fexperience-create-new-1-element-image-01.png?alt=media" alt="上传图片或引用图片链接对话框"><figcaption></figcaption></figure>

图片放进去后选中它，可以换图、改样式（不透明度、边框厚度、圆角、阴影）、设点击动作、复制、调图层、裁剪。在“其他设置”里可以填[替代文本（Alt）](/cn/faq/experience-edit/web-accessibility.md#setting-alternative-text-alt)。

***

## 视频 <a href="#video" id="video"></a>

点视频图标加一个视频占位框，再点**编辑**打开**视频编辑**面板。

**选择类型**有两种：

* **YouTube地址** — 直接贴浏览器里的链接或分享链接（例：`https://www.youtube.com/watch?v=-_p7pkxjkiM`）
* **添加Iframe** — 贴各视频平台给的嵌入代码（`<iframe>…</iframe>`），用这个可以放 YouTube 以外的视频

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-2b88f407729c848012c6e00d8da7488cb92610ba%2Fexperience-create-new-1-element-video-01.png?alt=media" alt="视频编辑面板：选择类型、自动播放、循环播放、隐藏视频工具条"><figcaption></figcaption></figure>

### 关于缩略图 <a href="#about-thumbnails" id="about-thumbnails"></a>

编辑器里没有单独设缩略图的地方。用 YouTube 地址时，显示的是你在 YouTube 那边给这个视频设好的缩略图；想换，去 YouTube 改。

### 关于播放设置 <a href="#about-playback-settings" id="about-playback-settings"></a>

面板下半部分三个勾选项：

* **自动播放** — 部分浏览器会拦截自动播放，不保证一定生效
* **循环播放** — 放完自动重头再放
* **隐藏视频工具条** — 藏掉播放进度条那一排控件

再下面是视频的**宽度**和**高度**。

***

## 按钮 <a href="#button" id="button"></a>

点按钮图标加一个按钮。点**编辑**打开**按钮编辑**面板：按钮颜色、轮廓颜色、轮廓厚度、圆角弧度，再往下是字体、字体大小、字重等文字样式。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-5aa30fccc80ee32668b9d316b1bc9d287a95b797%2Fexperience-create-new-1-element-button-01.png?alt=media" alt="按钮编辑面板：按钮颜色、轮廓、圆角弧度、字体"><figcaption></figcaption></figure>

按钮真正干什么，在 🔗（点击动作）里设。打开**应用点击动作**后，**动作类型**可选：

| 动作类型           | 说明               |
| -------------- | ---------------- |
| 打开链接           | 跳到指定 URL         |
| 打开Line官方账号     | 跳到 LINE 官方账号     |
| 拨打电话           | 唤起拨号             |
| 关闭弹窗           | 关掉当前弹窗（新建按钮的默认值） |
| 复制文字           | 把指定文字复制到访客剪贴板    |
| 下载文件           | 下载指定文件           |
| 运行JavaScript代码 | 执行自定义脚本          |

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-097494973e9b1c50c71652444623817f21733c5c%2Fexperience-create-new-1-element-button-action-01.png?alt=media" alt="按钮触发面板的动作类型下拉"><figcaption></figcaption></figure>

选了**打开链接**之后，下面还会出现：

* **链接URL** — 下拉选**绝对链接**或**相对链接**，再填地址。跳本页内某个位置就用相对链接填 `#id`，见[锚点链接的添加方法](/cn/faq/experience-edit/anchor-link.md)
* **在新标签页打开** / **携带参数** / **点击后关闭弹窗** — 三个勾选项

同一个面板里的**追踪点击为事件**打开后，这个按钮的点击会记成事件，可在[事件监测](/cn/experience/setting/event-tracking.md)里查。

***

## 形状和图标 <a href="#shape" id="shape"></a>

左侧的**添加元素**打开素材库，上面两个标签页：

* **形状** — 几何图形、花瓣、心形等，用“全部形状”“全部风格”筛
* **图标** — 按“所有主题”筛的图标集

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-07d915c3a7d726edb4f78303fa01afeb4ff17879%2Fexperience-create-new-1-element-shape-01.png?alt=media" alt="添加元素：形状与图标两个标签页"><figcaption></figcaption></figure>

***

## 表单 <a href="#form" id="form"></a>

**一个弹窗或悬浮条最多只能放 1 个表单。** 点表单图标会先让你**选择要添加的表单**，从预设样式里挑一个。

加进来之后，表单整体和里面每个字段都能单独选中、拖动、改大小和样式。表单级工具条上的 🔗 是**提交后的动作**：默认是**显示成功提示**（提示文案可以改），也能换成跳转等其他动作；**追踪点击为事件**同样可以打开。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-c8e79f83f7174a49c13d9b7c5d93976287e820a2%2Fexperience-create-new-1-form-submit-01.png?alt=media" alt="表单提交后的点击动作设置"><figcaption></figcaption></figure>

表单项怎么加、怎么配，详见 [问卷创建指南\_文本](/cn/experience/campaign/create-new-1/survey-text.md#about-the-form-feature)。

***

## 保存为用户属性 <a href="#collect-as-user-attributes" id="collect-as-user-attributes"></a>

访客在表单里填的内容可以存成用户属性。存了之后，就能拿它圈定体验的投放人群，也能在[用户组](/cn/experience/user-group.md)里看报告。

做法：选中表单里的某个字段 → **编辑** → 在**表单项设置**面板里勾上**保存为用户属性**，下面那格填属性名。

{% hint style="info" %}
同一个面板里还有**必填项**和**不允许重复值**，收集邮箱、手机号这类字段时通常要一起打开。
{% endhint %}

更多细节见 [表单功能](/cn/experience/campaign/create-new-1/survey-text.md#about-the-form-feature)。

***

## 倒计时 <a href="#countdown" id="countdown"></a>

左侧最下面的秒表图标加一个倒计时。**倒计时设置**面板分三段：**基本设置**（倒计时类型选“基于结束日期倒计时”或“固定时间段倒计时”，再填时长和单位）、**倒计时单位**、**倒计时结束后行为**。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-b36bb39cfb86e891fb3de42abc8ee6d57505c6f8%2Fexperience-create-new-1-element-countdown-01.png?alt=media" alt="倒计时设置面板"><figcaption></figcaption></figure>

详见 [倒计时](/cn/experience/campaign/create-new-1/countdown.md)。

***

## 设置显示/停止条件 <a href="#set-display-stop-conditions" id="set-display-stop-conditions"></a>

创意存好后退出编辑器，在体验设置页左侧选**弹窗触发/停止时机**，设三件事：**展示时机**、**停止展示时机**、**展示频率**。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-a26523973e2173aa9cf09a2a28fb7ef2e837ca3f%2Fexperience-create-new-1-popup-timing-01.png?alt=media" alt="弹窗触发/停止时机：展示时机、停止展示时机、展示频率"><figcaption></figcaption></figure>

各项取值和怎么挑，见[显示/停止时间设置](/cn/experience/campaign/create-new-1/display-timing.md)。

***

## Web可访问性合规性 <a href="#web-accessibility-support" id="web-accessibility-support"></a>

在 Ptengine Experience 中设置的所有弹窗和悬浮条都支持键盘输入。更多详情见 [Web无障碍访问支持](/cn/faq/experience-edit/web-accessibility.md)。

***

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

* 编辑器右上角点**预览**，在真实页面上看一眼位置、大小、按钮点下去的反应
* 表单的话，预览里填一遍提交，确认成功提示的文案是你要的
* 确认没问题再**保存**或**保存并设置条件**

***

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

* [弹窗创建方法](/cn/experience/campaign/create-new-1.md) — 从新建到看报告的整体流程
* [创意编辑](/cn/experience/campaign/create-new-1/creative-editing.md)
* [显示/停止时间设置](/cn/experience/campaign/create-new-1/display-timing.md)
* [问卷创建指南\_文本](/cn/experience/campaign/create-new-1/survey-text.md) — 表单的详细用法
* [倒计时](/cn/experience/campaign/create-new-1/countdown.md)
* [Web无障碍访问支持](/cn/faq/experience-edit/web-accessibility.md)