# Visão geral do editor de widgets

Seu programa Advocate oferece um editor pick-and-plop que permite personalizar a aparência e o conteúdo dos widgets apresentados aos seus defensores de clientes.

#### Interface do editor de widget

O editor de widgets self-service possui 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%2Fgit-blob-f343272a45c0ebe8a90036c489173dbdc96cb155%2F692288b3de9942b25196de77402f176c0b491974bcb06f24239e69499e3dca88.jpg?alt=media" alt=""><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, 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 de relance como eles aparecerão para seus participantes.
{% endtab %}

{% tab title="Painel deslizante esquerdo" %}
O menu de configurações do slideout esquerdo é um painel recolhível à esquerda do canvas. 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 pré-fabricados. O **Configurações** botão leva você ao sub-menu de instalação do pacote.

Para ainda mais estilização em nível de marca, selecione a opção Estilo do Widget. Veja [Personalizar Widgets e Microsites com o Editor de Conteúdo](https://help.impact.com/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) 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 do canvas. Use a **Adicionar** guia para inserir novos componentes no canvas, e use a **Editar** guia para fazer ajustes no que já está lá.
{% endtab %}
{% endtabs %}

#### Solução de problemas

O widget possui duas camadas de validação para verificar erros na colocação de componentes e nas propriedades dos componentes. Razões comuns para receber uma mensagem de erro incluem:

* Falta de um campo obrigatório
* Escolha de uma cor inválida
* Inserção de uma URL inválida

Quando você tem erros não resolvidos, uma mensagem de aviso é exibida no canto superior direito do canvas notificando 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=""><figcaption></figcaption></figure></div>

Saiba mais sobre [Personalizando Widgets do Programa](https://help.impact.com/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets).

**Ver detalhes de 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 fazendo uma das opções:
   * Selecionando **Abrir Camadas**
   * Selecionando a mensagem de explicação do erro
3. Encontre o componente com erro. Ele estará 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.