> 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/widget-editor-overview.md).

# Resumen del editor de widgets

Tu programa Advocate ofrece un editor de selección y colocación que te permite personalizar la apariencia y el contenido de los widgets presentados a tus defensores de clientes.

#### Interfaz del editor de widgets

El editor de widgets de autoservicio tiene cuatro áreas principales:

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

{% tabs %}
{% tab title="Barra de menú superior" %}
La barra de menú en la parte superior de la página es donde puedes deshacer acciones, ver el código HTML y previsualizar el widget finalizado. Usa los iconos de escritorio, tableta o móvil para ver cómo se mostrará tu widget en dispositivos con distintos tamaños de pantalla.
{% endtab %}

{% tab title="Lienzo" %}
El lienzo muestra todos los componentes que componen tu widget. Puedes seleccionar componentes individuales para editarlos, o agregar nuevos y ver de un vistazo cómo aparecerán para tus participantes.
{% endtab %}

{% tab title="Panel deslizable izquierdo" %}
El menú de configuración del panel deslizable izquierdo es un panel plegable a la izquierda del lienzo. Aquí, puedes seleccionar **Capas** para ver una vista detallada de todos los componentes de tu widget, o seleccionar **Plantillas** para usar uno de nuestros widgets prediseñados. El **Configuración** botón te lleva al submenú de instalación del paquete.

Para una personalización aún más avanzada a nivel de marca, selecciona la opción Estilo del widget. Consulta [Personaliza widgets y micrositios con el editor de contenido](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) para obtener más información sobre las opciones de estilo disponibles para ti.
{% endtab %}

{% tab title="Componente" %}
El menú de componentes es un panel a la derecha del lienzo. Usa la **Agregar** pestaña para insertar nuevos componentes en el lienzo, y usa la **Editar** pestaña para hacer ajustes a lo que ya está allí.
{% endtab %}
{% endtabs %}

#### Solución de problemas

El widget tiene dos niveles de validación para comprobar errores en la ubicación de los componentes y en las propiedades de los componentes. Las razones comunes para recibir un mensaje de error incluyen:

* Falta un campo obligatorio
* Elegir un color no válido
* Introducir una URL no válida

Cuando tienes errores sin resolver, aparece un mensaje de advertencia en la parte superior derecha del lienzo que te notifica cuántos errores se encontraron.

<div data-with-frame="true"><figure><img src="/files/0642895e9b59fb03f03c5f67638150e89c9b3fa3" alt="" width="333"><figcaption></figcaption></figure></div>

Más información sobre [Personalización de widgets del programa](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md).

**Ver detalles del error sin resolver**

1. Seleccione **Detalles** en el mensaje de advertencia para obtener una breve explicación de lo que salió mal.
2. Ve al componente con el error de cualquiera de estas formas:
   * Seleccionando **Abrir capas**
   * Seleccionando el mensaje de explicación del error
3. Encuentra el componente con el error. Estará marcado con un icono de signo de exclamación rojo.
4. Selecciona el componente para abrir las propiedades en la **Editar** barra.
5. Haz los cambios necesarios.


---

# 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/widget-editor-overview.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.