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

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

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%2Fgit-blob-54ffcf92fdcf6527acb6390b421de09f83d5a8f4%2F5d8a0b7afd11abc5f0db04be64b30635a1b0d697f529ce21338b6c8af1fa32df.jpg?alt=media" alt="" width="513"><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%2Fgit-blob-23c217eaab5f3d3a6ab40f1fe4282bd44c6ee667%2F225f0149361a6b987d2a69f1c8f8d6e006b237c6fc37f35bb439f5bac468c88a.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**注：** 変更を確定せずにテンプレートの見た目をプレビューしたい場合は、保存する前に次を選択します ![](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="info" %}
**注：** ウィジェットエディターのさまざまな要素の説明については、次を参照してください [ウィジェットエディターの概要](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview).
{% endhint %}

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

1. ページの右側の、 *コンポーネント* メニューの **追加** タブで、コンポーネントグループを選択します。
   * 利用可能な [コンポーネント](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained) とそれらがどのようにグループ化されているかについて詳しく学びます。
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=""><figcaption></figcaption></figure></div>

{% endtab %}

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

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

   * テキストコンポーネントにリンクを挿入したい場合は、ウィジェットのHTMLを編集することで行うことができます。 [ウィジェットのHTMLを編集することで行えます。](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate).

   <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=""><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=""><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=""><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%2Fgit-blob-564558169dbd2a3efe25c902610d7278c257626b%2F47c2ef7ef4780763f8648b19a1a580e43f68104b6205f5de72c51bf8ae9d8a1c.jpg?alt=media" alt="" width="353"><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%2Fgit-blob-30ee95734c8150b1983dea767f0e729e157df91e%2F65602249ec03ef7f267348ae795f32755c8ca109ed253d98bab523b584b27f3e.jpg?alt=media" alt="" width="351"><figcaption></figcaption></figure></div>
3. 次の方法のいずれかで画像をアップロードします：
   * 画像をドラッグアンドドロップする
   * コンピューターでファイルを参照する
   * の *ウェブアドレス* タブで、ファイルの公開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%2Fgit-blob-329fb56148698f747349956ce5d6d95859a7bc3a%2Fcb6384644531cbcceed4a4f72bac70c0883e383f8619f6e03f304e4e281919b2.jpg?alt=media" alt=""><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%2Fgit-blob-e8ffcffaec4bcabee098c5811ceca22f74c38e9e%2F349cee3ff230764af0891ae493ab5b8af34a592711ec5a7b027a3fc5b77a02ef.jpg?alt=media" alt="" width="339"><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%2Fgit-blob-cebcc495d7dcfd7f7e3a77ab7061913c92b9dcf2%2F0138d6f68eff457694e6f8a5120f0165ae55112510f8928f35fc9771e5a97646.jpg?alt=media" alt=""><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>

を選択すると、変更はあなたの **保存**に追加されます。 [プログラムのドラフト](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate).
{% endstep %}
{% endstepper %}

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

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

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

#### 詳細を学ぶ

* [アドボケイトのウィジェットまたはマイクロサイトのHTMLを編集する](#access-the-widget-editor-0-0)
* [アドボケイト用のカスタムNPMパッケージをインストールする](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate)
