> 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

#### Acceda al editor de widgets

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

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

#### Personalice sus widgets

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

1. En el menú desplegable izquierdo, debajo de *Widget actual*, seleccione **Plantillas**.
2. Seleccione **Aplicar plantilla** junto a la plantilla con la que desea comenzar.

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

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

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

Puede agregar, editar, mover o eliminar componentes para modificar el contenido que sus defensores de clientes ven en el widget.

{% hint style="success" %}
**Nota:** Para obtener una explicación de los diferentes elementos del editor de widgets, consulte [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="Agregar" %}

1. En el lado derecho de la página, en la *Componente* pestaña del menú, seleccione un grupo de componentes. **Agregar** pestaña, seleccione un grupo de componentes.
   * Obtenga 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 están agrupados.
2. Seleccione el componente adecuado.
3. Seleccione el botón azul **Agregar a** donde desea que el componente aparezca 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 puede editar dependerán del tipo de componente que haya seleccionado. Por ejemplo, si selecciona el componente *Imagen principal* componente, podrá seleccionar una nueva imagen y cambiar el color de fondo. Si selecciona un elemento de solo texto, como un encabezado, entonces puede modificar la fuente, el color del texto y el contenido del texto.

1. Seleccione el componente que desea editar.
2. Use las opciones de la *Componente* pestaña del menú, seleccione un grupo de componentes. **Editar** pestaña para cambiar sus propiedades.

   * Si desea insertar un enlace en un componente de texto, puede [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, seleccione el componente que desea mover.
2. Seleccione ![](/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 se pueda mover el componente.
3. Seleccione el botón azul **Mover a** botón donde desea que vaya el componente.

   * En lugar de un enfoque de arrastrar y soltar, deberá 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. Seleccione el componente que desea eliminar en el lienzo.
2. Seleccione ![](/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: Personalizar la apariencia y el tema del widget**

**Agregar imágenes o logotipos**

1. A la derecha, en la *Componente* pestaña del menú, seleccione un grupo de componentes. **Agregar** pestaña, seleccione la categoría **Componentes comunes** categoría.
2. Seleccione una de estas opciones:
   * **Imagen principal superpuesta** (una imagen con texto editable superpuesto)
   * **Imagen** (una imagen simple sin texto encima)
3. Agregue la imagen al lienzo.
4. En el *del menú de componentes* **Editar** pestaña, seleccione la categoría **Elegir archivo** botón debajo del encabezado *Imagen* encabezado.

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

**Reemplazar imágenes o logotipos**

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

   <div data-with-frame="true"><figure><img src="/files/a1d9454abc0568550d6465d294de12f5cad20271" alt="" width="299"><figcaption></figcaption></figure></div>
3. Cargue la imagen usando uno de estos métodos:
   * Arrastre y suelte la imagen
   * Busque un archivo en su computadora
   * En el *Dirección web* pestaña, pegue la URL pública del archivo
4. Seleccione **Listo**.

**Ajustar qué botones para compartir se muestran**

Puede editar los botones para compartir existentes usando el **Editar** menú.

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

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

Agregue un nuevo botón para compartir usando la **Agregar** menú.

1. En el **Agregar** pestaña, seleccione **Compartir**.

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

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

1. Obtenga una vista previa de cómo aparecerá el widget para sus participantes seleccionando ![](/files/c794e6cbd673b28bfb6205747936fcff80880452) **\[Vista previa]** en la barra de menú superior.
   * Puede cambiar 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, seleccione ![](/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** sus 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 sus cambios. Haga clic en <strong>Guardar</strong> con frecuencia para asegurarse de no perder su trabajo.</p></div>

Cuando seleccione **Guardar**, los cambios se agregarán a su [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 le permiten incluir contenido condicional que se basa en el *correo electrónico*, *segmento*, o *campo personalizado*del participante. Por ejemplo, si desea mostrar una tabla de clasificación solo para participantes que sean suscriptores de nivel oro, el componente **sección condicional por segmento** le permitirá hacerlo.

Puede agregar componentes avanzados desde la **Agregar** pestaña. Configurarlos requiere un poco más de trabajo, ya que deberá ingresar una [expresión JSONata](http://docs.jsonata.org/overview.html) en el *Condición* cuadro que define la lógica de cuándo se cumple la condición. Comuníquese con nuestro [equipo de soporte](mailto:saasquatch-support@impact.com) si necesita ayuda.

#### Más información

* [Edite el HTML de su widget o micrositio para Advocate](#access-the-widget-editor-0-0)
* [Instale 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.