> 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/install-custom-npm-packages-for-advocate.md).

# 为 Advocate 安装自定义 NPM 包

您可以安装自定义 NPM 包，以便在您的 Advocate 计划微型网站或小组件中使用。

#### 安装自定义 NPS 包

{% tabs %}
{% tab title="为微型网站安装自定义 NPM 包" %}
如果您想使用自定义组件来构建您的微型网站，那么您可以安装自定义包。

1. 在左侧导航菜单中，选择 ![](https://impact-1.gitbook.io/docs/emvxfLrwrlacc4y3y02Y/~gitbook/image?url=https%3A%2F%2F4048883401-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FwMLlMoFBtKJa8ptd3zaw%252Fuploads%252Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%252Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg%3Falt%3Dmedia\&width=300\&dpr=3\&quality=100\&sign=71dd50ef\&sv=2) **\[Engage] → Content**.
2. 在 *微型网站卡片*中，选择 **编辑设置**.
3. 在 *网站托管* 部分下，选择 **+ 添加包** → **从 NPM 添加**.
4. 输入包名称、 *版本*和 *文件* 路径。
5. 选择 **添加**.

   * 返回到 [微型网站编辑器](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsite-editor-explained.md) 开始将您的自定义组件添加到您的网站中。

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

{% endtab %}

{% tab title="为计划小组件安装自定义 NPM 包" %}
如果您的计划有不使用我们组件的自定义小组件，那么您可以安装自定义包。

1. 在左侧导航菜单中，选择 ![](https://impact-1.gitbook.io/docs/emvxfLrwrlacc4y3y02Y/~gitbook/image?url=https%3A%2F%2F4048883401-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FwMLlMoFBtKJa8ptd3zaw%252Fuploads%252Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%252Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg%3Falt%3Dmedia\&width=300\&dpr=3\&quality=100\&sign=71dd50ef\&sv=2) **\[Engage] → Content**.
2. 在小组件卡片上，选择 **编辑小组件**.
3. 在 *计划小组件*下，选择一个小组件。

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

1. 在左侧导航菜单中，选择 **包**.
2. 选择 ![](/files/724207cd384cb04254f395812b496d20a45599e8) **添加包**.
3. 选择 **从 NPM 添加**.
4. 输入包名称、版本和文件路径。
5. 选择 **添加**.
   {% endtab %}
   {% endtabs %}

详细了解如何 [自定义计划小组件](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.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/install-custom-npm-packages-for-advocate.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.