> 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 arrastrar y soltar que te permite personalizar el aspecto 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 terminado. Usa los iconos de escritorio, tableta o móvil para ver cómo aparecerá tu widget en dispositivos con distintos tamaños de pantalla.
{% endtab %}

{% tab title="Lienzo" %}
El lienzo muestra todos los componentes que forman tu widget. Puedes seleccionar componentes individuales para editarlos, o añadir otros nuevos y ver de un vistazo cómo se mostrarán a tus participantes.
{% endtab %}

{% tab title="Panel lateral izquierdo" %}
El menú de configuración del panel lateral 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 un estilo aún más refinado a nivel de marca, selecciona la opción Estilo del widget. Consulta [Personalizar 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 en lo que ya está allí.
{% endtab %}
{% endtabs %}

#### Solución de problemas

El widget tiene dos capas de validación para comprobar errores en la colocación de componentes y en sus propiedades. 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, se muestra 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>

Obtén más información sobre [Personalización de los 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 de errores sin resolver**

1. Selecciona **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 maneras:
   * 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:

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

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.