> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 使用 HTML 设计应用内消息
> 使用 OneSignal 的 HTML 编辑器设计和自定义应用内消息，实现最大的灵活性、响应式设计和品牌化效果。
## 概述
OneSignal 提供两种应用内消息编辑器：
* [拖放编辑器](./design-your-in-app-message) GUI 适合非技术创作者
* HTML 编辑器适合希望对布局、行为和响应式设计进行像素级精确控制的开发人员。
**HTML 编辑器的功能：**
* **布局：** 构建复杂的响应式布局（例如，并排的 CTA 按钮）。
* **表单：** 内联收集输入信息（邮箱、反馈、调查）。
* **字体和品牌：** 使用自定义网络字体和 CSS 变量。
* **JS 操作：** 跟踪点击、标记用户、发送结果等。
### 需求
* **iOS：** 3.9.0+
* **Android：** 4.6.3+
* 如果您的应用使用较旧的 SDK，应用内消息将以中心模态布局进行渲染。
***
## 创建和预览 HTML 应用内消息
转到**消息 > 新建应用内消息**来创建、编辑、测试、暂停、复制或删除您的应用内消息。
使用预建模板快速开始。
使用我们的 JavaScript 库跟踪交互和触发应用内行为。
在左侧输入您的 HTML 代码并实时预览。使用**发送测试应用内消息**来测试响应式设计和效果。
### 添加可跟踪标签
在交互元素上添加 `data-onesignal-unique-label`，以便跟踪和处理点击。
```html theme={null}
```
### 使用 JavaScript 绑定点击操作
```js theme={null}
// Tag the user when they click a button
document.querySelector(".tag-user").onclick = (e) => {
OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
```
在[应用内 JS 库文档](./in-app-message-api)中了解更多。
### 资源支持
资源在渲染时从您提供的 URL 加载。
```html theme={null}
```
### 个性化
使用 [Liquid 语法](./using-liquid-syntax)动态插入用户数据值：
```html theme={null}
Hi there {{ name | default: 'you' }}!
```
**支持的上下文：**
* 元素内的文本，如 `div`、`p`、`li`
* `