> 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/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md).

# プログラムウィジェットをカスタマイズする

#### ウィジェットエディタにアクセスします

1. 左側のナビゲーションメニューから、 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[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%2F0I1JAhlX9u017vOG1oiM%2FScreenshot%202026-05-18%20at%2009.39.01.png?alt=media&amp;token=9315e124-9a39-4aa7-9a74-15c1d76cef00" alt="" width="347"><figcaption></figcaption></figure></div>

#### ウィジェットをカスタマイズする

{% stepper %}
{% step %}
**ステップ1: テンプレートを選択**

1. 左側のスライドアウトメニューで、以下の *現在のウィジェット*、次を選択します **テンプレート**.
2. 選択 **テンプレートを適用** 開始したいテンプレートの横の

   <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%2FUprZtBVbqNwCSdeRzWgh%2FScreenshot%202026-05-18%20at%2009.22.47.png?alt=media&amp;token=ffb2f798-297e-4f6c-a154-30146230482c" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**注:** 変更を確定せずにテンプレートの見た目をプレビューしたい場合は、 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[プレビュー]** 保存する前に。次の **保存** ボタンは、変更を確定する準備ができてから選択してください。
{% endhint %}
{% endstep %}

{% step %}
**ステップ2: ウィジェットのコンテンツを調整**

ウィジェット内で顧客アドボケイトに表示されるコンテンツを変更するために、コンポーネントを追加、編集、移動、または削除できます。

{% hint style="success" %}
**注:** ウィジェットエディタの各要素の説明は、次を参照してください: [ウィジェットエディタの概要](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
{% endhint %}

{% tabs %}
{% tab title="追加" %}

1. ページ右側の *コンポーネント* メニューの **追加** タブで、コンポーネントグループを選択します。
   * について詳しく知る [利用可能なコンポーネント](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) と、それらがどのようにグループ化されているか。
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-faf3362b50a4598aeacff4ca831e5dcef8c7ef6e%2F346370cdced07562b504cd2b9bf6bf08b51539060e9551f784f029d4899ffa12.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="編集" %}
編集できるプロパティは、選択したコンポーネントの種類によって異なります。たとえば、 *ヒーロー画像* コンポーネントを選択すると、新しい画像を選択したり、背景色を変更したりできます。ヘッダーのようなテキストのみの要素を選択した場合は、フォント、テキストの色、テキスト内容を変更できます。

1. 編集したいコンポーネントを選択します。
2. のオプションを使用して *コンポーネント* メニューの **編集** タブでそのプロパティを変更します。

   * テキストコンポーネントにリンクを挿入したい場合は、 [ウィジェットのHTMLを編集して行えます](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md).

   <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-3e26ab9dbdff4f8e5d3d3e078d965672ade44d45%2F026f0ef0af7421ecfab6535433ea587862ec12c5223e8b393ef1db1228676e1f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="移動" %}

1. キャンバス内で、移動したいコンポーネントを選択します。
2. 選択 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[移動]**.
   * 移動できないコンポーネントもあります。 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[移動]** このオプションは、コンポーネントを移動できる別の有効な配置先がキャンバス上にある場合にのみ表示されます。
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-7bd9887e9f359c787f834a8344a181d7bb186dd3%2Faadaf737882c59604dcaa6bbed1857c867a32cad8c3dd8ea7975c047c04e6a3f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="削除" %}

1. キャンバス上で削除したいコンポーネントを選択します。
2. 選択 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[削除]**.

   <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-030ab8fb2f678027aa57af859245968daee6f736%2F987319390fa75c5fb85f94d2d6e0a951fbf4511a72dbd91af4e55c8f39317301.jpg?alt=media" alt="" width="507"><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}
**ステップ3: ウィジェットの外観とテーマをカスタマイズ**

**画像またはロゴを追加**

1. 右側の *コンポーネント* メニューの **追加** タブで **共通コンポーネント** カテゴリを選択します。
2. 次のいずれかを選択します:
   * **オーバーレイ付きヒーロー画像** （編集可能なテキストが重ねられた画像）
   * **画像** （上にテキストのない通常の画像）
3. 画像をキャンバスに追加します。
4. 〜から *コンポーネントメニューの* **編集** タブで **ファイルを選択** 下のボタンを *画像* 見出しの

   <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%2FlgpOwJZHPh4UAnrEyoZ2%2FScreenshot%202026-05-18%20at%2009.26.52.png?alt=media&amp;token=6430a500-8532-4fda-9789-1c879854cb67" alt="" width="295"><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-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[削除]** その後、選択し **ファイルを選択** して、新しい画像を再アップロードします。

   <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%2FnLgD9kbzviI0PLgHBwi2%2FScreenshot%202026-05-18%20at%2009.27.57.png?alt=media&amp;token=f6eddd68-8246-4d60-8470-ab4cf3a66c9a" alt="" width="299"><figcaption></figcaption></figure></div>
