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

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

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

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FMsFCqNf5XpWg6l0OY9UU%2Fadv-150-5_1.mp4?alt=media&token=ee8653ae-d8ef-4519-a1f7-6b5ec0bc4214>" %}

## 集中式品牌控制

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

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

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

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

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

要自定义您的品牌样式：

1. 在左侧导航菜单中，选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → 内容**.
   * 对于小组件，选择 **编辑小组件** 对于微站，选择 **编辑内容**.
2. 在左侧菜单中，选择您要编辑的是微站还是小组件。
3. 选择您要编辑的页面模板，然后选择 **小组件样式**/**微站样式**.
4. 选择您的品牌颜色，以更改小组件或微站中显示的主色。
5. 接下来，选择您想使用的字体样式。
6. **\[可选]** 继续完成其余样式选项，以在小组件或微站中全面自定义您的品牌形象。

<div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FTr3NiEK9I3MXi3u7YWmh%2Fdownload.gif?alt=media&amp;token=6af5544b-ff9a-4201-a363-f13f2b53b099" alt="" width="563"><figcaption></figcaption></figure></div>

<details>

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

| 样式元素  | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 品牌主色  | <p>此颜色将用于您的小组件或微站中的不同元素，因此完成此步骤非常重要。请选择您的品牌主色。</p><p>此颜色还会用于编辑选项下方的“主按钮”和“次按钮”部分。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e6c8a0d69bf06ad5a2df6c27d1f09ae0ee432e90%2Fb55c15456cdbd904a6ff8a44d426f93a32958279e057958310f6d52bf4970a4f.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| 字体    | <p>选择您希望在小组件或微站中显示的字体样式。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ec18fd738390db60d7a39412866bb3698259b14f%2Fcc6e451c17e08331fb9d41c74d5d87453a9ae21e79ea9850f91bab20b49a716a.jpg?alt=media" 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="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-55be9fef526da2d5ca0fb54102ef83ad55d03e4b%2F81b48cb986ad1a94cbefaf856b0debab102bb11279d654f5e91caf10764718de.jpg?alt=media" alt="" data-size="original"></p><p>• <strong>其他颜色</strong> <img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""></p><p>您还可以根据小组件或微站类型，进一步调整各元素的颜色和点缀。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0bece59f882d11a013783997bb2518dd4777f23c%2F2f4b167c662fe81c1de11e269d7bac69cc0422c2043a2087d21ace33273bee7c.jpg?alt=media" alt="" data-size="original"></p> |
| 主按钮   | <p>选择您希望主按钮使用的配色方案。您还可以调整按钮圆角的像素值。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c761dd03be42d0d41dc16f7a120c4fc2fdc433ac%2Fde0edb9123b43b0ce3a5e5c921ef75bb4f85d62426483bf97e46aacb7becd728.jpg?alt=media" alt="" data-size="original"></p><p>展开 <img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>悬停状态</strong> 部分，以进一步选择或更改当用户悬停在按钮上或与按钮交互后按钮变为的颜色。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aa31df8e922e6a978fbe88542452bbbaf929c848%2Ff99838a5337db16b96652353e550fdeb7df6532461e4b0e324d579065c4bc4d7.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                               |
| 次按钮   | <p>选择您希望次按钮使用的配色方案。您还可以调整按钮圆角的像素值。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aba04be238a4411ef008e443e94dc3f15b0b2923%2Fce809941b33f15de27de52cf21ed8d5cf5b4e36991d8fef0b0d70f72f3b8c9ab.jpg?alt=media" alt="" data-size="original"></p><p>展开 <img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>悬停状态</strong> 部分，以进一步选择或更改当用户悬停在按钮上或与按钮交互后按钮变为的颜色。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-561ddad6d0fa2db588ba4837bd6cce5275c02b3d%2Fb20584dcfe328bb0cc164b094945aa4bf2c8fb5fe0fb809c83073204fd43798f.jpg?alt=media" 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="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ad49b6545fa9d0ffa189127095f15ad904d62b26%2F87161ed257680c7779e29077bc360366c09ef62774fb3917cdc33621b85aa064.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| 表单字段  | <p>选择您希望小组件或微站中各种表单字段使用的颜色。这些包括用户填写的任何输入字段。您还可以输入以像素为单位的数值来更改圆角大小。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7ca9a1cbe9bd4d20e58a6a912c70e6b68d69832e%2Fd56db5a066f633dcafa399ca40df9b9a36cb6b8dc116695eedc872746af2a5b4.jpg?alt=media" alt="" data-size="original"></p><p>展开 <img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>高级选项</strong> 部分，以进一步自定义表单字段的选中状态或悬停状态颜色。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1316f14f290be578906e018e061c38320ba9daac%2F1c704526ce54eccb73066cd4a924cc7b59fdb9bfb8842b648b385ea28923ea0e.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                        |
| 小组件尺寸 | <p>更改模板中小组件的大小。您可以调整嵌入式和弹出式小组件的尺寸。请选择最小值和最大值，并在下拉选项中选择单位。可选择按像素或按百分比设置尺寸。</p><p><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b4d9c97d0dafbbc79cd2782a413fc8eaad21e8d3%2F7109281d478bf7f826b153d935ff7b87f62a1a80c7d6b23aac6d47752c8ae4cb.jpg?alt=media" 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.