# Advocate用のカスタムNPMパッケージをインストールする

アドボケイトプログラムのマイクロサイトまたはウィジェットで使用するためのカスタム 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. 次を選択します **追加**.

   * に戻り、 [マイクロサイトエディター](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsite-editor-explained) で、サイトにカスタムコンポーネントの追加を開始します。

   <div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e7a6d65e9f6d2b8ab72b7fed8f306a9dccd45290%2Fe0b3136fe6d830ca69fec42738b3e32c715411c3e5adaa4f6c5a8f191183046d.png?alt=media" alt="" width="403"><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://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d12dd97bf9d6ddac5c20a1ea5ace7b67457c08ed%2F44562617664627c26dca2d91c6aa783b2bc3e7eaaf0b3abbdeec8001c73893d0.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

1. 左側のナビゲーションメニューで、 **パッケージ**.
2. 次を選択します ![](https://1458456015-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 %}

詳細はこちら [プログラムウィジェットをカスタマイズする方法](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets)