> 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 do Advocate e seu microssite com HTML e CSS adicionais para alinhar melhor a aparência e o estilo à identidade visual 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 [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ê:

* Siga as diretrizes de marca da sua empresa com mais precisão
* 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 microssite

{% 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 pós-lançamento.
{% endhint %}

#### Edite o HTML ou CSS

{% tabs %}
{% tab title="Edite seu microssite" %}
Você pode editar o HTML ou CSS para fazer personalizações adicionais no seu microssite usando o editor HTML integrado. Embora o editor HTML permita mais flexibilidade no design do microssite, tenha em mente que não conseguimos solucionar 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 microssite, selecione **Editar conteúdo**.
3. Na aba Microssite, selecione o layout ou a página cujo código você deseja editar.
4. Selecione ![](/files/c02a83ce7e2a9a82636d53bad82600676794d6d5)![](/files/b35c81adbe13d1cbcbe64f4263cf67fbbc6ff0c0) **\[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:

   * Por meio da importação de uma folha de estilo CSS externa
   * No topo da página em uma `<style>` tag:

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * Inline, para aplicar um estilo a um elemento HTML específico:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Receba recompensas quando seu amigo usar nosso produto</h3> 
   ```
7. Selecione ![](/files/756ded54b88771897907d7e54a813627773f731c) **\[Pincel]** para visualizar suas atualizações.
8. Selecione **Salvar rascunho** para salvar, ou **Publicar** para aplicar as alterações ao vivo.
   {% 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 mais flexibilidade no design do widget, tenha em mente que não conseguimos solucionar 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.

<div data-with-frame="true"><figure><img src="/files/6ee54823f5758ba28b74ab56df177b2d945a38cf" alt="" width="563"><figcaption></figcaption></figure></div>

1. Na barra de menu superior, selecione ![](/files/c02a83ce7e2a9a82636d53bad82600676794d6d5)![](/files/b35c81adbe13d1cbcbe64f4263cf67fbbc6ff0c0) **\[Colchetes]**.
2. Adicione ou edite seu HTML no corpo da página.
3. O CSS pode ser adicionado de três maneiras:

   * Por meio da importação de uma folha de estilo CSS externa
   * No topo da página em uma `<style>` tag:

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * Inline, para aplicar um estilo a um elemento HTML específico:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Receba recompensas quando seu amigo usar nosso produto</h3> 
   ```
4. Selecione ![](/files/756ded54b88771897907d7e54a813627773f731c) **\[Pincel]** para visualizar suas atualizações.
5. Selecione **Salvar rascunho** para salvar, ou **Publicar** para aplicar as alterações ao vivo.
   {% endtab %}
   {% endtabs %}

#### **Editar componentes usando partes de CSS**

Alguns componentes integrados no seu widget ou microssite não podem ser estilizados totalmente pelo editor visual. Em certos casos, você pode substituir a aparência deles usando partes de CSS, o que permite 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
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=<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.