Constructor de widgets
El Constructor de widgets genera componentes HTML autónomos — formularios de contacto, formularios de opinión, tablas de precios — que aparecen directamente en la ventana de chat cuando la IA los activa o el visitante los abre desde el menú del widget.
Un widget del constructor recopila datos (guardados en la pestaña Envíos). No llama a transportistas ni catálogos de productos — eso lo hacen las Integraciones, que devuelven resultados como texto en el chat o un carrusel de productos.
Abrir el constructor
Ve a la pestaña Capacidades y cambia a la subpestaña AI-Constructor (también accesible desde el enlace rápido AI-Constructor en la barra lateral). Haz clic en Nuevo widget.
Plantillas rápidas
Arriba hay dos plantillas de inicio:
| Plantilla | Qué genera |
|---|---|
| Formulario de contacto | Campos de nombre, email, mensaje y botón Enviar |
| Tabla de precios | Una visualización de precios de tres niveles con interruptor mensual/anual |
Haz clic en una plantilla para generarla de inmediato, o sáltalas y describe la tuya abajo.
Prompt personalizado
Escribe una descripción del widget que quieres en el campo. Sé tan específico como desees:
Un formulario de opinión con valoración de 1 a 5 estrellas, un campo de comentario y
un botón «Enviar opinión». Estilízalo con fondo oscuro y acentos naranjas.
La IA genera el widget y muestra una vista previa en vivo dentro de una maqueta de chat, para que veas exactamente cómo lo verá un visitante.
Iterar y refinar
Tras la generación, bajo la vista previa aparece el campo «Pide un cambio…». Describe qué quieres distinto:
Haz los botones redondeados y aumenta el tamaño de fuente de los precios.
Añade una nota bajo la tabla de precios: «Todos los precios sin IVA».
Cada iteración es una nueva generación de IA y actualiza la vista previa.
Guardar el widget
Cuando todo encaje, introduce:
- Nombre del widget — etiqueta interna (p. ej. «Tabla de precios – principal»).
- Condición de activación — la condición en lenguaje natural de cuándo la IA muestra este widget.
- Mostrar en el menú del widget — opcionalmente lístalo también en el menú de lanzamiento ＋, para que los visitantes puedan abrirlo a demanda (independiente de la activación por IA).
Muestra la tabla de precios cuando el visitante pregunte por planes, precios o qué incluye.
Un widget puede activarse por IA, estar en el menú, ambos o ninguno — pero para mostrarse debe estar activado. Haz clic en Guardar; el widget aparece en el resumen de Capacidades como una tarjeta con miniatura de vista previa.
Gestionar widgets
Desde el resumen de Capacidades puedes:
- Activar/desactivar un widget.
- Editar — reabre el constructor con el HTML existente para refinarlo.
- Eliminar — elimina el widget de forma permanente.
Cómo aparecen los widgets en el chat
Cuando la IA detecta una coincidencia con la condición (o el visitante abre el widget desde el menú ＋), se renderiza como un mensaje del bot. El widget se ejecuta en un <iframe> aislado, por lo que no puede afectar tu página, y ajusta su tamaño al contenido.
Si el widget tiene un formulario, el visitante lo envía desde el chat. Tras el envío, el formulario se reemplaza por una confirmación neutra «Enviado», y los datos se guardan en tu pestaña Envíos.
Consejos
- Mantén los widgets enfocados en una sola acción — una tabla de precios que además tiene formulario de contacto y carrusel de productos abruma.
- Haz las condiciones de activación específicas para evitar que el widget aparezca en conversaciones no relacionadas.
- Los widgets generados usan solo CSS en línea y JavaScript puro — sin bibliotecas externas ni peticiones de red.
- El endpoint de renderizado fuerza el ancho completo del widget, así que se adapta al tamaño que hayas fijado. Si un diseño sigue viéndose mal, pide: «Haz el contenedor width:100% para que llene el espacio».