> 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 o 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 à aparência e ao estilo da sua marca. Usando o editor de HTML integrado do Advocate, você pode adicionar estrutura, estilo e até substituir determinados componentes padrão para uma personalização mais profunda.
{% hint style="info" %}
**Observação**: A edição personalizada de HTML/CSS está disponível apenas para edições específicas do Advocate. Entre em contato [suporte](mailto:saasquatch-support@impact.com) para fazer upgrade da sua conta e acessar este recurso.
{% endhint %}
#### Por que usar HTML ou CSS personalizados?
HTML personalizado e CSS inline permitem que você:
* Alinhar-se mais de perto às diretrizes de marca da sua empresa
* Reformatar o layout e o espaçamento
* Aplicar estilos além do que está disponível no editor padrão
* Substituir o estilo de determinados widgets ou componentes do microsite
{% hint style="warning" %}
**Importante**: Nossa equipe de suporte oferece assistência limitada para problemas introduzidos por código personalizado. Se você não tiver certeza, recomendamos trabalhar com sua equipe de implementação do Advocate ou de 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 outras personalizações 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 de 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 você 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 outras personalizações 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 de 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 você 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 no 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ê quiser 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 você 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 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/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 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.
