# 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=""><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="Tela de edição" %}
A tela de edição 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 lateral esquerdo" %}
O menu de configurações do painel lateral esquerdo é um painel recolhível à esquerda da tela de edição. Aqui, você pode selecionar **Camadas** para ver uma visã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 sub-menu de instalação do pacote.

Para um nível ainda maior de personalização de marca, selecione a opção Estilo do Widget. Veja [Personalize Widgets e Microsites com o Editor de Conteúdo](/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) 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 tela de edição. Use a aba **Adicionar** para inserir novos componentes na tela de edição, 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 e nas propriedades dos componentes. Motivos comuns para receber uma mensagem de erro incluem:

* Não preencher um campo obrigatório
* 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 de edição informando quantos erros foram encontrados.

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

Saiba mais sobre [Personalizando Widgets do Programa](/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/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 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: 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/sobre-o-que-voce-gostaria-de-aprender/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.