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

Advocateプログラムでは、ドラッグ＆ドロップ式のエディターを利用でき、顧客アドボケートに表示されるウィジェットの外観や内容をカスタマイズできます。

#### ウィジェットエディターのインターフェース

セルフサービスのウィジェットエディターには、主に4つの領域があります。

<div data-with-frame="true"><figure><img src="/files/a71a303fddbe102f960e568bd2b3bbec24313692" alt=""><figcaption></figcaption></figure></div>

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

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

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

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

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

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

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

* 必須フィールドが入力されていない
* 無効な色を選択した
* 無効なURLを入力した

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

<div data-with-frame="true"><figure><img src="/files/14550b084d46868bdd71a18ef25428b607e40ce1" alt=""><figcaption></figcaption></figure></div>

次について詳しくはこちら [プログラムウィジェットのカスタマイズ](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md).

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

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


---

# Agent Instructions: 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:

```
GET https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.