> 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/component-libraries-explained.md).

# 组件库说明

组件是构成你的小组件或微站的独立构建块，例如主视觉图片和任务卡。我们当前所有模板都由我们的 Mint 和 Bedrock 组件库提供支持。

<details>

<summary>Mint 组件</summary>

使用 Mint 组件构建的小组件和微站可为客户倡导者提供最新的 Advocate 体验。当前大多数模板都使用 Mint 组件。如果你不确定自己是否使用的是当前组件库，可以手动检查确认，并在需要时更新你的库。

要升级为 Mint 组件，适用于你的 **程序小组件**:

1. 从左侧导航菜单中选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容**.
2. 选择 **编辑小组件** 在 *小部件* 卡片。
3. 选择你要编辑的小组件名称。
4. 在左侧边栏菜单中，选择 **包**.
5. 选择 ![](/files/724207cd384cb04254f395812b496d20a45599e8) **添加包**.
6. 选择 **添加** 在 *Mint 组件* 卡片。

要升级为 Mint 组件，适用于你的 **微站点**:

1. 从左侧导航菜单中选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容。**
2. 选择 **编辑设置** 上的按钮 *微站点* 卡片。
3. 在以下 *站点托管* 标题，转到 *包* 部分。
4. 选择 ![](/files/724207cd384cb04254f395812b496d20a45599e8) **添加包**.
5. 选择 **添加** 在 *Mint 组件* 卡片。
6. 选择 **保存**.

</details>

<details>

<summary>Bedrock 组件</summary>

所有由 Mint 组件提供支持的模板也都安装了 Bedrock 组件包。参与者看不到 Bedrock 组件，但它们可为你的设计提供添加高级逻辑的能力。它们可以有条件地显示其他组件，并定义某个组件从哪个程序获取数据。你可以在 *高级组件* 部分中的 *添加* Widget 或 Microsite 编辑器中的选项卡。

Bedrock 组件包中有两个组件：

**条件部分**

“ *条件部分* 组件可让你根据参与者的电子邮件、国家/地区、分群或自定义字段包含条件内容。在 *条件* 框中设置显示条件。然后，将你希望显示给特定参与者群组的任何内容移动到条件部分内。

**程序部分**

“ *程序部分* 组件允许你覆盖其子组件的程序 ID。可用它来显示未关联到特定程序的内容。该 *程序部分* 组件默认包含在大多数 widget 和 microsite 模板中。

</details>

<details>

<summary>自定义组件库</summary>

你可以构建并使用自己的组件包，以进一步自定义你的 Advocate 体验。这些组件可添加到任何模板中，并与 Advocate 提供的组件一起使用。

Advocate 小组件使用标准 HTML 和 [Web 组件](https://www.webcomponents.org/) 。要在我们的 widget 编辑器中使用你自己的组件，它们必须编写为 Web 组件。

要开始使用自定义组件构建你的小组件，请安装你的自定义包：

1. 从左侧导航菜单中选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容**.
2. 选择 **编辑小组件** 在小组件卡片上。
3. 选择你要编辑的小组件名称。
4. 在左侧边栏菜单中，选择 **包**.
5. 选择 ![](/files/724207cd384cb04254f395812b496d20a45599e8) **添加包**.
6. 选择 ![](/files/724207cd384cb04254f395812b496d20a45599e8) **从 NPM 添加**.
7. 输入包 *姓名*, *版本* 和 *文件路径*.
8. 选择 **添加**.

</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/component-libraries-explained.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.
