> 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/es/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 el HTML y CSS de tu widget o micrositio para Advocate

Puedes personalizar tus widgets y micrositio de Advocate con HTML y CSS adicionales para alinearlos mejor con la apariencia de tu marca. Usando el editor de HTML integrado de Advocate, puedes agregar estructura, estilo e incluso reemplazar ciertos componentes predeterminados para una personalización más profunda.

{% hint style="info" %}
**Nota**: La edición personalizada de HTML/CSS solo está disponible para ediciones específicas de Advocate. Contacta con [soporte](mailto:saasquatch-support@impact.com) para actualizar tu cuenta y acceder a esta función.
{% endhint %}

#### ¿Por qué usar HTML o CSS personalizados?

El HTML personalizado y el CSS en línea te permiten:

* Ajustar más de cerca las pautas de marca de tu empresa
* Reformatear el diseño y el espaciado
* Aplicar estilos más allá de lo disponible en el editor predeterminado
* Reemplazar el estilo de widgets seleccionados o de componentes del micrositio

{% hint style="warning" %}
**Importante**: Nuestro equipo de soporte ofrece asistencia limitada para los problemas introducidos por código personalizado. Si no estás seguro, te recomendamos trabajar con tu equipo de implementación de Advocate o con el equipo de poslanzamiento.
{% endhint %}

#### Editar el HTML o CSS

{% tabs %}
{% tab title="Editar tu micrositio" %}
Puedes editar el HTML o CSS para hacer más personalizaciones a tu micrositio usando el editor de HTML integrado. Aunque el editor de HTML permite mayor flexibilidad en el diseño del micrositio, ten en cuenta que no podemos solucionar ajustes realizados con HTML o CSS personalizados.

1. En el menú de navegación izquierdo, selecciona ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Contenido**.
2. En la tarjeta del micrositio, selecciona **Editar contenido**.
3. En la pestaña Micrositio, selecciona el diseño o la página cuyo código deseas editar.
4. Selecciona ![](/files/d58063e076d9e2391db1ab44051faff979a9ef81)![](/files/6ef9d178ea864b38517b31c04fccb408a8adb06a) **\[Vista de código]** en la barra de menú superior.
5. Agrega o modifica HTML y CSS según sea necesario.
6. El CSS se puede agregar de tres maneras:

   * Importando una hoja de estilo CSS externa
   * En la parte superior de la página, en una `<style>` etiqueta:

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

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

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

   * En línea, para aplicar un estilo a un elemento HTML específico:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Obtén recompensas cuando tu amigo use nuestro producto</h3> 
   ```
7. Selecciona ![](/files/df8f232b4ef4835728f454e8fe269695806c24f9) **\[Pincel]** para previsualizar tus actualizaciones.
8. Selecciona **Guardar borrador** para guardar, o **Publicar** para poner los cambios en vivo.
   {% endtab %}

{% tab title="Editar tu widget" %}
Puedes editar el HTML o CSS para hacer más personalizaciones a tu widget usando el editor de HTML integrado. Aunque el editor de HTML permite mayor flexibilidad en el diseño del widget, ten en cuenta que no podemos solucionar ajustes realizados con HTML o CSS personalizados.

1. En el menú de navegación izquierdo, selecciona ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Contenido**.
2. En la *Widgets* tarjeta, selecciona **Editar widget**.
3. En *Widgets del programa*, selecciona el widget que deseas editar.

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

1. En la barra de menú superior, selecciona ![](/files/d58063e076d9e2391db1ab44051faff979a9ef81)![](/files/6ef9d178ea864b38517b31c04fccb408a8adb06a) **\[Paréntesis]**.
2. Agrega o edita tu HTML en el cuerpo de la página.
3. El CSS se puede agregar de tres maneras:

   * Importando una hoja de estilo CSS externa
   * En la parte superior de la página, en una `<style>` etiqueta:

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

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

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

   * En línea, para aplicar un estilo a un elemento HTML específico:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Obtén recompensas cuando tu amigo use nuestro producto</h3> 
   ```
4. Selecciona ![](/files/df8f232b4ef4835728f454e8fe269695806c24f9) **\[Pincel]** para previsualizar tus actualizaciones.
5. Selecciona **Guardar borrador** para guardar, o **Publicar** para poner los cambios en vivo.
   {% endtab %}
   {% endtabs %}

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

Algunos componentes integrados en tu widget o micrositio no se pueden diseñar completamente a través del editor visual. En ciertos casos, puedes reemplazar su apariencia usando partes de CSS, que permiten un control más granular.

Si buscas realizar actualizaciones de estilo avanzadas, el equipo de impact.com puede asesorarte sobre lo que es posible y compartir cualquier selector relevante de partes de CSS. Si te interesa editar componentes con partes de CSS, ponte en contacto con tu equipo de implementación de Advocate o con el equipo de soporte poslanzamiento.


---

# 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/es/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.