> 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/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
# 小组件编辑器概览
您的 Advocate 程序提供了一个所见即所得编辑器，可让您自定义呈现给客户 Advocate 的小组件的外观和内容。
#### 小组件编辑器界面
自助式小组件编辑器有四个主要区域：
{% tabs %}
{% tab title="顶部菜单栏" %}
页面顶部的菜单栏可用于撤销操作、查看 HTML 代码以及预览完成后的小组件。使用桌面、平板或移动设备图标，查看您的小组件在不同屏幕尺寸设备上的显示效果。
{% endtab %}
{% tab title="画布" %}
画布显示构成您小组件的所有组件。您可以选择单个组件进行编辑，或添加新组件，并一目了然地查看它们在参与者端的显示效果。
{% endtab %}
{% tab title="左侧弹出面板" %}
左侧弹出的设置菜单是位于画布左侧的可折叠面板。在这里，您可以选择 **图层** 以查看小组件中所有组件的详细视图，或选择 **模板** 来使用我们预先制作的某个小组件。 **设置** 按钮会带您进入安装包子菜单。
如需在品牌层面进行更进一步的样式设置，请选择“小组件样式”选项。查看 [使用内容编辑器自定义小组件和微型站点](/brand/zh/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 %}
#### 故障排除
该小组件有两层验证机制，用于检查组件位置和组件属性中的错误。收到错误消息的常见原因包括：
* 缺少必填字段
* 选择了无效颜色
* 输入了无效的 URL
当存在未解决的错误时，画布右上角会显示一条警告消息，通知您发现了多少个错误。
了解更多关于 [自定义程序小组件](/brand/zh/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/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md?ask=
```
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.