> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md).

# 使用内容编辑器自定义小组件和微站

内容编辑器让您能够创建与您的品牌形象无缝匹配的小组件和微站，确保为客户提供一致且可信赖的体验。一个品牌化良好的触点对于提高参与度和项目采用率至关重要。

#### 集中式品牌控制

您可以使用小组件或微站样式选项轻松查找并更新品牌的核心设计元素。所有品牌设置都位于专门的品牌区域中。

小组件或微站会根据用户的上下文而呈现不同的外观，例如用户是否已登录、是否遇到错误，或是否在移动设备上查看。我们的编辑器预览可让您轻松在小组件或微站的所有可能状态之间切换。

{% hint style="info" %}
**注意**：该预览更适用于小组件（例如即时访问小组件）和组件（例如现金、奖励兑换）。要预览微站，您需要导航到不同的微站页面来查看这些状态。
{% endhint %}

这消除了为查看组件外观而手动完成操作的需要。现在，您可以自信地编辑用户旅程每一步的文本和设计，包括：

* 已登录与未登录视图
* 错误和成功消息
* 多步骤流程中的不同步骤（例如现金提现验证）

要自定义您的品牌样式：

1. 在左侧导航菜单中，选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容**.
   * 对于小组件，请选择 **编辑小组件** 对于微站，请选择 **编辑内容**.
2. 在左侧菜单中，选择您要在微站还是小组件上进行编辑。
3. 选择您要编辑的页面模板，然后选择 **小组件样式**/**微站样式**.
4. 选择您的品牌颜色，以更改小组件或微站中的主色。
5. 接下来，选择您想使用的字体样式。
6. **\[可选]** 继续完成其余样式选项，以在小组件或微站中全面自定义您的品牌形象。

   <div data-with-frame="true"><figure><img src="/files/babe790e6d2b5ced435fe7076c1ae2c432cf5200" alt="" width="563"><figcaption></figcaption></figure></div>

<details>

<summary>样式编辑器元素参考</summary>

| 样式元素  | 描述                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 主品牌颜色 | <p>此颜色将用于小组件或微站中的不同元素，因此完成此步骤非常重要。请选择您的主品牌颜色。</p><p>此颜色也用于编辑选项下方的“主按钮”和“次按钮”部分。</p><p><img src="/files/416f0f4756e9888ad06e6bb6edd55b6e46cebf0b" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                              |
| 字体    | <p>选择您希望在小组件或微站中使用的字体样式。</p><p><img src="/files/fc4ffb8d274ddd96e540f47433b7559d376e9375" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| 颜色    | <p>选择您希望在小组件或微站中呈现的各种颜色和强调色：</p><p>• <strong>背景</strong></p><p>选择您希望小组件或微站背景使用的颜色。</p><p>• <strong>文本</strong></p><p>您可以更改小组件或微站中主要文本以及次要文本的字体颜色。</p><p>• <strong>强调色</strong></p><p>更改您的强调元素颜色。这些包括小组件或微站中的标签页或图标等元素。</p><p><img src="/files/b2fbbda597c6bb4551307dfcbae0d902b8ea58d4" alt="" data-size="original"></p><p>• <strong>附加颜色</strong> <img src="/files/9ee7bd3c79aae4d0667377d18611647c3469f8d1" alt=""></p><p>您可以根据小组件或微站类型，进一步调整每个元素的颜色和强调样式。</p><p><img src="/files/ecff9bcf01f86dcdffe9a0b211dae2ca06d1b42b" alt="" data-size="original"></p> |
| 主按钮   | <p>选择您希望主按钮使用的配色方案。您还可以调整按钮圆角的像素值。</p><p><img src="/files/a59e78adca95cea0884e37a365b22c35919a8b56" alt="" data-size="original"></p><p>展开 <img src="/files/9ee7bd3c79aae4d0667377d18611647c3469f8d1" alt=""> <strong>悬停状态</strong> 部分，以进一步选择或更改当用户将鼠标悬停在按钮上或与按钮交互后按钮变为的颜色。</p><p><img src="/files/cc4e76c4a8a7a2c0c2ea9b6eca2c211fb3ab4dca" alt="" data-size="original"></p>                                                                                                                                                                                   |
| 次按钮   | <p>选择您希望次按钮使用的配色方案。您还可以调整按钮圆角的像素值。</p><p><img src="/files/3e01ed024afb43c10e3ba07ab397dfc93df43750" alt="" data-size="original"></p><p>展开 <img src="/files/9ee7bd3c79aae4d0667377d18611647c3469f8d1" alt=""> <strong>悬停状态</strong> 部分，以进一步选择或更改当用户将鼠标悬停在按钮上或与按钮交互后按钮变为的颜色。</p><p><img src="/files/1435e72c8efaae2acd70614e8230032a16038185" alt="" data-size="original"></p>                                                                                                                                                                                   |
| 边框    | <p>更改小组件或微站中组件（如表格或卡片）的颜色和边框轮廓。</p><p>• <strong>颜色</strong></p><p>选择边框的颜色。</p><p>• <strong>粗细</strong></p><p>输入以像素为单位的值以确定边框粗细。</p><p>• <strong>边框半径</strong></p><p>输入以像素为单位的值以确定边框圆角半径。</p><p><img src="/files/dd9c52908f714f150367fd13bef605ec563556d1" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                     |
| 表单字段  | <p>选择您希望在小组件或微站中的各个表单字段使用的颜色。这些包括用户填写的任何输入字段。您还可以输入以像素为单位的值来更改圆角大小。</p><p><img src="/files/69ca6d05b22341d36e7e69394f1d082c9cc93341" alt="" data-size="original"></p><p>展开 <img src="/files/9ee7bd3c79aae4d0667377d18611647c3469f8d1" alt=""> <strong>高级选项</strong> 部分，以进一步自定义表单字段的选中状态或悬停状态的颜色。</p><p><img src="/files/079f189b8d5c4cc30431bbcf514a6eec8a652688" alt="" data-size="original"></p>                                                                                                                                                             |
| 小组件大小 | <p>更改模板中小组件的大小。您可以调整嵌入式和弹出式小组件的尺寸。选择最小和最大尺寸，并从下拉选项中选择单位类型。可选择按像素或按百分比设置测量值。</p><p><img src="/files/5c7b9ec6b785e1bf1a8ba6ee52256aebb2eb4111" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                  |

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.impact.com/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.