> 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/edit-your-widget-or-microsite-html-and-css-for-advocate.md).
# Editar o HTML e CSS do seu widget ou microsite para o Advocate
Você pode personalizar seus widgets e microsite do Advocate com HTML e CSS adicionais para alinhar melhor a aparência e o estilo à sua marca. Usando o editor de HTML integrado do Advocate, você pode adicionar estrutura, estilo e até substituir certos componentes padrão para uma personalização mais aprofundada.
{% hint style="info" %}
**Observação**: A edição personalizada de HTML/CSS está disponível apenas em edições específicas do Advocate. Entre em contato [suporte](mailto:saasquatch-support@impact.com) para atualizar sua conta e acessar este recurso.
{% endhint %}
#### Por que usar HTML ou CSS personalizados?
HTML personalizado e CSS embutido permitem que você:
* Alinhe-se mais de perto às diretrizes de marca da sua empresa
* Reformate o layout e o espaçamento
* Aplique estilos além do que está disponível no editor padrão
* Substitua o estilo de componentes selecionados do widget ou microsite
{% hint style="warning" %}
**Importante**: Nossa equipe de suporte oferece assistência limitada para problemas introduzidos por código personalizado. Se tiver dúvidas, recomendamos trabalhar com sua equipe de Implementação do Advocate ou pós-lançamento.
{% endhint %}
#### Edite o HTML ou CSS
{% tabs %}
{% tab title="Edite seu microsite" %}
Você pode editar o HTML ou CSS para fazer personalizações adicionais no seu microsite usando o editor de HTML integrado. Embora o editor de HTML permita mais flexibilidade no design do microsite, tenha em mente que não conseguimos solucionar problemas em ajustes feitos com HTML ou CSS personalizados.
1. No menu de navegação à esquerda, selecione ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Conteúdo**.
2. No cartão do microsite, selecione **Editar conteúdo**.
3. Na aba Microsite, selecione o layout ou a página cujo código deseja editar.
4. Selecione  **\[Visualização de código]** na barra de menu superior.
5. Adicione ou modifique o HTML e o CSS conforme necessário.
6. O CSS pode ser adicionado de três maneiras:
* Importando uma folha de estilo CSS externa
* No topo da página em uma `
```
* Em linha, para aplicar um estilo a um elemento HTML específico:
```programlisting
Ganhe recompensas quando seu amigo usar nosso produto
```
7. Selecione  **\[Pincel]** para visualizar suas atualizações.
8. Selecione **Salvar rascunho** para salvar, ou **Publicar** para publicar as alterações.
{% endtab %}
{% tab title="Edite seu widget" %}
Você pode editar o HTML ou CSS para fazer personalizações adicionais no seu widget usando o editor de HTML integrado. Embora o editor de HTML permita mais flexibilidade no design do widget, tenha em mente que não conseguimos solucionar problemas em ajustes feitos com HTML ou CSS personalizados.
1. No menu de navegação à esquerda, selecione ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Conteúdo**.
2. Na *Widgets* cartão, selecione **Editar widget**.
3. Em *Widgets do programa*, selecione o widget que deseja editar.
1. Na barra de menu superior, selecione  **\[Colchetes]**.
2. Adicione ou edite seu HTML no corpo da página.
3. O CSS pode ser adicionado de três maneiras:
* Importando uma folha de estilo CSS externa
* No topo da página em uma `
```
* Em linha, para aplicar um estilo a um elemento HTML específico:
```programlisting
Ganhe recompensas quando seu amigo usar nosso produto
```
4. Selecione  **\[Pincel]** para visualizar suas atualizações.
5. Selecione **Salvar rascunho** para salvar, ou **Publicar** para publicar as alterações.
{% endtab %}
{% endtabs %}
#### **Editar componentes usando partes de CSS**
Alguns componentes integrados do seu widget ou microsite não podem ser totalmente estilizados pelo editor visual. Em certos casos, você pode substituir a aparência deles usando partes de CSS, que permitem um controle mais granular.
Se você deseja fazer atualizações avançadas de estilo, a equipe da impact.com pode orientar sobre o que é possível e compartilhar quaisquer seletores de partes de CSS relevantes. Se tiver interesse em editar componentes com partes de CSS, entre em contato com sua equipe de Implementação do Advocate ou de suporte pós-lançamento.
---
# 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/edit-your-widget-or-microsite-html-and-css-for-advocate.md?ask=&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.
