Con la Interfaz interactiva, tu agente de IA muestra al contacto un formulario, botones, un carrusel o contenido multimedia en el chat, en lugar de limitarse a hacer preguntas en texto sin formato. Al terminar esta guía, tendrás una acción que tu agente de IA utiliza en los momentos adecuados: por ejemplo, el contacto elige una fecha en un calendario o pulsa una respuesta, y el agente de IA continúa de inmediato teniendo en cuenta su elección.
Necesitas un agente de IA y un rol con permiso para editar la configuración de Connect AI: en la página «Roles», en la pestaña «Connect AI», la fila «Administration» debe estar configurada como «Edit». Sin este permiso, no verás los botones «Add». También puedes añadir una acción de API o MCP que proporcione datos, como franjas horarias disponibles, o que guarde las respuestas.
Antes de empezar, ten en cuenta que un formulario solo aparece de forma interactiva en Website Messenger. En los demás canales de texto, el contacto recibe una pregunta en texto sin formato; en las llamadas, el agente de IA no ofrece la acción. Consulta «On which channels does each element appear?».
Cada elemento interactivo es una acción independiente del tipo «Show interactive element». Encontrarás estas acciones en el menú Connect AI, en Actions > «Interactive UI». La Interfaz interactiva está disponible únicamente para los agentes de IA, no para Copilot.
¿Qué elementos hay?
Una acción muestra exactamente uno de estos elementos:
- Formulario: defines un encabezado y los campos, por ejemplo, un intervalo de fechas, una opción y un campo de texto. El contacto rellena el formulario y envía todas sus respuestas a la vez.
- Botones: el agente de IA redacta un mensaje con respuestas rápidas y enlaces que el contacto puede pulsar. En Website Messenger y, opcionalmente, en WhatsApp, puede incluir una imagen o un vídeo encima del mensaje.
- Carrusel: el agente de IA presenta opciones en tarjetas que se pueden deslizar, con una imagen, una descripción y botones.
- Contenido multimedia: el agente de IA comparte una imagen, un vídeo o un documento con un pie de foto.
En cada conversación, el agente de IA redacta el contenido en el idioma del contacto: en un formulario, las opciones, las franjas horarias y los límites de fechas; en los demás elementos, todo el texto, incluidas las tarjetas y los botones. En el campo «How to execute this action» defines las pautas que debe seguir.
Toda acción nueva empieza como un formulario. «+ Add element manually» permite añadir campos de formulario, así como botones, un carrusel o contenido multimedia; el grupo «Interactive elements» de ese menú solo incluye estos tres últimos elementos.
¿En qué canales aparece cada elemento?
Los elementos aparecen de forma interactiva en los siguientes canales, es decir, el contacto ve y utiliza el propio elemento. Si un elemento no aparece de forma interactiva, el contacto recibe una pregunta en texto sin formato.
- Formulario: interactivo solo en Website Messenger; en WhatsApp, Facebook y los demás canales de texto, se muestra como una pregunta de texto.
- Botones: interactivos en Website Messenger, WhatsApp y Facebook; en los demás canales de texto, se muestra una pregunta de texto.
- Website Messenger: todas las respuestas y los enlaces aparecen directamente en el mensaje, con una imagen o un vídeo encima si se desea.
- WhatsApp: hasta tres respuestas aparecen como botones; de cuatro a diez respuestas aparecen en una lista que el contacto abre con un botón. Encima del mensaje aparece una imagen o un vídeo. Los dos primeros enlaces llegan como mensajes independientes; los enlaces adicionales se agrupan en un solo mensaje de texto.
- Facebook: hasta tres respuestas aparecen como botones; si hay más de tres, aparecen como respuestas rápidas, es decir, sugerencias pulsables junto al mensaje. No se muestran imágenes ni vídeos, y todos los enlaces llegan juntos en un único mensaje de texto.
- Carrusel y Contenido multimedia: interactivos en Website Messenger y WhatsApp; en Facebook y los demás canales de texto, se muestran como una pregunta de texto. En WhatsApp, cada tarjeta necesita una imagen o un vídeo y el mismo número de respuestas rápidas (como máximo, dos); si falta algo, se indica al agente de IA que corrija las tarjetas. En «How do I show buttons, a carousel or media?» se explica de dónde pueden proceder las imágenes, los vídeos y los archivos.
Los demás canales de texto son Instagram, Telegram, SMS, correo electrónico, Threema y los canales personalizados. En las llamadas, el agente de IA no ofrece ninguna acción de la Interfaz interactiva.
El agente de IA redacta la pregunta de texto para que solicite la misma información que el elemento. Por ejemplo, en un formulario con un intervalo de fechas y una selección de habitación, envía un mensaje preguntando qué días y qué habitación desea reservar el contacto. Se omiten las imágenes, los vídeos y los botones; solo en el caso del contenido multimedia se añade al texto el enlace al archivo.
El contacto responde con un mensaje normal, el agente de IA lo evalúa y no vuelve a enviar el elemento.
Si WhatsApp o Facebook no pueden mostrar un elemento, el contacto recibe una pregunta de texto, como en los demás canales. Esto puede ocurrir, por ejemplo, cuando WhatsApp rechaza el mensaje o no puede cargar un archivo multimedia, o cuando los botones de Facebook solo contienen enlaces y no respuestas.
En la página de configuración de cada acción, una nota encima del formulario o del elemento muestra cómo se presenta. Enumera todos los tipos de canal, incluidos los que aún no has configurado:
- «Interactive on:» enumera los canales en los que el contacto ve el propio elemento. La nota llama «Website» a Website Messenger.
- «Shown as a text question on:» enumera los canales en los que el contacto recibe la pregunta en texto sin formato.
- «Not offered on:» enumera los canales en los que el agente de IA no ofrece la acción, es decir, «Phone».
Comprueba «Interactive on:» antes de guardar la acción, ya que después no podrás cambiar el elemento. Si quieres que el elemento aparezca de forma interactiva en WhatsApp, elige botones, un carrusel o contenido multimedia.
¿Qué debo saber antes de guardar?
El elemento de una acción queda fijado en cuanto guardas la acción. Después no se puede convertir un formulario en un carrusel ni los botones en contenido multimedia. Para usar otro elemento, crea una acción nueva.
Por ahora, no se pueden combinar botones, un carrusel o contenido multimedia con campos de formulario. Mientras el formulario tenga campos, el grupo «Interactive elements» del menú aparecerá atenuado y se mostrará una nota debajo. Antes de guardar, elimina los campos; después de guardar, crea una acción nueva.
Todo lo demás sigue siendo editable: el nombre, los campos «When to trigger this action» y «How to execute this action», y, en el caso de un formulario, el encabezado y los campos. También puedes añadir, cambiar el nombre, reordenar y eliminar campos después de guardar.
¿Cómo creo una acción de Interfaz interactiva?
En el menú Connect AI, abre Actions > «Interactive UI» y haz clic en «Add». Se abrirá directamente la página de configuración de la nueva acción «Show interactive element».
También puedes crear la acción desde un agente de IA: en la pestaña «Actions» del agente, haz clic en «Add», selecciona la categoría «Interactive UI» en la ventana «Create a new action» y, a continuación, la tarjeta «Show interactive element». Se abrirá la misma página de configuración; esto no activa la acción para ese agente de IA.
En «Action name», asigna a la acción un nombre claro de hasta 64 caracteres, ya que así es como el agente de IA reconoce su función. El nombre debe empezar por una letra de la a a la z, mayúscula o minúscula, y terminar con una letra o un número; también se permiten números, espacios, guiones y guiones bajos en medio, pero no diéresis, tildes ni otros caracteres. De lo contrario, el campo muestra «Only letters, numbers, spaces, hyphens, and underscores are allowed.»
En «When to trigger this action», describe cuándo debe mostrar el elemento el agente de IA en lugar de hacer una pregunta en texto sin formato, por ejemplo, cuando el contacto deba elegir una fecha, una franja horaria o una de varias opciones.
Si el agente de IA debe trabajar con datos reales, la acción de API o MCP correspondiente ya debe existir; las páginas API Actions y MCP explican cómo crearlas. A continuación, describe en «How to execute this action» de dónde proceden los datos y dónde se guardan las respuestas: por ejemplo, una acción que proporciona las opciones o franjas horarias disponibles y otra que guarda las respuestas del contacto. También puedes definir valores fijos y reglas en «How to execute this action». Los consejos a la derecha de la página de configuración incluyen ejemplos para ambos campos.
Si no indicas una fuente de datos, el agente de IA elegirá límites razonables por su cuenta, como un calendario para los próximos días. En ese caso, no conocerá tu disponibilidad real.
Ten en cuenta que el agente de IA puede transmitir a los contactos, en sus respuestas, texto de los campos «When to trigger this action» y «How to execute this action». Está bien incluir una regla para ofrecer solo las fechas de tu acción de API; no incluyas credenciales, números de teléfono internos ni datos de clientes concretos.
¿Cómo creo un formulario?
En la parte inferior de la página de configuración, debajo de «Describe what you need and let AI build it for you», describe los datos que quieres recopilar y haz clic en «Generate». La interfaz no le asigna un nombre específico a este cuadro; en esta guía lo llamamos el creador de formularios con IA. Solo ayuda a configurar la acción, no durante la conversación.
El creador de formularios con IA añade los campos correspondientes y los marca como «AI generated». Si el encabezado está vacío, también sugiere uno. Los campos existentes se conservan y no se añaden campos cuyos títulos ya estén en el formulario.
Si aparece «Could not build a form from that description. Try naming the details you want to collect.», describe con más precisión qué datos necesitas.
La nota encima de los campos indica en qué canales aparece el formulario de forma interactiva, tal como se explica en «On which channels does each element appear?».
Para añadir campos manualmente, haz clic en «+ Add element manually» y elige un tipo de campo. El menú muestra una breve indicación junto a cada tipo.
- Fechas y horas: «Calendar» para una sola fecha, «Date range» para una fecha de inicio y otra de fin, «Time slots» para elegir una hora entre varias opciones disponibles
- Opciones: «Single choice» cuando el contacto elige una opción, «Multiple choice» cuando puede elegir varias
- Entrada libre: «Text» para una respuesta breve, «Number» para un valor dentro de unos límites, «Long text» para una descripción
Cada campo muestra una vista previa con valores de ejemplo. Durante la conversación, el agente de IA completa las opciones reales, las franjas horarias, los límites de fechas y los rangos, según las instrucciones de «How to execute this action».
Haz clic en el título de un campo para cambiarlo. Al principio, un campo nuevo lleva el nombre de su tipo. Asigna un título propio a cada campo, ya que el contacto lo verá encima del campo y su respuesta aparecerá en Message Center con ese título.
Cambia el orden de los campos arrastrándolos y soltándolos. Elimina un campo con el icono de la papelera.
En «Headline», escribe lo que debe leer el contacto encima de todo el formulario. El encabezado aparece una vez encima del formulario; el título de cada campo aparece justo encima de ese campo.
El encabezado y los títulos de los campos aparecen exactamente como los escribas y no se traducen para los contactos que hablan otros idiomas. Escríbelos en el idioma de tus contactos.
El encabezado y todos los campos son obligatorios: no se puede hacer que un campo sea opcional, y el contacto solo puede enviar el formulario cuando haya rellenado todos los campos.
Si falta algo al guardar, la página de configuración indica el motivo:
- «Add at least one field to save this action.» aparece cuando el formulario aún no tiene ningún campo.
- «Add a headline to save this action.» aparece cuando el encabezado está vacío.
- «Give this field a title to save this action.» aparece en un campo sin título.
- «Another field already uses this title. Give each field its own title.» aparece cuando dos campos tienen el mismo título, aunque solo se diferencien en mayúsculas y minúsculas.
¿Cómo muestro botones, un carrusel o contenido multimedia?
Haz clic en «+ Add element manually» y, en el grupo «Interactive elements», elige «Buttons» (Tap to answer), «Carousel» (Swipeable cards) o «Media» (Image, video or file).
Esto solo funciona mientras el formulario no tenga campos. Mientras tenga campos, el grupo aparecerá atenuado con la nota «Interactive elements can’t be combined with form fields yet. Create a separate action for them.» Antes de guardar, elimina los campos con el icono de la papelera para volver a seleccionar el grupo; después de guardar, crea una acción nueva.
La página de configuración mostrará entonces el elemento elegido en lugar del formulario, con una vista previa de contenido de ejemplo y la nota sobre los canales encima. Mientras la acción no esté guardada, puedes eliminar el elemento con el icono de la papelera y crear un formulario en su lugar.
En «How to execute this action», describe qué debe mostrar el agente de IA, por ejemplo, qué productos presenta el carrusel o qué respuestas ofrecen los botones. Un carrusel puede tener de 2 a 10 tarjetas, y los botones pueden ofrecer hasta 10 respuestas o enlaces.
El agente de IA solo incluye imágenes, vídeos y archivos mediante enlaces que empiezan por https, y únicamente desde estas fuentes:
- Botones (imagen o vídeo encima del mensaje): enlaces incluidos en tus instrucciones, en el resultado de otra acción (como una acción de API) o en la conversación
- Carrusel (imagen o vídeo en cada tarjeta): las mismas fuentes que para los botones
- Contenido multimedia (el archivo): enlaces incluidos en tus instrucciones o en la conversación; en este caso, introduce el enlace del archivo en «How to execute this action»
«En la conversación» significa un enlace que alguien ha enviado en el chat.
¿Cómo activo y pruebo la acción en mi agente de IA?
Haz clic en «Save» cuando el formulario o el elemento esté listo. Una acción nueva no se activa para ningún agente de IA, ni siquiera para el agente en cuya pestaña «Actions» la creaste.
Si creaste la acción en Actions > «Interactive UI», volverás a la vista general. La columna «Setups» muestra qué agentes de IA utilizan la acción; aquí, los setups son tus agentes de IA. Haz clic en «No setup» y, en la ventana «Connected setups», selecciona los agentes de IA que deben utilizarla. La columna mostrará entonces, por ejemplo, «1 AI Agent».
Si creaste la acción desde un agente de IA, volverás a su pestaña «Actions». Activa allí la acción en la columna «Status».
Para probarla, necesitas un widget de Website Messenger. El botón «Test Agent» solo aparece si el agente de IA tiene un chatbot. Una vez activada la acción para este agente, haz clic en «Test Agent», a la derecha de las pestañas del agente de IA, selecciona un widget en «Widget» y haz clic en «Open test conversation».
En la conversación de prueba, escribe un mensaje que coincida con el texto de «When to trigger this action». Si no aparece el elemento, comprueba que la acción esté activada para el agente de IA y que el texto de «When to trigger this action» corresponda a tu mensaje.
La prueba se ejecuta en Website Messenger. No puedes usarla para comprobar cómo aparece el elemento en WhatsApp ni cómo se muestra como pregunta de texto.
¿Qué ve el contacto en Website Messenger?
En Website Messenger, el elemento aparece directamente en la conversación. El contacto rellena un formulario y lo envía con «Confirm».
Si falta una respuesta, el formulario marca el campo en rojo y el contacto solo puede enviarlo cuando haya rellenado todo.
Después de enviarlo, el formulario muestra las respuestas del contacto y ya no se puede modificar.
Si el contacto ya había respondido antes en la conversación, el agente de IA puede rellenar previamente esa respuesta en el formulario.
Con los botones y el carrusel, el contacto responde pulsando una opción.
Cuando termina la conversación, el contacto sigue viendo el elemento, pero ya no puede utilizarlo.
¿Qué ve el operador en Message Center?
En Message Center, el elemento aparece como un mensaje del agente de IA que muestra la pregunta en texto sin formato, con la etiqueta «Interactive element» debajo. En cuanto el contacto responde mediante el elemento, se añade «Answered».
La respuesta del contacto aparece después como un mensaje independiente; en el caso de un formulario, se muestra una línea por campo, con el título y la respuesta.
¿Qué pasa con «Show carousel» y «Show media and buttons»?
Los tipos de acción antiguos «Show carousel» y «Show media and buttons», en Actions > «System», llevan la etiqueta «LEGACY». Siguen funcionando, puedes seguir creando acciones de este tipo y no se convierte nada automáticamente.
Para las acciones nuevas, utiliza aquí el elemento «Carousel» en lugar de «Show carousel». En lugar de «Show media and buttons», utiliza el elemento «Buttons» o, para una imagen, un vídeo o un archivo, el elemento «Media» («Image, video or file»). Al pasar el cursor por la etiqueta LEGACY, la ayuda solo menciona «Buttons» y «Carousel»; para una imagen, un vídeo o un archivo, utiliza «Media».
Los botones pueden mostrar una imagen o un vídeo encima del mensaje, pero no un archivo. Con la Interfaz interactiva, el agente de IA solo muestra un elemento por respuesta, por lo que un archivo y los botones nunca llegan en el mismo mensaje. Necesitas dos acciones: una con «Media» y otra con «Buttons». En cambio, la acción antigua «Show media and buttons» sí puede enviar un archivo junto con botones en un solo mensaje y sigue siendo útil en este caso.
No actives una acción antigua y una nueva para el mismo propósito.
Puedes obtener más información sobre la etiqueta LEGACY en la página System Actions, en «What does the LEGACY label mean?».