> 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/customize-widgets-and-microsites-with-the-content-editor.md).

# Personalizar widgets y micrositios con el editor de contenido

El editor de contenido te permite crear widgets y micrositios que se ajustan perfectamente a la identidad de tu marca, garantizando una experiencia coherente y confiable para tus clientes. Un punto de contacto con una marca bien definida es fundamental para impulsar una alta participación y la adopción del programa.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FMsFCqNf5XpWg6l0OY9UU%2Fadv-150-5_1.mp4?alt=media&token=ee8653ae-d8ef-4519-a1f7-6b5ec0bc4214>" %}

## Controles centralizados de branding

Puedes encontrar y actualizar con facilidad los elementos de diseño principales de tu marca usando la opción de estilo del widget o del micrositio. Todos los ajustes de branding se encuentran en una sección dedicada al branding.

Los widgets o micrositios se ven diferentes según el contexto del usuario, como si ha iniciado sesión, si encuentra un error o si los visualiza en un dispositivo móvil. Las vistas previas de nuestro editor te permiten alternar fácilmente entre todos los posibles estados de tu widget o micrositio.

{% hint style="success" %}
**Nota**: La vista previa es más aplicable a los widgets (p. ej., widgets de acceso instantáneo) y componentes (p. ej., efectivo, canje de recompensas). Para previsualizar micrositios, tendrías que navegar a las diferentes páginas de micrositios para ver los estados.
{% endhint %}

Esto elimina la necesidad de completar acciones manualmente para ver cómo se verá un componente. Ahora puedes editar con confianza el texto y el diseño para cada paso del recorrido del usuario, incluyendo:

* Vistas con sesión iniciada frente a vistas sin sesión iniciada
* Mensajes de error y de éxito
* Diferentes pasos en un flujo de varias partes (como la verificación del pago en efectivo)

Para personalizar el estilo de tu branding:

1. En el menú de navegación izquierdo, selecciona ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenido**.
   * Para widgets, selecciona **Editar widgets** y para micrositios, selecciona **Editar contenido**.