3. 次のいずれかの方法で画像をアップロードします:
   * 画像をドラッグ＆ドロップする
   * コンピューター上のファイルを参照する
   * の中で *Webアドレス* タブで、ファイルの公開URLを貼り付けます
4. 選択 **完了**.

**表示する共有ボタンを調整する**

既存の共有ボタンは、次のものを使って編集できます。 **編集** メニュー。

1. キャンバス上で編集したい共有ボタンを選択します。
2. の中で **編集** タブで、下にあるサイトまたはサービス名を選択し *共有メディア* 見出しの

   <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%2FNvgjnWp81PZSbXRInnFF%2FScreenshot%202026-05-18%20at%2009.30.34.png?alt=media&amp;token=a9e03a88-d25c-4f80-a304-a922741ca5d2" alt="" width="296"><figcaption></figcaption></figure></div>

次のものを使用して新しい共有ボタンを追加します。 **追加** メニュー。

1. 〜から **追加** タブで、次を選択し **共有**.

   <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%2FAjOJfvj8X7nfL0AAJTJK%2FScreenshot%202026-05-18%20at%2009.31.51.png?alt=media&amp;token=5abcab17-8b61-4df8-892b-41db83253eb3" alt="" width="283"><figcaption></figcaption></figure></div>
2. 適切なカードを選択します。
3. 青い **追加先** ボタンを押してコンポーネントをキャンバスに配置します。
   {% endstep %}

{% step %}
**ステップ4: プレビューして保存**

1. 次を選択して、参加者にどのように表示されるかをプレビューします。 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[プレビュー]** 上部メニューバーから
   * の体験プレビューを切り替えられます。 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ae8027a26340e35a4d47f2a067cfadc9fc78113f%2F286f2a6c1251052ae82b73cd1c52b622b18f5203ba9cc10fde4d74292ac28d34.png?alt=media) **\[デスクトップ]**, ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-deeb14b0e398d5dbb2dfb280d3fd7d8e9411b26e%2F74c7be4be7f1d77a3793767c29c5bd878acceacf1d2533055231d5110b12dd61.png?alt=media) **\[タブレット]**、または ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6156958cf5fc18498276161791a0514d9005d7cf%2F906c40a4da5b9c02a51450974f61a71761acc07baff3052b53f708d5b768a9be.png?alt=media) **\[モバイル]** ユーザー向けに、それぞれのデバイスアイコンを選択して切り替えます。
2. 編集インターフェースに戻るには、次を選択します。 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[編集]** 上部メニューバーから

   <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%2FLtrKm25PXlhbzNvd63Kd%2FScreenshot%202026-05-18%20at%2009.32.48.png?alt=media&amp;token=6e306358-0acf-4592-bcdd-5122c7fee062" alt="" width="563"><figcaption></figcaption></figure></div>
3. **保存** 変更を保存します。

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>警告：</strong> ウィジェットエディタは変更を自動保存しません。次をクリックして <strong>保存</strong> 頻繁に保存し、作業内容を失わないようにしてください。</p></div>

次を選択すると、 **保存**、変更は次のあなたの [プログラム下書き](/brand/ja/what-would-you-like-to-learn-about/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate.md).
{% endstep %}
{% endstepper %}

#### 高度なカスタマイズオプション

高度なコンポーネントを使うと、参加者の次の情報に基づく条件付きコンテンツを含められます: *メールアドレス*, *セグメント*、または *カスタムフィールド*。たとえば、ゴールドレベルの購読者にのみリーダーボードを表示したい場合は、 **セグメントに基づく条件付きセクション** コンポーネントを使って実現できます。

高度なコンポーネントは、次の場所から追加できます。 **追加** タブ。設定には少し追加作業が必要で、次を入力する必要があります。 [JSONata式](http://docs.jsonata.org/overview.html) 次の *条件* ボックスです。条件が満たされるときのロジックを定義します。必要であれば、当社の [サポートチーム](mailto:saasquatch-support@impact.com) までお問い合わせください。

#### 詳しく見る

* [Advocate用のウィジェットまたはマイクロサイトのHTMLを編集](#access-the-widget-editor-0-0)
* [Advocate用のカスタムNPMパッケージをインストール](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.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/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.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.