> 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).

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

お使いの 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 オプションを選択します。表示 [コンテンツエディターでウィジェットとマイクロサイトをカスタマイズする](/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, 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/widget-editor-overview.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.