# 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 com a aparência da sua marca. Usando o editor HTML embutido 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 de HTML/CSS personalizada está disponível somente para edições específicas do Advocate. Entre em contato com [suporte](mailto:saasquatch-support@impact.com) para atualizar sua conta e acessar esse 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 a estilização 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 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 o CSS

{% tabs %}
{% tab title="Edite seu microsite" %}
Você pode editar o HTML ou o CSS para fazer personalizações adicionais no seu microsite usando o editor HTML embutido. Embora o editor HTML permita maior flexibilidade no design do microsite, tenha em mente que não podemos 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 guia Microsite, selecione o layout ou a página cujo código você deseja editar.
4. Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3364b389815e6386c73528dda541e583d2fe0c16%2F0eceeaaa32f185a9932075cd699744ed6b755396902ea2e4cabff73869cb9f6f.svg?alt=media)![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6104f36947b882897acb25b42d057dee1ebd572a%2F80d3875a58861553d70eb3df7d72c3e6820128c3d4212b3bb623e44832b6ee2c.svg?alt=media) **\[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 `<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;">Seja recompensado quando seu amigo usar nosso produto</h3> 
   ```
7. Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1782d05738c13ec58eb6efb9c77d0c3e5ac96f02%2F309574593b8707c978ca25cd69a36a5a0faa4589103874c5ddc1dd96307e696e.svg?alt=media) **\[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 o CSS para fazer personalizações adicionais no seu widget usando o editor HTML embutido. Embora o editor HTML permita maior flexibilidade no design do widget, tenha em mente que não podemos 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 *Widgets* card, selecione **Editar widget**.
3. Em *Program Widgets*, selecione o widget que você deseja editar.

<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%2Fgit-blob-a43ec359ba16080d17bc57dc7faaa602268158cf%2Fdfb3191356adad2577e4a1e24b0646a647f8e08aa012feb467a38841a9b5a788.png?alt=media" alt=""><figcaption></figcaption></figure></div>

1. Na barra de menu superior, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3364b389815e6386c73528dda541e583d2fe0c16%2F0eceeaaa32f185a9932075cd699744ed6b755396902ea2e4cabff73869cb9f6f.svg?alt=media)![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6104f36947b882897acb25b42d057dee1ebd572a%2F80d3875a58861553d70eb3df7d72c3e6820128c3d4212b3bb623e44832b6ee2c.svg?alt=media) **\[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 `<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;">Seja recompensado quando seu amigo usar nosso produto</h3> 
   ```
4. Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1782d05738c13ec58eb6efb9c77d0c3e5ac96f02%2F309574593b8707c978ca25cd69a36a5a0faa4589103874c5ddc1dd96307e696e.svg?alt=media) **\[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 CSS Parts**

Alguns componentes integrados no seu widget ou microsite não podem ser totalmente estilizados pelo editor visual. Em certos casos, você pode substituir sua aparência usando CSS parts, que permitem um controle mais granular.

Se você pretende fazer atualizações de estilo avançadas, a equipe da impact.com pode orientar sobre o que é possível e compartilhar quaisquer seletores relevantes de CSS parts. Se estiver interessado em editar componentes com CSS parts, entre em contato com sua equipe de implementação do Advocate ou com a equipe de suporte pós-lançamento.