> 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).

# 使用内容编辑器自定义 Widget 与 Microsite

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

#### 集中式品牌控制

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

小组件或微型网站会因用户所处的上下文而显示不同，例如已登录、遇到错误或在移动设备上查看时。我们的编辑器预览可让您轻松在小组件或微型网站的所有可能状态之间切换。

{% 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.