> 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/customize-widgets-and-microsites-with-the-content-editor.md).

# Personalizar widgets e microsites com o editor de conteúdo

O editor de conteúdo permite que você crie widgets e microssites que correspondem perfeitamente à identidade da sua marca, garantindo uma experiência consistente e confiável para seus clientes. Um ponto de contato com boa identidade visual é fundamental para gerar alto engajamento e adoção do programa.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FMsFCqNf5XpWg6l0OY9UU%2Fadv-150-5_1.mp4?alt=media&token=ee8653ae-d8ef-4519-a1f7-6b5ec0bc4214>" %}

## Controles centralizados de branding

Você pode encontrar e atualizar com facilidade os principais elementos de design da sua marca usando a opção de estilo do widget ou do microssite. Todas as configurações de branding estão localizadas em uma seção dedicada.

Widgets ou microssites têm aparência diferente dependendo do contexto do usuário, como se ele estiver logado, encontrando um erro ou visualizando em um dispositivo móvel. Nossas prévias do editor permitem alternar facilmente entre todos os estados possíveis do seu widget ou microssite.

{% hint style="success" %}
**Observação**: A prévia é mais aplicável a widgets (por exemplo, widgets de acesso instantâneo) e componentes (por exemplo, dinheiro, troca de recompensas). Para pré-visualizar microssites, você precisaria navegar até as diferentes páginas de microssites para ver os estados.
{% endhint %}

Isso elimina a necessidade de concluir ações manualmente para ver como um componente ficará. Agora você pode editar com confiança o texto e o design de cada etapa da jornada do usuário, incluindo:

* Visualizações com login vs. sem login
* Mensagens de erro e de sucesso
* Diferentes etapas em um fluxo de várias partes (como a verificação de saque em dinheiro)

Para personalizar o estilo da sua marca:

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**.
   * Para widgets, selecione **Editar Widgets** e para microssites, selecione **Editar conteúdo**.
