> 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:

```
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>
```

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.