# Descripción general del editor de widgets

Su programa Advocate ofrece un editor de arrastrar y soltar que le permite personalizar la apariencia y el contenido de los widgets que se presentan a sus 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f343272a45c0ebe8a90036c489173dbdc96cb155%2F692288b3de9942b25196de77402f176c0b491974bcb06f24239e69499e3dca88.jpg?alt=media" 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 puede deshacer acciones, ver el código HTML y obtener una vista previa del widget terminado. Use los iconos de escritorio, tableta o móvil para ver cómo aparecerá su widget en dispositivos con diferentes tamaños de pantalla.
{% endtab %}

{% tab title="Lienzo" %}
El lienzo muestra todos los componentes que integran su widget. Puede seleccionar componentes individuales para editarlos, o agregar nuevos y ver de un vistazo cómo se mostrarán a sus participantes.
{% endtab %}

{% tab title="Panel lateral izquierdo" %}
El menú de configuración desplegable izquierdo es un panel plegable a la izquierda del lienzo. Aquí, puede seleccionar **Capas** para ver una vista detallada de todos los componentes de su widget, o seleccionar **Plantillas** para usar uno de nuestros widgets predefinidos. El **Configuración** botón lo lleva al submenú de instalación de paquetes.

Para una personalización adicional a nivel de marca, seleccione la opción Estilo de Widget. Vea [Personalizar Widgets y Micrositios con el Editor de Contenido](https://help.impact.com/brand/es/sobre-que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) 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. Use la **Añadir** pestaña para insertar nuevos componentes en el lienzo, y use la **Editar** pestaña para hacer ajustes a lo que ya está allí.
{% endtab %}
{% endtabs %}

#### Resolución de problemas

El widget tiene dos capas de validación para verificar 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
* Ingresar una URL no válida

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

<div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-511216419b1ffaa7cf19cda9c94f06eedbbdaabc%2Fb0790ca38faffb4d36e8ed5d551995d0231df77a9958ffb98e857740cd207626.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

Obtenga más información sobre [Personalización de Widgets del Programa](https://help.impact.com/brand/es/sobre-que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets).

**Ver detalles de errores no resueltos**

1. Selecciona **Detalles** en el mensaje de advertencia para una breve explicación de lo que salió mal.
2. Vaya al componente con el error de cualquiera de las siguientes maneras:
   * Seleccionando **Abrir Capas**
   * Seleccionando el mensaje de explicación del error
3. Encuentre el componente con el error. Estará marcado con un icono de signo de exclamación rojo.
4. Seleccione el componente para abrir las propiedades en la **Editar** barra.
5. Realice los cambios requeridos.