2. No menu à esquerda, selecione se você deseja editar no Microssite ou no Widget.
3. Selecione o modelo de página que deseja editar e, em seguida, selecione **Estilo do widget**/**Estilo do microssite**.
4. Selecione a cor da sua marca para alterar a cor principal presente no seu widget ou microssite.
5. Em seguida, selecione o estilo de fonte que você gostaria de usar.
6. **\[Opcional]** Continue pelas demais opções de estilo para personalizar completamente a identidade da sua marca dentro do widget ou microssite.

<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%2FTr3NiEK9I3MXi3u7YWmh%2Fdownload.gif?alt=media&amp;token=6af5544b-ff9a-4201-a363-f13f2b53b099" alt="" width="563"><figcaption></figcaption></figure></div>

<details>

<summary>Referência dos elementos do editor de estilo</summary>

| Elemento de estilo     | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Cor principal da marca | <p>Essa cor será usada em diferentes elementos do seu widget ou microssite, então é importante concluir esta etapa. Selecione a cor principal da sua marca.</p><p>Essa cor também é usada nas seções Botão Primário e Botão Secundário mais abaixo nas opções de edição.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e6c8a0d69bf06ad5a2df6c27d1f09ae0ee432e90%2Fb55c15456cdbd904a6ff8a44d426f93a32958279e057958310f6d52bf4970a4f.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Fonte                  | <p>Selecione o estilo de fonte que você gostaria de ter no seu widget ou microssite.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ec18fd738390db60d7a39412866bb3698259b14f%2Fcc6e451c17e08331fb9d41c74d5d87453a9ae21e79ea9850f91bab20b49a716a.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| Cor                    | <p>Selecione as várias cores e destaques que você gostaria de ter no seu widget ou microssite:</p><p>• <strong>Fundo</strong></p><p>Selecione a cor que você gostaria de usar como plano de fundo do seu widget ou microssite.</p><p>• <strong>Texto</strong></p><p>Você pode alterar a cor da fonte tanto do texto principal quanto do texto atenuado dentro do widget ou microssite.</p><p>• <strong>Cor de destaque</strong></p><p>Altere as cores dos seus destaques. Isso inclui elementos como abas ou ícones dentro do widget ou microssite.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-55be9fef526da2d5ca0fb54102ef83ad55d03e4b%2F81b48cb986ad1a94cbefaf856b0debab102bb11279d654f5e91caf10764718de.jpg?alt=media" alt="" data-size="original"></p><p>• <strong>Cores adicionais</strong> <img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""></p><p>Você pode ajustar ainda mais as cores e os destaques de cada elemento com base no tipo de widget ou microssite.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0bece59f882d11a013783997bb2518dd4777f23c%2F2f4b167c662fe81c1de11e269d7bac69cc0422c2043a2087d21ace33273bee7c.jpg?alt=media" alt="" data-size="original"></p> |
| Botão Primário         | <p>Selecione o esquema de cores que você gostaria para o seu botão primário ou principal. Você também pode ajustar a quantidade de pixels do raio da borda ao redor do botão.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c761dd03be42d0d41dc16f7a120c4fc2fdc433ac%2Fde0edb9123b43b0ce3a5e5c921ef75bb4f85d62426483bf97e46aacb7becd728.jpg?alt=media" alt="" data-size="original"></p><p>Expanda a <img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Estado de hover</strong> seção para selecionar ou alterar ainda mais a cor para a qual seu botão muda quando um usuário passa o mouse sobre ele ou interage com ele.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aa31df8e922e6a978fbe88542452bbbaf929c848%2Ff99838a5337db16b96652353e550fdeb7df6532461e4b0e324d579065c4bc4d7.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                          |
| Botão Secundário       | <p>Selecione o esquema de cores que você gostaria para o seu botão secundário. Você também pode ajustar a quantidade de pixels do raio da borda ao redor do botão.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aba04be238a4411ef008e443e94dc3f15b0b2923%2Fce809941b33f15de27de52cf21ed8d5cf5b4e36991d8fef0b0d70f72f3b8c9ab.jpg?alt=media" alt="" data-size="original"></p><p>Expanda a <img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Estado de hover</strong> seção para selecionar ou alterar ainda mais a cor para a qual seu botão muda quando um usuário passa o mouse sobre ele ou interage com ele.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-561ddad6d0fa2db588ba4837bd6cce5275c02b3d%2Fb20584dcfe328bb0cc164b094945aa4bf2c8fb5fe0fb809c83073204fd43798f.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                     |
| Borda                  | <p>Altere a cor e o contorno da borda dos seus componentes, como tabelas ou cartões, dentro do seu widget ou microssite.</p><p>• <strong>Cor</strong></p><p>Selecione a cor da sua borda.</p><p>• <strong>Espessura</strong></p><p>Insira uma unidade em pixels para determinar a espessura da sua borda.</p><p>• <strong>Raio da borda</strong></p><p>Insira uma unidade em pixels para determinar o raio da sua borda.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ad49b6545fa9d0ffa189127095f15ad904d62b26%2F87161ed257680c7779e29077bc360366c09ef62774fb3917cdc33621b85aa064.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Campos de formulário   | <p>Selecione a cor que você gostaria para os vários campos de formulário dentro do seu widget ou microssite. Isso inclui qualquer campo de entrada preenchido pelo usuário. Você também pode inserir uma unidade em pixels para alterar o tamanho do raio da borda.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7ca9a1cbe9bd4d20e58a6a912c70e6b68d69832e%2Fd56db5a066f633dcafa399ca40df9b9a36cb6b8dc116695eedc872746af2a5b4.jpg?alt=media" alt="" data-size="original"></p><p>Expanda a <img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Opções avançadas</strong> seção para personalizar ainda mais as cores do estado selecionado ou do estado de hover dos seus campos de formulário.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1316f14f290be578906e018e061c38320ba9daac%2F1c704526ce54eccb73066cd4a924cc7b59fdb9bfb8842b648b385ea28923ea0e.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                        |
| Tamanho do widget      | <p>Altere o tamanho dos seus widgets dentro do modelo. Você pode ajustar as dimensões tanto para widgets incorporados quanto para widgets pop-up. Selecione um tamanho mínimo e máximo e, nas opções suspensas, selecione a unidade de medida. Escolha definir as medidas por pixel ou por porcentagem.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b4d9c97d0dafbbc79cd2782a413fc8eaad21e8d3%2F7109281d478bf7f826b153d935ff7b87f62a1a80c7d6b23aac6d47752c8ae4cb.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |

</details>


---

# 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/customize-widgets-and-microsites-with-the-content-editor.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.