> 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/customize-program-widgets.md).

# Personalizar widgets do programa

#### Acesse o editor de widgets

1. No menu de navegação à esquerda, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Conteúdo**.
2. Na *Widgets* cartão, selecione **Editar widgets.**
3. No menu lateral deslizante à esquerda, selecione o nome do widget que você quer editar.

   <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%2F0I1JAhlX9u017vOG1oiM%2FScreenshot%202026-05-18%20at%2009.39.01.png?alt=media&amp;token=9315e124-9a39-4aa7-9a74-15c1d76cef00" alt="" width="347"><figcaption></figcaption></figure></div>

#### Personalize seus widgets

{% stepper %}
{% step %}
**Etapa 1: Escolha um modelo**

1. No menu lateral deslizante à esquerda, abaixo de *Widget atual*, selecione **Modelos**.
2. Selecione **Aplicar modelo** ao lado do modelo com o qual você quer começar.

   <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%2FUprZtBVbqNwCSdeRzWgh%2FScreenshot%202026-05-18%20at%2009.22.47.png?alt=media&amp;token=ffb2f798-297e-4f6c-a154-30146230482c" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Observação:** Se quiser ver uma prévia de como o modelo ficará sem confirmar a alteração, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Pré-visualizar]** antes de salvar. Selecione o **Salvar** botão somente quando estiver pronto para confirmar as alterações feitas.
{% endhint %}
{% endstep %}

{% step %}
**Etapa 2: Ajuste o conteúdo do widget**

Você pode adicionar, editar, mover ou remover componentes para modificar o conteúdo que seus defensores do cliente veem no widget.

{% hint style="success" %}
**Observação:** Para uma explicação dos diferentes elementos do editor de widgets, consulte [Visão geral do editor de widgets](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
{% endhint %}

{% tabs %}
{% tab title="Adicionar" %}

1. No lado direito da página, na *Componente* guia do menu **Adicionar** selecione um grupo de componentes.
   * Saiba mais sobre os [componentes disponíveis](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) e como eles são agrupados.
2. Selecione o componente apropriado.
3. Selecione o azul **Adicionar a** botão onde você quer que o componente apareça na tela.

   <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-faf3362b50a4598aeacff4ca831e5dcef8c7ef6e%2F346370cdced07562b504cd2b9bf6bf08b51539060e9551f784f029d4899ffa12.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Editar" %}
As propriedades que você pode editar dependerão do tipo de componente que você selecionou. Por exemplo, se você selecionar o *Imagem principal* componente, você poderá selecionar uma nova imagem e alterar a cor de fundo. Se você selecionar um elemento somente de texto, como um cabeçalho, então poderá modificar a fonte, a cor do texto e o conteúdo do texto.

1. Selecione o componente que você quer editar.
2. Use as opções na *Componente* guia do menu **Editar** guia para alterar suas propriedades.

   * Se quiser inserir um link em um componente de texto, você pode [fazer isso editando o HTML do widget](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md).

   <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-3e26ab9dbdff4f8e5d3d3e078d965672ade44d45%2F026f0ef0af7421ecfab6535433ea587862ec12c5223e8b393ef1db1228676e1f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Mover" %}

1. Na tela, selecione o componente que você quer mover.
2. Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Mover]**.
   * Alguns componentes não podem ser movidos. A ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Mover]** opção só aparecerá se houver outro local válido na tela para o componente ser movido.
3. Selecione o azul **Mover para** botão onde você quer que o componente vá.

   * Em vez de arrastar e soltar, você precisará selecionar o botão e depois selecionar o destino.

   <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-7bd9887e9f359c787f834a8344a181d7bb186dd3%2Faadaf737882c59604dcaa6bbed1857c867a32cad8c3dd8ea7975c047c04e6a3f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Remover" %}

1. Selecione o componente que você quer remover na tela.
2. Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[Remover]**.

   <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-030ab8fb2f678027aa57af859245968daee6f736%2F987319390fa75c5fb85f94d2d6e0a951fbf4511a72dbd91af4e55c8f39317301.jpg?alt=media" alt="" width="507"><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}
**Etapa 3: Personalize a aparência e o tema do widget**

**Adicione imagens ou logotipos**

1. À direita, na *Componente* guia do menu **Adicionar** guia, selecione a **Componentes comuns** categoria.
2. Selecione uma das opções:
   * **Imagem principal sobreposta** (uma imagem com texto editável sobreposto)
   * **Imagem** (uma imagem simples sem texto sobreposto)
3. Adicione a imagem à tela.
4. Na *do Menu de Componentes* **Editar** guia, selecione a **Escolher arquivo** botão abaixo do *Imagem* título.

   <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%2FlgpOwJZHPh4UAnrEyoZ2%2FScreenshot%202026-05-18%20at%2009.26.52.png?alt=media&amp;token=6430a500-8532-4fda-9789-1c879854cb67" alt="" width="295"><figcaption></figcaption></figure></div>

