> 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 项目的 microsite 或小部件。

#### 安装自定义 NPS 包

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

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. 在 *Microsite 卡片*，选择 **编辑设置**.
3. 在 *站点托管* 部分下，选择 **+ 添加包** → **从 NPM 添加**.
4. 输入包名称， *版本*，以及 *文件* 路径。
5. 选择 **添加**.

   * 返回到 [microsite 编辑器](/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="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FUbs3l7ef3wJ2RshoBtTw%2FScreenshot%202026-05-19%20at%2009.39.04.png?alt=media&amp;token=6bb9c609-deb4-419a-be29-cb68eec06c51" 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="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FVP8e0NyXkO9C7qvFrrYE%2FScreenshot%202026-05-19%20at%2009.36.22.png?alt=media&amp;token=c36213b2-fa8f-48d2-8b2d-207e85b2229e" alt="" width="563"><figcaption></figcaption></figure></div>

1. 在左侧导航菜单中，选择 **包**.
2. 选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **添加包**.
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.