> 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/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).

# Visão geral do editor de widgets

Seu programa Advocate oferece um editor de arrastar e soltar que permite personalizar a aparência e o conteúdo dos widgets apresentados aos seus defensores do cliente.

#### Interface do editor de widgets

O editor de widgets de autoatendimento tem quatro áreas principais:

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

{% tabs %}
{% tab title="Barra de menu superior" %}
A barra de menu no topo da página é onde você pode desfazer ações, visualizar o código HTML e pré-visualizar o widget finalizado. Use os ícones de desktop, tablet ou celular para ver como seu widget aparecerá em dispositivos com tamanhos de tela diferentes.
{% endtab %}

{% tab title="Canvas" %}
O canvas mostra todos os componentes que compõem seu widget. Você pode selecionar componentes individuais para editá-los ou adicionar novos e ver rapidamente como eles aparecerão para seus participantes.
{% endtab %}

{% tab title="Painel lateral esquerdo" %}
O menu de configurações no painel lateral esquerdo é um painel recolhível à esquerda do canvas. Aqui, você pode selecionar **Camadas** para ver uma visualização detalhada de todos os componentes do seu widget, ou selecionar **Modelos** para usar um de nossos widgets prontos. O **Configurações** botão leva você ao submenu de instalação do pacote.

Para um estilo ainda mais avançado em nível de branding, selecione a opção Estilo do Widget. Veja [Personalize Widgets e Microsites com o Editor de Conteúdo](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) para obter mais informações sobre as opções de estilo disponíveis para você.
{% endtab %}

{% tab title="Componente" %}
O menu de componentes é um painel à direita do canvas. Use a aba **Adicionar** para inserir novos componentes no canvas e use a aba **Editar** para fazer ajustes no que já está lá.
{% endtab %}
{% endtabs %}

#### Solução de problemas

O widget tem dois níveis de validação para verificar erros no posicionamento dos componentes e nas propriedades dos componentes. Motivos comuns para receber uma mensagem de erro incluem:

* Faltando um campo obrigatório
* Escolhendo uma cor inválida
* Inserindo uma URL inválida

Quando há erros não resolvidos, uma mensagem de aviso é exibida no canto superior direito do canvas, informando quantos erros foram encontrados.

<div data-with-frame="true"><figure><img src="/files/2c3f4f6f199affe9ee9c8e89f357e61588f4db02" alt="" width="333"><figcaption></figcaption></figure></div>

Saiba mais sobre [Personalizando Widgets do Programa](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md).

**Ver detalhes dos erros não resolvidos**

1. Selecione **Detalhes** na mensagem de aviso para uma breve explicação do que deu errado.
2. Acesse o componente com o erro de uma destas formas:
   * Selecionando **Abrir camadas**
   * Selecionando a mensagem de explicação do erro
3. Encontre o componente com o erro. Ele será marcado com um ícone de exclamação vermelho.
4. Selecione o componente para abrir as propriedades na **Editar** barra.
5. Faça as alterações necessárias.


---

# 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/pt-br/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.