> 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. 左側のナビゲーションメニューから、 ![](/files/7ddd72d8e69e7055d9408cf4847c5c54abf9f71d) **\[Engage] → コンテンツ**.
2. 〜の *ウィジェット* カードで、 **ウィジェットを編集します。**
3. 左側のスライドアウトメニューから、編集したいウィジェットの名前を選択します。

   <div data-with-frame="true"><figure><img src="/files/082b53be34223301b0efe56ac8e3ddaea2383c44" alt="" width="347"><figcaption></figcaption></figure></div>

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

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

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

   <div data-with-frame="true"><figure><img src="/files/2d548e40db573fa9f19170c373238e98a0189f21" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**注：** 変更を確定せずにテンプレートの見た目をプレビューしたい場合は、 ![](/files/3424e56c9f78203a6405370d17bb4e345a0f5f57) **\[プレビュー]** を選択してください。変更を確定する準備ができたら、 **保存** ボタンのみを選択してください。
{% 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="/files/19bae333d985c32b1b4b6e36aa35a346d9127dd3" 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="/files/54b31c050d115580c540de3d193d1fc9a2cf3cc3" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="移動" %}

1. キャンバス内で、移動したいコンポーネントを選択します。
2. 選択して ![](/files/6e3b561a11f46c93d04a21bf903a8b2f41195d90) **\[移動]**.
   * 一部のコンポーネントは移動できません。 ![](/files/6e3b561a11f46c93d04a21bf903a8b2f41195d90) **\[移動]** オプションは、コンポーネントを移動できる別の有効な場所がキャンバス上にある場合にのみ表示されます。
3. 青い **移動先** ボタンを、コンポーネントを移動したい場所で選択します。

   * ドラッグ＆ドロップではなく、ボタンを選択してから移動先を選ぶ必要があります。

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

{% endtab %}

{% tab title="削除" %}

1. キャンバスで削除したいコンポーネントを選択します。
2. 選択して ![](/files/d532d03631ab792748e7ee46e4497981451d14d0) **\[削除]**.

   <div data-with-frame="true"><figure><img src="/files/46b7b8523efaf0d67df929987c4557d84b541143" alt="" width="507"><figcaption></figcaption></figure></div>

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

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

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

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

   <div data-with-frame="true"><figure><img src="/files/7b09ab9d7090256b3e3d8c477e377aa6c96efca2" alt="" width="295"><figcaption></figcaption></figure></div>

**画像またはロゴを置き換える**

1. キャンバス内で、変更したい写真を選択します。
2. の **編集** メニューで、 ![](/files/3bd40d6a05bc93db8771fd9f3fa91901dad25746) **\[削除]** を選択してから **ファイルを選択** を選択し、新しい画像を再アップロードします。

   <div data-with-frame="true"><figure><img src="/files/3d31d4ffccac1b6a905924c2a77182db357f2536" alt="" width="299"><figcaption></figcaption></figure></div>
3. 次のいずれかの方法で画像をアップロードします：
   * 画像をドラッグ＆ドロップする
   * コンピューター上のファイルを参照する
   * の *Webアドレス* タブで、ファイルの公開URLを貼り付けます
4. 選択して **完了**.

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

既存の共有ボタンは **編集** メニューで編集できます。

1. キャンバスで編集したい共有ボタンを選択します。
2. の **編集** タブで、 *共有先* 見出しの下で

   <div data-with-frame="true"><figure><img src="/files/2a2772ffe341cff8cfc54fecd8eb7f00794414d3" alt="" width="296"><figcaption></figcaption></figure></div>

を使って新しい共有ボタンを追加します。 **追加** メニューで編集できます。

1. の **追加** タブで、 **共有**.

   <div data-with-frame="true"><figure><img src="/files/c16d239b1a2143422a802387ee333185e4176994" alt="" width="283"><figcaption></figcaption></figure></div>
2. 適切なカードを選択します。
3. 青い **追加先** ボタンを使って、コンポーネントをキャンバスに配置します。
   {% endstep %}

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

1. 上部メニューバーから ![](/files/3424e56c9f78203a6405370d17bb4e345a0f5f57) **\[プレビュー]** を選択して、ウィジェットが参加者にどのように表示されるかをプレビューします。
   * 次の環境ごとの体験のプレビューを切り替えられます： ![](/files/562c0f6077b61db4a239763b34f3d4808cfa4b36) **\[デスクトップ]**, ![](/files/bcac58b1df72a1d66eb501c6dfe28190c01dbf02) **\[タブレット]**&#x307E;たは ![](/files/296ec8ad5c4f5aef8e11c020dc01e32148fd614a) **\[モバイル]** それぞれのデバイスアイコンを選択します。
2. 編集インターフェースに戻るには、 ![](/files/20d1a387779aaf484f1decb3846cdda832728b7a) **\[編集]** を選択して、ウィジェットが参加者にどのように表示されるかをプレビューします。

   <div data-with-frame="true"><figure><img src="/files/4871bc78da3ff15138c1c03ea5f169cb86a0417f" 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.