> 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 de clientes.

#### 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="Área de trabalho" %}
A área de trabalho 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 os seus participantes.
{% endtab %}

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

Para um estilo ainda mais refinado no nível da identidade visual, 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 da área de trabalho. Use a **Adicionar** guia para inserir novos componentes na área de trabalho e use a **Editar** guia 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:

* Campo obrigatório ausente
* Escolher uma cor inválida
* Inserir uma URL inválida

Quando há erros sem resolução, uma mensagem de aviso é exibida no canto superior direito da área de trabalho, 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 sem resolução**

1. Selecione **Detalhes** na mensagem de aviso para uma breve explicação do que deu errado.
2. Vá até o componente com o erro de uma das seguintes 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:

```
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>
```

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.