# Install Custom NPM Packages for Advocate

You can install custom NPM packages for use in your Advocate program's microsite or widgets.

#### Install a custom NPS package

{% tabs %}
{% tab title="Install custom NPM packages for a microsite" %}
If you want to use custom components to build your microsite, then you can install a custom package.

1. In the left navigation menu, select ![](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. On the *Microsite card*, select **Edit Settings**.
3. Under the *Site Hosting* section, select **+ Add Package** → **Add from NPM**.
4. Enter the package name, *Version*, and *File* path.
5. Select **Add**.

   * Return to the [microsite editor](/brand/readme/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsite-editor-explained.md) to start adding your custom components to your site.

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

{% endtab %}

{% tab title="Install custom NPM packages for program widgets" %}
If your program has a custom widget that doesn’t use our components, then you can install a custom package.

1. In the left navigation menu, select ![](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. On the widget card, select **Edit widgets**.
3. Under *Program Widgets*, select a widget.

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

1. In the left navigation menu, select **Packages**.
2. Select ![](/files/TqIitC28MzeV7g6Ua9im) **Add package**.
3. Select **Add from NPM**.
4. Enter the package name, version, and file path.
5. Select **Add**.
   {% endtab %}
   {% endtabs %}

Learn more about how to [Customize Program Widgets](/brand/readme/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md)


---

# Agent Instructions: 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/readme/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.