> 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) **\[タブレット]**、または ![](/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.