# 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 à aparência e ao estilo da sua marca. Usando o editor HTML integrado do Advocate, você pode adicionar estrutura, estilo e até substituir certos 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 em edições específicas do Advocate. Entre em contato com [o 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 inline permitem que você:
* Combine mais de perto com as 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 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 com a equipe 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 personalizações adicionais no seu microsite usando o editor HTML integrado. Embora o editor HTML permita flexibilidade adicional 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) **\[Engajar] → 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ê quer editar.
4. Selecione  **\[Visualização de código]** na barra de menu superior.
5. Adicione ou modifique HTML e 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 `
```
* Inline, 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 colocar as alterações no ar.
{% endtab %}
{% tab title="Edite seu widget" %}
Você pode editar o HTML ou CSS para fazer personalizações adicionais no seu widget usando o editor HTML integrado. Embora o editor HTML permita flexibilidade adicional 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) **\[Engajar] → 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  **\[Parênteses]**.
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 `
```
* Inline, 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 colocar as alterações no ar.
{% endtab %}
{% endtabs %}
#### **Editar componentes usando partes de CSS**
Alguns componentes integrados no seu widget ou microsite não podem ser totalmente estilizados por meio do 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 com a equipe de suporte pós-lançamento.
---
# Agent Instructions: 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:
```
GET https://help.impact.com/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.