> 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. En el menú de navegación izquierdo, selecciona  **\[Engage] → Contenido**.
2. En la *Widgets* tarjeta, selecciona **Editar widgets.**
3. En el menú lateral desplegable de la izquierda, selecciona el nombre del widget que quieres editar.
## Personaliza tus widgets
{% stepper %}
{% step %}
### **Paso 1: Elige una plantilla**
1. En el menú lateral desplegable de la izquierda, debajo de *Widget actual*, selecciona **Plantillas**.
2. Selecciona **Aplicar plantilla** junto a la plantilla con la que quieres empezar.
{% hint style="success" %}
**Nota:** Si quieres previsualizar cómo se ve la plantilla sin aplicar el cambio, selecciona  **\[Vista previa]** antes de guardar. Solo selecciona el **Guardar** botón cuando estés listo para aplicar 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 ven tus defensores de clientes en el widget.
{% hint style="success" %}
**Nota:** Para una explicación de los diferentes elementos del editor de widgets, consulta el resumen del Editor de widgets.
{% endhint %}
{% tabs %}
{% tab title="Agregar" %}
1. En el lado derecho de la página, en el *Componente* del menú **Agregar** pestaña, selecciona un grupo de componentes.
* Obtén más información sobre los componentes disponibles 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.
{% 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, 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 en la *Componente* del menú **Editar** pestaña para cambiar sus propiedades.
* Si quieres insertar un enlace en un componente de texto, puedes hacerlo editando el HTML del widget.
{% endtab %}
{% tab title="Mover" %}
1. Dentro del lienzo, selecciona y mantén presionado el componente que quieres mover.
2. Arrastra el componente a su nueva posición en el lienzo y luego suéltalo para colocarlo en su lugar.
* Algunos componentes no se pueden mover. Si un componente no se puede arrastrar, no se desplazará cuando intentes cambiarlo de posición.
{% endtab %}
{% tab title="Eliminar" %}
1. Selecciona el componente que quieres eliminar en el lienzo.
2. Selecciona  **\[Eliminar]**.
{% endtab %}
{% endtabs %}
{% endstep %}
{% step %}
### **Paso 3: Personaliza la apariencia y el tema del widget**
#### **Añade imágenes o logotipos**
1. A la derecha, en la *Componente* del menú **Agregar** pestaña, selecciona la **Componentes comunes** categoría.
2. Selecciona cualquiera de los siguientes:
* **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** pestaña, selecciona la **Elegir archivo** botón debajo del *Imagen* encabezado.
#### **Reemplaza imágenes o logotipos**
1. Dentro del lienzo, selecciona la foto que quieres cambiar.
2. En el **Editar** menú, selecciona  **\[Eliminar]** y luego selecciona **Elegir archivo** para volver a cargar una nueva imagen.
3. Carga 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 la *Medio de compartición* encabezado.
Añade un nuevo botón de compartir usando la **Agregar** menú.
1. Desde el **Agregar** pestaña, selecciona **Compartir**.
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: Previsualiza y guarda**
1. Previsualiza cómo aparecerá el widget para tus participantes seleccionando  **\[Vista previa]** en la barra de menú superior.
* Puedes alternar entre una vista previa de la experiencia para  **\[Escritorio]**,  **\[Tableta]**, o  **\[Móvil]** los usuarios seleccionando el icono del dispositivo correspondiente.
2. Para volver a la interfaz de edición, selecciona  **\[Editar]** en la barra de menú superior.
3. **Guardar** tus cambios.
{% hint style="warning" %}
**Advertencia:** El editor de widgets no guarda automáticamente tus cambios. Haz clic en **Guardar** con frecuencia para asegurarte de no perder tu trabajo.
{% endhint %}
Cuando selecciones **Guardar**, los cambios se añadirán al borrador de tu programa.
{% 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*. Por ejemplo, si quieres mostrar una tabla de clasificación solo a los participantes que sean suscriptores de nivel oro, el **componente de sección condicional por segmento** te permitirá hacerlo.
Puedes añadir componentes avanzados desde la **Agregar** pestaña. 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* campo 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 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/widget-experiences/customize-program-widgets.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.