**Substitua imagens ou logotipos**

1. Na tela, selecione a foto que você quer alterar.
2. Na **Editar** menu, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[Remover]** e então selecione **Escolher arquivo** para reenviar uma nova imagem.

   <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%2FnLgD9kbzviI0PLgHBwi2%2FScreenshot%202026-05-18%20at%2009.27.57.png?alt=media&amp;token=f6eddd68-8246-4d60-8470-ab4cf3a66c9a" alt="" width="299"><figcaption></figcaption></figure></div>
3. Envie a imagem usando um destes métodos:
   * Arraste e solte a imagem
   * Procure um arquivo no seu computador
   * Na *Endereço da Web* guia, cole a URL pública do arquivo
4. Selecione **Concluído**.

**Ajuste quais botões de compartilhamento são exibidos**

Você pode editar botões de compartilhamento existentes usando o **Editar** menu.

1. Selecione o botão de compartilhamento que você quer editar na tela.
2. Na **Editar** guia, selecione o nome do site ou serviço embaixo do *Meio de compartilhamento* título.

   <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%2FNvgjnWp81PZSbXRInnFF%2FScreenshot%202026-05-18%20at%2009.30.34.png?alt=media&amp;token=a9e03a88-d25c-4f80-a304-a922741ca5d2" alt="" width="296"><figcaption></figcaption></figure></div>

Adicione um novo botão de compartilhamento usando o **Adicionar** menu.

1. Na **Adicionar** guia, selecione **Compartilhamento**.

   <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%2FAjOJfvj8X7nfL0AAJTJK%2FScreenshot%202026-05-18%20at%2009.31.51.png?alt=media&amp;token=5abcab17-8b61-4df8-892b-41db83253eb3" alt="" width="283"><figcaption></figcaption></figure></div>
2. Selecione o cartão apropriado.
3. Selecione o azul **Adicionar a** botão para colocar o componente na tela.
   {% endstep %}

{% step %}
**Etapa 4: Pré-visualize e salve**

1. Veja como o widget aparecerá para seus participantes selecionando ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Pré-visualizar]** na barra de menu superior.
   * Você pode alternar entre uma prévia da experiência para ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ae8027a26340e35a4d47f2a067cfadc9fc78113f%2F286f2a6c1251052ae82b73cd1c52b622b18f5203ba9cc10fde4d74292ac28d34.png?alt=media) **\[Desktop]**, ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-deeb14b0e398d5dbb2dfb280d3fd7d8e9411b26e%2F74c7be4be7f1d77a3793767c29c5bd878acceacf1d2533055231d5110b12dd61.png?alt=media) **\[Tablet]**, ou ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6156958cf5fc18498276161791a0514d9005d7cf%2F906c40a4da5b9c02a51450974f61a71761acc07baff3052b53f708d5b768a9be.png?alt=media) **\[Mobile]** usuários selecionando o ícone do respectivo dispositivo.
2. Para voltar à interface de edição, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Editar]** na barra de menu superior.

   <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%2FLtrKm25PXlhbzNvd63Kd%2FScreenshot%202026-05-18%20at%2009.32.48.png?alt=media&amp;token=6e306358-0acf-4592-bcdd-5122c7fee062" alt="" width="563"><figcaption></figcaption></figure></div>
3. **Salvar** suas alterações.

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>Aviso:</strong> O editor de widgets não salva automaticamente suas alterações. Clique <strong>Salvar</strong> frequentemente para garantir que você não perca seu trabalho.</p></div>

Quando você selecionar **Salvar**, as alterações serão adicionadas ao seu [rascunho do programa](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate.md).
{% endstep %}
{% endstepper %}

#### Opções avançadas de personalização

Componentes avançados permitem incluir conteúdo condicional com base no *email*, *segmento*, ou *campo personalizado* do participante. Por exemplo, se você quiser exibir um ranking apenas para participantes que são assinantes do nível ouro, o **seção condicional no segmento** componente permitirá que você faça isso.

Você pode adicionar componentes avançados na guia **Adicionar** . Configurá-los exige um pouco mais de trabalho, pois você precisará inserir uma [expressão JSONata](http://docs.jsonata.org/overview.html) no *Condição* caixa que define a lógica de quando a condição é atendida. Entre em contato com nossa [equipe de suporte](mailto:saasquatch-support@impact.com) se precisar de ajuda.

#### Saiba mais

* [Edite o HTML do seu widget ou microssite para Advocate](#access-the-widget-editor-0-0)
* [Instale pacotes NPM personalizados para Advocate](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md)


---

# 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/customize-program-widgets.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.