> 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] → 内容**.
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] → 内容**.
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, 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/install-custom-npm-packages-for-advocate.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.