> 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つの領域があります：
{% tabs %}
{% tab title="上部メニューバー" %}
ページ上部のメニューバーでは、操作の取り消し、HTMLコードの表示、完成したウィジェットのプレビューができます。デスクトップ、タブレット、モバイルの各アイコンを使って、画面サイズの異なるデバイスでウィジェットがどのように表示されるかを確認してください。
{% endtab %}
{% tab title="キャンバス" %}
キャンバスには、ウィジェットを構成するすべてのコンポーネントが表示されます。個々のコンポーネントを選択して編集したり、新しいコンポーネントを追加して、参加者にどのように表示されるかをひと目で確認したりできます。
{% endtab %}
{% tab title="左側のスライドアウト" %}
左側のスライドアウト設定メニューは、キャンバスの左側にある折りたたみ可能なパネルです。ここでは、 **レイヤー** ウィジェット内のすべてのコンポーネントの詳細表示を確認するか、 **テンプレート** を選択して、用意されたウィジェットのいずれかを使用できます。 **設定** ボタンをクリックすると、パッケージのインストール用サブメニューに移動します。
ブランドレベルでさらにスタイルを調整するには、［ウィジェットスタイル］オプションを選択します。表示 [コンテンツエディターでウィジェットとマイクロサイトをカスタマイズする](/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を入力している
未解決のエラーがある場合、キャンバス右上に警告メッセージが表示され、見つかったエラー数が通知されます。
詳細： [プログラムウィジェットのカスタマイズ](/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=&goal=
```
`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.
.png?alt=media&token=b8ae9b78-8cea-425e-8cd8-e35a0b97535a)
