# 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/78e98f7ea12ace8113935dab68ece328120cdcef" alt=""><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 diferentes 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 añadir 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 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 pestaña **Añadir** para insertar nuevos componentes en el lienzo, y usa la pestaña **Editar** 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 ubicación de los 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, 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=""><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 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:
   * Seleccionar **Abrir capas**
   * Seleccionando el mensaje de explicación del error
3. Encuentra el componente con el error. Estará marcado con un icono de exclamación rojo.
4. Selecciona el componente para abrir las propiedades en la barra **Editar** .
5. Haz los cambios necesarios.


---

# Agent Instructions: 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.