# 富媒体模板语法 ## 模板结构模板就是一个 .zip 压缩包，其中可以包含 HTML、JavaScript、CSS 和图像等富媒体资源。压缩包的根目录中必须包含一个 **index.html** 文件。 ## 模板占位符您可以在富媒体模板中使用占位符，以便更改和本地化富媒体内容中的值。占位符必须遵循以下格式： ```liquid {{ Placeholder name | Type | Default value }}` ``` 其中： * **Placeholder name** — 占位符的名称，将显示在富媒体编辑器中。 * **Type** — 占位符的类型。类型可以是以下任何值： * **color** — 颜色输入 * **text** — 文本输入 * **html** — 文本区域（多行文本） * **Default value** — 默认值，如果在编辑器中未提供值，则使用该值。如果未设置，则使用 **Placeholder name** 作为默认值。示例： ```liquid {{Header text|text|Tell Us What You Think}}` ``` ## 添加 Pushwoosh.json 您可以对占位符进行分组，以便它们在富媒体编辑器中链接在一起：富媒体编辑器界面，显示分组的占位符在输入组中链接在一起

要实现这一点，请将 **pushwoosh.json** 文件添加到您的富媒体模板压缩包中，与 **index.html** 文件放在一起。该文件的结构非常简单，应该是不言自明的： ``` { "input_groups": [ ["Logo image URL", "Logo background color"], ["Topic text", "Topic text color", "Topic background color", "Sub-topic text"], ["Main text", "Text background color"], ["Button text", "Button URL", "Button text color", "Button background color"] ] } ``` ## 示例用于调查的自定义表单是自定义富媒体模板的常见用例。这些表单可让您收集宝贵的用户反馈。默认模板中提供了一个带有自定义调查表单的预设计模板。您可以以此为起点创建自己的调查。自定义调查表单模板示例，带有用于收集用户反馈的输入字段

创建表单时，请[遵循一些最佳实践](#best-practices-for-custom-elements-in-rich-media)，以确保在富媒体编辑器中的兼容性和无缝功能。以下是控制面板中可用的默认模板之一的另一个示例。 ```txt

``` ## 监控自定义富媒体的性能您还可以监控您创建并作为 ZIP 文件上传到 Pushwoosh 的自定义富媒体内容的性能。您可以通过以下方式跟踪人们与您的富媒体的互动： * 按钮点击 * 链接点击 * 表单提交要使 Pushwoosh 能够跟踪这些互动： 1. 为您希望跟踪的每个元素添加一个 “id” 属性。例如： **要跟踪链接点击：** ```html … ``` **要跟踪表单提交：** ```html ``` **要跟踪按钮点击：** ```html // type="button" 是必需的 ``` 2. 在标签的末尾添加一个指向 CDN 中 JavaScript 文件的链接： ```html ``` ## 富媒体中自定义元素的最佳实践 ### 谨慎管理 CSS 样式确保您的 CSS 样式是特定的，以避免与富媒体编辑器样式冲突。使用低特异性样式，例如应用于标签名称或通用类名的样式，可能会影响富媒体编辑器的外观。最好将您的样式保持在局部范围内——将您的内容包装在一个具有唯一 ID 或类的容器中，并在您的 CSS 选择器中为子元素使用此标识符。 ### 包含外部库您可以集成 CSS 或 JavaScript 库（例如 Font Awesome、Bootstrap、Tailwind CSS 等），以利用它们的方法、图标、字体、动画等。

{{Topic text|text|TOPIC TEXT}}