# Advocate向けにカスタムNPMパッケージをインストールする

Advocate プログラムのマイクロサイトまたはウィジェットで使用するためのカスタム NPM パッケージをインストールできます。

#### カスタム 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/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsite-editor-explained.md) でサイトへのカスタムコンポーネントの追加を開始します。

   <div data-with-frame="true"><figure><img src="/files/04731b2bfc5244c60c7f2777c19765f0a2589bff" 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/81edfc6bb871a2494bbb422b411ef323cb276487" alt="" width="563"><figcaption></figcaption></figure></div>

1. 左側のナビゲーションメニューで、 **パッケージ**.
2. 次を選択します ![](/files/8557be98c1130cb55554497dd16810fe8e173d9e) **パッケージを追加**.
3. 次を選択します **NPM から追加**.
4. パッケージ名、バージョン、ファイルパスを入力します。
5. 次を選択します **追加**.
   {% endtab %}
   {% endtabs %}

方法の詳細については、 [プログラムウィジェットをカスタマイズする](/brand/ja/nitsuitebitaidesuka/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/ja/nitsuitebitaidesuka/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.