> 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).

# Descripción general del editor de widgets

Tu programa Advocate ofrece un editor de selección y colocación 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 nuevos y ver de un vistazo cómo aparecerán para tus participantes.
{% endtab %}

{% tab title="Panel deslizante izquierdo" %}
El menú de configuración del panel deslizante 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 predefinidos. El **Configuración** botón te lleva al submenú de instalación de paquetes.

Para un estilo aún más avanzado 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.
{% 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 capas de validación para comprobar errores en la colocación de 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, 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>

Obtenga 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 de errores sin resolver**

1. Seleccione **Detalles** en el mensaje de advertencia para una breve explicación de lo que salió mal.
2. Ve al componente con el error mediante cualquiera de estas opciones:
   * Seleccionar **Abrir capas**
   * Seleccionar el mensaje de explicación del error
3. Busca 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. Realiza 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.