> 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/widget-experiences/customize-program-widgets.md).

# Personalizar widgets del programa

#### Accede al editor de widgets

1. Desde el menú de navegación de la izquierda, selecciona ![](/files/fe7777a565e5a85579aeb006aa379fcc1b594c29) **\[Engage] → Contenido**.
2. En la *Widgets* tarjeta, selecciona **Editar widgets.**
3. Desde el menú deslizante de la izquierda, selecciona el nombre del widget que quieres editar.

   <div data-with-frame="true"><figure><img src="/files/37233cd0c40cdb79eecf099d9c44b944d1bfe688" alt="" width="347"><figcaption></figcaption></figure></div>

#### Personaliza tus widgets

{% stepper %}
{% step %}
**Paso 1: Elige una plantilla**

1. Desde el menú deslizante de la izquierda, debajo de *Widget actual*, selecciona **Plantillas**.
2. Selecciona **Aplicar plantilla** junto a la plantilla con la que quieres empezar.

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

{% hint style="success" %}
**Nota:** Si quieres previsualizar cómo se ve la plantilla sin confirmar el cambio, selecciona ![](/files/c794e6cbd673b28bfb6205747936fcff80880452) **\[Vista previa]** antes de guardar. Selecciona solo el botón **Guardar** una vez que estés listo para confirmar los cambios realizados.
{% endhint %}
{% endstep %}

{% step %}
**Paso 2: Ajusta el contenido del widget**

Puedes añadir, editar, mover o eliminar componentes para modificar el contenido que ven tus defensores del cliente en el widget.

{% hint style="success" %}
**Nota:** Para obtener una explicación de los diferentes elementos del editor de widgets, consulta [Resumen del editor de widgets](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
{% endhint %}

{% tabs %}
{% tab title="Añadir" %}

1. En el lado derecho de la página, en la pestaña del menú *Componente* , selecciona un grupo de componentes. **Añadir** menú
   * Obtén más información sobre los [componentes disponibles](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) y cómo se agrupan.
2. Selecciona el componente adecuado.
3. Selecciona el botón azul **Añadir a** donde quieras que aparezca el componente en el lienzo.

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

{% endtab %}

{% tab title="Editar" %}
Las propiedades que puedes editar dependerán del tipo de componente que hayas seleccionado. Por ejemplo, si seleccionas el componente *Imagen principal* , podrás seleccionar una nueva imagen y cambiar el color de fondo. Si seleccionas un elemento de solo texto, como un encabezado, entonces podrás modificar la fuente, el color del texto y el contenido del texto.

1. Selecciona el componente que quieres editar.
2. Usa las opciones de la pestaña *Componente* , selecciona un grupo de componentes. **Editar** para cambiar sus propiedades.

   * Si quieres insertar un enlace en un componente de texto, puedes [hacerlo editando el HTML del widget](/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).

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

{% endtab %}

{% tab title="Mover" %}

1. Dentro del lienzo, selecciona el componente que quieres mover.
2. Selecciona ![](/files/847415705ac16376afacf07b26ddaa0ace2f8998) **\[Mover]**.
   * Algunos componentes no se pueden mover. La opción ![](/files/847415705ac16376afacf07b26ddaa0ace2f8998) **\[Mover]** solo aparecerá si hay otra ubicación válida en el lienzo a la que pueda moverse el componente.
3. Selecciona el botón azul **Mover a** botón donde quieres que vaya el componente.

   * En lugar de arrastrar y soltar, tendrás que seleccionar el botón y luego seleccionar el destino.

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

{% endtab %}

{% tab title="Eliminar" %}

1. Selecciona el componente que quieres eliminar en el lienzo.
2. Selecciona ![](/files/ad4ad86cff003266435e74f932ba010d553f64bf) **\[Eliminar]**.

   <div data-with-frame="true"><figure><img src="/files/f6c2abc2da0ca2e80d5e43b6d9d64b5029743414" alt="" width="507"><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}
**Paso 3: Personaliza la apariencia y el tema del widget**

**Añade imágenes o logotipos**

1. A la derecha, desde la pestaña *Componente* , selecciona un grupo de componentes. **Añadir** selecciona la categoría **Componentes comunes** .
2. Selecciona una de estas opciones:
   * **Imagen principal superpuesta** (una imagen con texto superpuesto editable)
   * **Imagen** (una imagen simple sin texto encima)
