# ウィジェットエディターの概要

Your Advocateプログラムは、顧客アドボケートに表示されるウィジェットの外観と内容をカスタマイズできるピック＆プロップ編集機能を提供します。

#### ウィジェット編集インターフェース

セルフサーブのウィジェットエディタには主に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-f343272a45c0ebe8a90036c489173dbdc96cb155%2F692288b3de9942b25196de77402f176c0b491974bcb06f24239e69499e3dca88.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="トップメニューバー" %}
ページ上部のメニューバーでは、操作の取り消し、HTMLコードの表示、完成したウィジェットのプレビューができます。デスクトップ、タブレット、モバイルのアイコンを使って、異なる画面サイズのデバイスでウィジェットがどのように表示されるか確認できます。
{% endtab %}

{% tab title="キャンバス" %}
キャンバスにはウィジェットを構成するすべてのコンポーネントが表示されます。個々のコンポーネントを選択して編集したり、新しいコンポーネントを追加して参加者にどのように表示されるかを一目で確認できます。
{% endtab %}

{% tab title="左スライドアウト" %}
左のスライドアウト設定メニューはキャンバスの左側にある折りたたみ可能なパネルです。ここでは、 **レイヤー** を選択してウィジェット内のすべてのコンポーネントの詳細ビューを表示したり、 **テンプレート** を選択して当社の既製ウィジェットの1つを使用したりできます。 **設定** ボタンはパッケージインストールのサブメニューに移動します。

ブランドレベルでさらにスタイル調整を行うには、Widget Styleオプションを選択します。 [コンテンツエディターでウィジェットとマイクロサイトをカスタマイズする](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) 利用可能なスタイルオプションの詳細については、をご覧ください。
{% endtab %}

{% tab title="コンポーネント" %}
コンポーネントメニューはキャンバスの右側にあるパネルです。 **追加** タブを使用して新しいコンポーネントをキャンバスに挿入し、 **編集** タブを使用して既存のものを調整します。
{% endtab %}
{% endtabs %}

#### トラブルシューティング

ウィジェットには、コンポーネント配置とコンポーネントプロパティのエラーをチェックするための2層の検証があります。エラーメッセージが表示される一般的な理由には次のものがあります：

* 必須フィールドの欠落
* 無効な色の選択
* 無効なURLの入力

未解決のエラーがある場合、キャンバスの右上に警告メッセージが表示され、見つかったエラーの数が通知されます。

<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-511216419b1ffaa7cf19cda9c94f06eedbbdaabc%2Fb0790ca38faffb4d36e8ed5d551995d0231df77a9958ffb98e857740cd207626.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

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

**未解決のエラーの詳細を表示**

1. 選択します **詳細** で警告メッセージを確認すると、何が問題だったかの簡単な説明が表示されます。
2. エラーのあるコンポーネントに移動するには次のいずれかを行います：
   * を選択する **レイヤーを開く**
   * エラー説明メッセージを選択する
3. エラーのあるコンポーネントを見つけます。赤い感嘆符アイコンでマークされています。
4. コンポーネントを選択して、プロパティを **編集** バーで開きます。
5. 必要な変更を行います。