# Personalizar widgets del programa

#### Accede al editor de widgets

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

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

#### Personaliza tus widgets

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

1. En el menú lateral desplegable izquierdo, 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/77af005300a8555037a30e48be0083444ae61866" alt="" width="563"><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 **Guardar** botón una vez que estés listo para confirmar los cambios realizados.
{% endhint %}
{% endstep %}

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

Puedes agregar, editar, mover o quitar componentes para modificar el contenido que verán tus embajadores de clientes en el widget.

{% hint style="success" %}
**Nota:** Para una explicación de los distintos elementos del editor de widgets, consulta [Descripción general 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 *Componente* del menú, **Añadir** selecciona un grupo de componentes.
   * 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 **Agregar 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 *Imagen principal* componente, podrás seleccionar una nueva imagen y cambiar el color de fondo. Si seleccionas un elemento solo de 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* del menú, **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 el componente pueda desplazarse.
3. Selecciona el botón azul **Mover a** botón donde quieres que vaya el componente.

   * En lugar de usar un método 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 en el lienzo el componente que quieres quitar.
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**

**Agrega imágenes o logotipos**

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

   <div data-with-frame="true"><figure><img src="/files/3d686ca762feffa4819c08f2bc1f2b1df9f69698" alt="" width="353"><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 **Elegir archivo** para volver a subir una nueva imagen.

   <div data-with-frame="true"><figure><img src="/files/2fdc8fb13f73c4458a9d4941f983fe406975b6de" alt="" width="351"><figcaption></figcaption></figure></div>
3. Sube la imagen usando uno de estos métodos:
   * Arrastra y suelta la imagen
   * Busca un archivo en tu computadora
   * 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 **Editar** menú.

1. Selecciona en el lienzo el botón de compartir que quieres editar.
2. En el **Editar** pestaña, selecciona el nombre del sitio o servicio debajo de *Medio para compartir* encabezado.

   <div data-with-frame="true"><figure><img src="/files/929e8514e94c8e2b16ee444ce43e3be9f011f44c" alt="" width="356"><figcaption></figcaption></figure></div>

Agrega un nuevo botón de compartir usando la pestaña **Añadir** menú.

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

   <div data-with-frame="true"><figure><img src="/files/1560f2021ad934b177a1fd7e677205cc8901e096" alt="" width="339"><figcaption></figcaption></figure></div>
2. Selecciona la tarjeta adecuada.
3. Selecciona el botón azul **Agregar 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 para tus participantes seleccionando ![](/files/c794e6cbd673b28bfb6205747936fcff80880452) **\[Vista previa]** en la barra de menú superior.
   * Puedes alternar entre una vista previa de la experiencia para ![](/files/9c034c0f789bc08d1fda611087efcdd4a83d4d88) **\[Escritorio]**, ![](/files/f050f84b259377727f0c90896557fe81109f5ed9) **\[Tableta]**, o ![](/files/f94071601cc10bff916480fa2d3ff80ea40aa783) **\[Móvil]** usuarios 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/f5d5028727fc201713982315856579aeb4d9972f" alt=""><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 agregará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 avanzadas de personalización

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 tabla de clasificación solo a los participantes que sean suscriptores de nivel oro, el componente **sección condicional basada en segmento** te permitirá hacerlo.

Puedes agregar 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 JSONata](http://docs.jsonata.org/overview.html) en el *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: 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:

```
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>
```

The question should be specific, self-contained, and written in natural language.
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.