> 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="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F5lBstm39QZFddtyAHWzK%2FCanvas%20(2).png?alt=media&#x26;token=b8ae9b78-8cea-425e-8cd8-e35a0b97535a" 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, ver o código HTML e visualizar uma prévia do 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 seus participantes. Arraste um componente para uma nova posição na área de trabalho para reordená-lo.
{% 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 exibiçã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 refinado em nível de marca, selecione a opção Estilo do widget. Consulte Personalizar widgets e microsites com o Editor de Conteúdo para 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 duas camadas 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 houver erros não resolvidos, 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="https://4048883401-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 como personalizar widgets do programa.

## **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á para o componente com erro por meio de uma destas opções:
   * Selecionando **Abrir camadas**
   * Selecionando a mensagem de explicação do erro
3. Encontre o componente com 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 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/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md?ask=<question>&goal=<user_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.