> 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="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F5lBstm39QZFddtyAHWzK%2FCanvas%20(2).png?alt=media&#x26;token=b8ae9b78-8cea-425e-8cd8-e35a0b97535a" 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 diferentes 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 se mostrarán a tus participantes. Arrastra un componente a una nueva posición en el lienzo para reordenarlo.
{% 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 Personalizar widgets y micrositios con el editor de contenido 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 pestaña **Añadir** para insertar nuevos componentes en el lienzo, y usa la pestaña **Editar** para realizar ajustes en 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="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-511216419b1ffaa7cf19cda9c94f06eedbbdaabc%2Fb0790ca38faffb4d36e8ed5d551995d0231df77a9958ffb98e857740cd207626.jpg?alt=media" alt="" width="333"><figcaption></figcaption></figure></div>

Obtén más información sobre cómo personalizar los widgets del programa.

## **Ver detalles de los errores sin resolver**

1. Selecciona **Detalles** en el mensaje de advertencia para ver una breve explicación de lo que salió mal.
2. Ve al componente con el error de una 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 exclamación roja.
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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.