2. En el menú izquierdo, selecciona si deseas editar en el micrositio o en el widget.
3. Selecciona la plantilla de página en la que deseas hacer ediciones y luego selecciona **Estilo del widget**/**Estilo del micrositio**.
4. Selecciona el color de tu marca para cambiar el color principal presente en tu widget o micrositio.
5. Luego, selecciona el estilo de fuente que te gustaría usar.
6. **\[Opcional]** Continúa con las opciones de estilo restantes para personalizar por completo la identidad de tu marca dentro del widget o micrositio.

<div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FTr3NiEK9I3MXi3u7YWmh%2Fdownload.gif?alt=media&amp;token=6af5544b-ff9a-4201-a363-f13f2b53b099" alt="" width="563"><figcaption></figcaption></figure></div>

<details>

<summary>Referencia de elementos del editor de estilo</summary>

| Elemento de estilo          | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Color principal de la marca | <p>Este color se usará en diferentes elementos de tu widget o micrositio, por lo que es importante completar este paso. Selecciona el color principal de tu marca.</p><p>Este color también se usa en las secciones de Botón principal y Botón secundario más abajo en las opciones de edición.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e6c8a0d69bf06ad5a2df6c27d1f09ae0ee432e90%2Fb55c15456cdbd904a6ff8a44d426f93a32958279e057958310f6d52bf4970a4f.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| Fuente                      | <p>Selecciona el estilo de fuente que te gustaría que aparezca dentro de tu widget o micrositio.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ec18fd738390db60d7a39412866bb3698259b14f%2Fcc6e451c17e08331fb9d41c74d5d87453a9ae21e79ea9850f91bab20b49a716a.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| Color                       | <p>Selecciona los distintos colores y acentos que te gustaría que aparecieran dentro de tu widget o micrositio:</p><p>• <strong>Fondo</strong></p><p>Selecciona el color que te gustaría que tuviera el fondo de tu widget o micrositio.</p><p>• <strong>Texto</strong></p><p>Puedes cambiar el color de la fuente tanto del texto principal como del texto atenuado dentro del widget o micrositio.</p><p>• <strong>Color de acento</strong></p><p>Cambia los colores de tus acentos. Estos incluyen elementos como pestañas o iconos dentro del widget o micrositio.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-55be9fef526da2d5ca0fb54102ef83ad55d03e4b%2F81b48cb986ad1a94cbefaf856b0debab102bb11279d654f5e91caf10764718de.jpg?alt=media" alt="" data-size="original"></p><p>• <strong>Colores adicionales</strong> <img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""></p><p>También puedes ajustar aún más el color y los acentos de cada elemento según el tipo de widget o micrositio.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0bece59f882d11a013783997bb2518dd4777f23c%2F2f4b167c662fe81c1de11e269d7bac69cc0422c2043a2087d21ace33273bee7c.jpg?alt=media" alt="" data-size="original"></p> |
| Botón principal             | <p>Selecciona el esquema de color que te gustaría para tu botón principal. También puedes ajustar la cantidad de píxeles para el radio del borde alrededor del botón.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c761dd03be42d0d41dc16f7a120c4fc2fdc433ac%2Fde0edb9123b43b0ce3a5e5c921ef75bb4f85d62426483bf97e46aacb7becd728.jpg?alt=media" alt="" data-size="original"></p><p>Expande la <img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Estado hover</strong> sección para seleccionar o cambiar aún más el color al que cambia tu botón cuando un usuario pasa el cursor sobre él o interactúa con él.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aa31df8e922e6a978fbe88542452bbbaf929c848%2Ff99838a5337db16b96652353e550fdeb7df6532461e4b0e324d579065c4bc4d7.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                         |
| Botón secundario            | <p>Selecciona el esquema de color que te gustaría para tu botón secundario. También puedes ajustar la cantidad de píxeles para el radio del borde alrededor del botón.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aba04be238a4411ef008e443e94dc3f15b0b2923%2Fce809941b33f15de27de52cf21ed8d5cf5b4e36991d8fef0b0d70f72f3b8c9ab.jpg?alt=media" alt="" data-size="original"></p><p>Expande la <img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Estado hover</strong> sección para seleccionar o cambiar aún más el color al que cambia tu botón cuando un usuario pasa el cursor sobre él o interactúa con él.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-561ddad6d0fa2db588ba4837bd6cce5275c02b3d%2Fb20584dcfe328bb0cc164b094945aa4bf2c8fb5fe0fb809c83073204fd43798f.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                        |
| Borde                       | <p>Cambia el color y el contorno del borde de tus componentes, como tablas o tarjetas, dentro de tu widget o micrositio.</p><p>• <strong>Color</strong></p><p>Selecciona el color de tu borde.</p><p>• <strong>Grosor</strong></p><p>Introduce una unidad en píxeles para determinar el grosor de tu borde.</p><p>• <strong>Radio del borde</strong></p><p>Introduce una unidad en píxeles para determinar el radio de tu borde.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ad49b6545fa9d0ffa189127095f15ad904d62b26%2F87161ed257680c7779e29077bc360366c09ef62774fb3917cdc33621b85aa064.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| Campos de formulario        | <p>Selecciona el color que te gustaría para los distintos campos de formulario dentro de tu widget o micrositio. Estos incluyen cualquier campo de entrada que el usuario complete. También puedes introducir una unidad en píxeles para cambiar el tamaño del radio del borde.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7ca9a1cbe9bd4d20e58a6a912c70e6b68d69832e%2Fd56db5a066f633dcafa399ca40df9b9a36cb6b8dc116695eedc872746af2a5b4.jpg?alt=media" alt="" data-size="original"></p><p>Expande la <img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Opciones avanzadas</strong> sección para personalizar aún más los colores del estado seleccionado o del estado hover de tus campos de formulario.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1316f14f290be578906e018e061c38320ba9daac%2F1c704526ce54eccb73066cd4a924cc7b59fdb9bfb8842b648b385ea28923ea0e.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                             |
| Tamaño del widget           | <p>Cambia el tamaño de tus widgets dentro de la plantilla. Puedes ajustar las dimensiones tanto de los widgets incrustados como de los emergentes. Selecciona un tamaño mínimo y máximo y, en las opciones desplegables, selecciona la medida de las unidades. Elige establecer las medidas por píxel o por porcentaje.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b4d9c97d0dafbbc79cd2782a413fc8eaad21e8d3%2F7109281d478bf7f826b153d935ff7b87f62a1a80c7d6b23aac6d47752c8ae4cb.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |

</details>


---

# 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/customize-widgets-and-microsites-with-the-content-editor.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.