> 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/widget-editor-overview.md).

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

Your Advocate プログラムでは、ドラッグ＆ドロップ式のエディタを提供しており、顧客アドボケートに表示されるウィジェットの見た目や内容をカスタマイズできます。

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

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

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

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

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

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

ブランドレベルでもさらにスタイルを調整するには、Widget Style オプションを選択してください。 [Content Editor でウィジェットとマイクロサイトをカスタマイズする](/brand/ja/what-would-you-like-to-learn-about/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="" width="333"><figcaption></figcaption></figure></div>

詳細についてはこちら [プログラムウィジェットのカスタマイズ](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md).

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

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


---

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

```
GET https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/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.