> 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, and the optional `goal` 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>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.