> 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/widget-experiences/customize-program-widgets.md).

# 自定义项目小组件

#### 访问小组件编辑器

1. 在左侧导航菜单中，选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容**.
2. 在 *小组件* 卡片中，选择 **编辑小组件。**
3. 在左侧滑出菜单中，选择你想要编辑的小组件名称。

   <div data-with-frame="true"><figure><img src="/files/5cfc6ab035a66a10b01513e73b09f90619c79f32" alt="" width="347"><figcaption></figcaption></figure></div>

#### 自定义你的小组件

{% stepper %}
{% step %}
**第 1 步：选择模板**

1. 在左侧滑出菜单中，在 *当前小组件*下，选择 **模板**.
2. 选择 **应用模板** ，位于你想要开始使用的模板旁边。

   <div data-with-frame="true"><figure><img src="/files/852a38eb7add60ad2d11318d8b21c6c3d96a1f40" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**注意：** 如果你想在确认更改之前预览模板的外观，请选择 ![](/files/e0f08c784d874503337007c4f391feb2cc3590a0) **\[预览]** ，然后再保存。只有在你准备好提交所做更改时，才选择 **保存** 按钮。
{% endhint %}
{% endstep %}

{% step %}
**第 2 步：调整小组件内容**

你可以添加、编辑、移动或移除组件，以修改客户倡导者在小组件中看到的内容。

{% hint style="success" %}
**注意：** 有关小组件编辑器各个元素的说明，请参阅 [小组件编辑器概览](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
{% endhint %}

{% tabs %}
{% tab title="添加" %}

1. 在页面右侧，位于 *组件* 菜单的 **添加** 选项卡中，选择一个组件组。
   * 了解更多关于 [可用组件](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) 及其分组方式的信息。
2. 选择合适的组件。
3. 选择蓝色的 **添加到** 按钮，将组件放到画布上你想要的位置。

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

{% endtab %}

{% tab title="编辑" %}
你可以编辑的属性取决于你选择的组件类型。例如，如果你选择 *主视觉图片* 组件，你将可以选择新图片并更改背景颜色。如果你选择像标题这样的纯文本元素，则可以修改字体、文字颜色和文本内容。

1. 选择你想要编辑的组件。
2. 使用 *组件* 菜单的 **编辑** 选项卡中的选项来更改其属性。

   * 如果你想在文本组件中插入链接，你可以 [通过编辑小组件的 HTML 来实现](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md).

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

{% endtab %}

{% tab title="移动" %}

1. 在画布中，选择你想要移动的组件。
2. 选择 ![](/files/04cd462a1c210adceaae5c30a265aab18e8726c5) **\[移动]**.
   * 有些组件无法移动。只有当画布上存在另一个有效位置可供组件移动时， ![](/files/04cd462a1c210adceaae5c30a265aab18e8726c5) **\[移动]** 选项才会显示。
3. 选择蓝色的 **移动到** 按钮，将组件移到你想要的位置。

   * 你需要先选择按钮，然后选择目标位置，而不是拖放操作。

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

{% endtab %}

{% tab title="移除" %}

1. 在画布中选择你想要移除的组件。
2. 选择 ![](/files/fa18e5773d804abe9fb1089ab0628454117e22a8) **\[移除]**.

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

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}
**第 3 步：自定义小组件外观和主题**

**添加图片或徽标**

1. 在右侧，来自 *组件* 菜单的 **添加** 选项卡，选择 **常用组件** 类别。
2. 选择以下任一项：
   * **叠加主视觉图片** （带有覆盖其上的可编辑文本的图片）
   * **图片** （不带顶部文本的普通图片）
3. 将图片添加到画布。
4. 从 *组件菜单的* **编辑** 选项卡，选择 **选择文件** 按钮下方的 *图片* 标题。

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

**替换图片或徽标**

1. 在画布中，选择你想要更改的照片。
2. 在 **编辑** 菜单中，选择 ![](/files/0e61567b8a836f0b527386fa1c15c90d09c888ab) **\[移除]** 然后选择 **选择文件** 以上传新图片。

   <div data-with-frame="true"><figure><img src="/files/4669707396ddd77de6be482982546dc605d8d5b0" alt="" width="299"><figcaption></figcaption></figure></div>
3. 使用以下任一方法上传图片：
   * 拖放图片
   * 在你的电脑上浏览文件
   * 在 *网页地址* 选项卡，粘贴该文件的公开 URL
4. 选择 **完成**.

**调整显示的分享按钮**

你可以使用 **编辑** 菜单编辑现有分享按钮。

1. 在画布中选择你想要编辑的分享按钮。
2. 在 **编辑** 选项卡，选择“ *分享媒介* 标题。

   <div data-with-frame="true"><figure><img src="/files/587f8586a3e4401eb5c2bb826b81d6db37a7500f" alt="" width="296"><figcaption></figcaption></figure></div>

通过使用 **添加** 菜单编辑现有分享按钮。

1. 从 **添加** 选项卡来添加新的分享按钮，选择 **分享**.

   <div data-with-frame="true"><figure><img src="/files/57c6c858ffb827fb631a2eeac6eb9313fd9991d7" alt="" width="283"><figcaption></figcaption></figure></div>
2. 选择合适的卡片。
3. 选择蓝色的 **添加到** 按钮，将组件放到画布上。
   {% endstep %}

{% step %}
**第 4 步：预览并保存**

1. 通过选择 ![](/files/e0f08c784d874503337007c4f391feb2cc3590a0) **\[预览]** 从顶部菜单栏中预览小组件将如何显示给参与者。
   * 你可以通过选择相应的设备图标，在以下体验预览之间切换： ![](/files/3c0aa0a0552d5ddf235a3b3c020ec5001ffb2fc4) **\[桌面]**, ![](/files/7980b1b77f72cb1ffb87d1253742456c1c17b6b2) **\[平板]**，或 ![](/files/267b6e96ec2cc87c5b9823c138dd00249b7a87c9) **\[移动端]** 用户。
2. 要返回编辑界面，请选择 ![](/files/e959996412072bc9cd3d674ffbb46e371fa9cea4) **\[编辑]** 从顶部菜单栏中预览小组件将如何显示给参与者。

   <div data-with-frame="true"><figure><img src="/files/04a5d6a9c053eacb81394132585ed9f6ea102184" alt="" width="563"><figcaption></figcaption></figure></div>
3. **保存** 你的更改。

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>警告：</strong> 小组件编辑器不会自动保存你的更改。请经常点击 <strong>保存</strong> ，以确保不会丢失你的工作。</p></div>

当你选择 **保存**时，更改将被添加到你的 [项目草稿](/brand/zh/what-would-you-like-to-learn-about/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate.md).
{% endstep %}
{% endstepper %}

#### 高级自定义选项

高级组件允许你包含基于参与者 *电子邮件*, *分群*，或 *自定义字段*的条件内容。例如，如果你想仅向金级订阅者显示排行榜， **分群条件区段** 组件将允许你这样做。

你可以从 **添加** 选项卡添加高级组件。设置它们需要多做一些工作，因为你需要在 [JSONata 表达式](http://docs.jsonata.org/overview.html) 中输入一个 *条件* 框，用于定义满足条件时的逻辑。如果你需要帮助，请联系我们的 [支持团队](mailto:saasquatch-support@impact.com) 。

#### 了解更多

* [为 Advocate 编辑你的小组件或微网站 HTML](#access-the-widget-editor-0-0)
* [为 Advocate 安装自定义 NPM 包](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md)


---

# 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/widget-experiences/customize-program-widgets.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.