> 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 计划提供了一个拖放式编辑器，可让您自定义展示给客户倡导者的小部件的外观和内容。
## 小部件编辑器界面
自助式小部件编辑器包含四个主要区域：
{% tabs %}
{% tab title="顶部菜单栏" %}
页面顶部的菜单栏可用于撤销操作、查看 HTML 代码以及预览完成后的小部件。使用桌面、平板或移动设备图标来查看您的小部件在不同屏幕尺寸设备上的显示效果。
{% endtab %}
{% tab title="画布" %}
画布显示构成小部件的所有组件。您可以选择单个组件进行编辑，或添加新的组件，并一目了然地查看它们将如何展示给参与者。将组件拖到画布上的新位置即可重新排序。
{% endtab %}
{% tab title="左侧滑出面板" %}
左侧滑出的设置菜单是画布左侧的一个可折叠面板。在这里，您可以选择 **图层** 以查看小部件中所有组件的详细视图，或选择 **模板** 以使用我们预制的小部件之一。 **设置** 按钮会带您进入包安装子菜单。
如需在品牌层面进行更深入的样式设置，请选择“小部件样式”选项。有关可用样式选项的更多信息，请参阅使用内容编辑器自定义小部件和微网站。
{% endtab %}
{% tab title="组件" %}
组件菜单是画布右侧的一个面板。使用 **添加** 选项卡将新组件插入画布，并使用 **编辑** 选项卡对已有内容进行调整。
{% endtab %}
{% endtabs %}
## 故障排除
小部件有两层验证，用于检查组件位置和组件属性中的错误。收到错误消息的常见原因包括：
* 缺少必填字段
* 选择了无效颜色
* 输入了无效的 URL
当存在未解决的错误时，画布右上角会显示一条警告消息，通知您发现了多少个错误。
了解有关自定义项目小部件的更多信息。
## **查看未解决的错误详情**
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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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)
