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

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="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F5lBstm39QZFddtyAHWzK%2FCanvas%20(2).png?alt=media&amp;token=b8ae9b78-8cea-425e-8cd8-e35a0b97535a" alt="" width="563"><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="Barra de menu superior" %}
A barra de menu na parte superior da página é onde você pode desfazer ações, ver o código HTML e 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="Tela" %}
A tela 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 participantes.
{% endtab %}

{% tab title="Painel deslizante esquerdo" %}
O menu de configurações do painel deslizante esquerdo é um painel recolhível à esquerda da tela. 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 uma estilização ainda mais aprofundada em nível de marca, selecione a opção Estilo do Widget. Veja [Personalize Widgets e Microssites 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 estilização disponíveis para você.
{% endtab %}

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

#### Solução de problemas

O widget tem duas camadas de validação para verificar erros no posicionamento 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 não resolvidos, uma mensagem de aviso é exibida no canto superior direito da tela, informando quantos erros foram encontrados.

<div data-with-frame="true"><figure><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-511216419b1ffaa7cf19cda9c94f06eedbbdaabc%2Fb0790ca38faffb4d36e8ed5d551995d0231df77a9958ffb98e857740cd207626.jpg?alt=media" 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. Vá até o componente com o erro por meio de uma destas opções:
   * Selecionar **Abrir camadas**
   * Selecionar a mensagem de explicação do erro
3. Encontre o componente com o erro. Ele será marcado com um ícone vermelho de ponto de exclamação.
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.