> 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).
# Edita el HTML y CSS de tu widget o micrositio para Advocate
Puedes personalizar tus widgets y tu micrositio de Advocate con HTML y CSS adicionales para alinearlos mejor con la apariencia de tu marca. Usando el editor HTML integrado de Advocate, puedes agregar estructura, estilos e incluso sobrescribir 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 determinadas ediciones 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:
* Ajustarse más a 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
* Sobrescribir el estilo de determinados componentes del widget o 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 posterior al lanzamiento.
{% endhint %}
#### Editar el HTML o el CSS
{% tabs %}
{% tab title="Edita tu micrositio" %}
Puedes editar el HTML o el CSS para realizar más personalizaciones en tu micrositio usando el editor HTML integrado. Aunque el editor HTML permite mayor flexibilidad en el diseño del micrositio, ten en cuenta que no podemos solucionar problemas de ningún ajuste realizado 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 Microsite, selecciona el diseño o la página cuyo código quieres editar.
4. Seleccione  **\[Vista de código]** en la barra de menú superior.
5. Agrega o modifica el HTML y el CSS según sea necesario.
6. El CSS se puede agregar de tres formas:
* Importando una hoja de estilo CSS externa
* En la parte superior de la página en una `
```
* En línea, para aplicar un estilo a un elemento HTML específico:
```programlisting
Recibe una recompensa cuando tu amigo use nuestro producto
```
7. Seleccione  **\[Pincel]** para previsualizar tus cambios.
8. Seleccione **Guardar borrador** para guardar, o **Publicar** para publicar los cambios.
{% endtab %}
{% tab title="Edita tu widget" %}
Puedes editar el HTML o el CSS para realizar más personalizaciones en tu widget usando el editor HTML integrado. Aunque el editor HTML permite mayor flexibilidad en el diseño del widget, ten en cuenta que no podemos solucionar problemas de ningún ajuste realizado 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. Debajo de *Widgets del programa*, selecciona el widget que quieras editar.
1. En la barra de menú superior, selecciona  **\[Corchetes]**.
2. Agrega o edita tu HTML en el cuerpo de la página.
3. El CSS se puede agregar de tres formas:
* Importando una hoja de estilo CSS externa
* En la parte superior de la página en una `
```
* En línea, para aplicar un estilo a un elemento HTML específico:
```programlisting
Recibe una recompensa cuando tu amigo use nuestro producto
```
4. Seleccione  **\[Pincel]** para previsualizar tus cambios.
5. Seleccione **Guardar borrador** para guardar, o **Publicar** para publicar los cambios.
{% endtab %}
{% endtabs %}
#### **Editar componentes mediante partes CSS**
Algunos componentes integrados de tu widget o micrositio no se pueden estilizar por completo a través del editor visual. En ciertos casos, puedes sobrescribir su apariencia usando partes CSS, lo que permite un control más granular.
Si quieres realizar actualizaciones de estilo avanzadas, el equipo de impact.com puede asesorarte sobre lo que es posible y compartir cualquier selector de partes CSS relevante. Si te interesa editar componentes con partes CSS, ponte en contacto con tu equipo de implementación de Advocate o con el equipo de soporte posterior al lanzamiento.
---
# 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