3. Añade la imagen al lienzo.
4. Desde el *Menú de componentes* **Editar** selecciona la categoría **botón Elegir archivo** debajo del *Imagen* encabezado.

   <div data-with-frame="true"><figure><img src="/files/9545caba17e3b1ffeba1aa787ebbcb090c4d25da" alt="" width="295"><figcaption></figcaption></figure></div>

**Reemplaza imágenes o logotipos**

1. Dentro del lienzo, selecciona la foto que quieres cambiar.
2. En el **Editar** menú, selecciona ![](/files/72e67acc3cf947f86781fa68f4c3b653b247c1ec) **\[Eliminar]** y luego selecciona **botón Elegir archivo** para volver a subir una nueva imagen.

   <div data-with-frame="true"><figure><img src="/files/a1d9454abc0568550d6465d294de12f5cad20271" alt="" width="299"><figcaption></figcaption></figure></div>
3. Sube la imagen usando uno de estos métodos:
   * Arrastra y suelta la imagen
   * Busca un archivo en tu ordenador
   * En el *Dirección web* pestaña, pega la URL pública del archivo
4. Selecciona **Hecho**.

**Ajusta qué botones de compartir se muestran**

Puedes editar los botones de compartir existentes usando el menú. **Editar** Selecciona en el lienzo el botón de compartir que quieres editar.

1. pestaña, selecciona el nombre del sitio o servicio debajo de
2. En el **Editar** Medio de compartir *.* encabezado.

   <div data-with-frame="true"><figure><img src="/files/9e3dbb8594bf7c8d7de529fc68235385ca21db1f" alt="" width="296"><figcaption></figcaption></figure></div>

Añade un nuevo botón de compartir usando la pestaña **Añadir** Selecciona en el lienzo el botón de compartir que quieres editar.

1. Desde el **Añadir** selecciona **Compartir**.

   <div data-with-frame="true"><figure><img src="/files/872c186de4e36054f36b3c0ae9ee87e016b83a9f" alt="" width="283"><figcaption></figcaption></figure></div>
2. Selecciona la tarjeta adecuada.
3. Selecciona el botón azul **Añadir a** botón para colocar el componente en el lienzo.
   {% endstep %}

{% step %}
**Paso 4: Vista previa y guardar**

1. Previsualiza cómo aparecerá el widget a tus participantes seleccionando ![](/files/c794e6cbd673b28bfb6205747936fcff80880452) **\[Vista previa]** en la barra de menú superior.
   * Puedes alternar entre una vista previa de la experiencia para usuarios de ![](/files/9c034c0f789bc08d1fda611087efcdd4a83d4d88) **\[Escritorio]**, ![](/files/f050f84b259377727f0c90896557fe81109f5ed9) **\[Tableta]**, o ![](/files/f94071601cc10bff916480fa2d3ff80ea40aa783) **\[Móvil]** seleccionando el icono del dispositivo correspondiente.
2. Para volver a la interfaz de edición, selecciona ![](/files/0e445ebfd391671f02535547065408fa5c405b37) **\[Editar]** en la barra de menú superior.

   <div data-with-frame="true"><figure><img src="/files/82e3e8e652b9b2b62a9863667237fc3775548337" alt="" width="563"><figcaption></figcaption></figure></div>
3. **Guardar** tus cambios.

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>Advertencia:</strong> El editor de widgets no guarda automáticamente tus cambios. Haz clic en <strong>Guardar</strong> con frecuencia para asegurarte de no perder tu trabajo.</p></div>

Cuando selecciones **Guardar**, los cambios se añadirán a tu [borrador del programa](/brand/es/what-would-you-like-to-learn-about/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate.md).
{% endstep %}
{% endstepper %}

#### Opciones de personalización avanzadas

Los componentes avanzados te permiten incluir contenido condicional basado en el *correo electrónico*, *segmento*, o *campo personalizado*del participante. Por ejemplo, si quieres mostrar una clasificación solo a los participantes que sean suscriptores de nivel oro, el **componente de sección condicional en segmento** te permitirá hacerlo.

Puedes añadir componentes avanzados desde la pestaña **Añadir** . Configurarlos requiere un poco más de trabajo, ya que tendrás que introducir una [expresión de JSONata](http://docs.jsonata.org/overview.html) en el cuadro *Condición* que define la lógica de cuándo se cumple la condición. Ponte en contacto con nuestro [equipo de soporte](mailto:saasquatch-support@impact.com) si necesitas ayuda.

#### Más información

* [Edita el HTML de tu widget o micrositio para Advocate](#access-the-widget-editor-0-0)
* [Instala paquetes NPM personalizados para Advocate](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md)


---

# 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/widget-experiences/customize-program-widgets.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.