Integración con Bubble
Añade un chatbot con IA a tu app de Bubble
Entrena un agente con las páginas públicas, la documentación y las preguntas frecuentes de tu app y añádelo a todas las páginas desde los ajustes de header y body personalizados de Bubble. Sin plugins, y puedes probarlo antes en el Playground.
Última actualización:
Cómo funciona intoCHAT en Bubble
Bubble te permite añadir tu propio HTML a todas las páginas de una app desde la pestaña Settings. intoCHAT aprovecha eso: una etiqueta script añade una burbuja de chat en la esquina de cada página. El agente responde con lo que le das, como tus páginas públicas, documentos de ayuda y pares de preguntas y respuestas, y lo dice cuando no sabe algo. La burbuja queda fija en una esquina, encima de la página, separada de tus elementos y workflows de Bubble.
Instalar intoCHAT en Bubble
Crea y entrena tu agente
Regístrate en intoCHAT, crea un agente y añade conocimiento en la pestaña Knowledge: las páginas públicas de tu app, documentos de ayuda o texto y pares de preguntas y respuestas. Las páginas que requieren inicio de sesión no se pueden rastrear, así que sube o pega ese contenido.
Copia la etiqueta script
Abre la pestaña Share y copia el código de Bubble Chat. Ya incluye el ID de tu agente.
Abre los ajustes de header y body
En el editor de Bubble, abre la pestaña Settings, ve a SEO / metatags y busca la sección de headers y body personalizados.
Pégala en el campo body
Pega el script en el campo body, no en el campo header. El código de ese campo se añade al body de todas las páginas de tu app.
Despliega y comprueba
Despliega tu app en live y ábrela en el navegador. La burbuja de chat aparece en la esquina inferior, con los colores y la posición que definiste en la pestaña Appearance.
El código que debes pegar en Bubble
<script src="https://www.intochat.ai/api/embed.js" data-chatbot-id="YOUR_AGENT_ID"></script>Usa el campo body, no el campo header. El script añade la burbuja de chat al body de la página en cuanto se ejecuta, así que tiene que cargarse dentro del body.
Qué hace el agente en tu app de Bubble
Llama a la API de tu app
Con las acciones de API personalizadas, el agente llama a un endpoint HTTP durante el chat, con bearer token, API key o headers personalizados. Tú eliges qué campos de la respuesta ve el modelo.
Ejecuta funciones en tu página
Las acciones del lado del cliente ejecutan funciones JavaScript que registras en la página del visitante, para que el agente active algo que tu página ya sabe hacer.
Aprende de tu documentación
Sube archivos PDF, Word o Markdown, añade páginas de ayuda por URL o escribe pares de preguntas y respuestas. Las respuestas de preguntas y respuestas tienen prioridad sobre otras fuentes.
Se ciñe a tu contenido
Las reglas integradas mantienen las respuestas ligadas a tus fuentes y resisten la inyección de prompts. Cuando la respuesta no está en tu contenido, el agente dice que no lo sabe en lugar de inventar.
Capta leads en el chat
Un formulario breve dentro de la conversación pide un email o un teléfono, según las reglas que tú definas. Cada lead nuevo te llega por email a ti y hasta a cinco compañeros más.
Encaja con el estilo de tu app
Define los colores de la burbuja y la cabecera, el avatar, el icono y la posición del botón, o importa tu logo y tus colores desde la dirección de tu web.
Preguntas frecuentes
¿intoCHAT ralentiza mi app de Bubble?
El script es un único archivo que se carga dentro del body de la página. La ventana del chat funciona en su propio iframe servido por intoCHAT, así que su código queda separado de los elementos y workflows de tu app.
¿Por qué no aparece la burbuja de chat en mi app de Bubble?
Comprueba que el script está en el campo body y no en el campo header, porque necesita que el body de la página exista cuando se ejecuta. Si miras la app en live, asegúrate de haber desplegado el cambio y verifica que el ID del agente coincide con el de la pestaña Share.
¿Necesito un plugin de Bubble para intoCHAT?
No. intoCHAT se instala con una etiqueta script en el campo body personalizado de Bubble, así que no hay ningún plugin que instalar ni actualizar. Los colores, la posición, el mensaje de bienvenida y el conocimiento se gestionan en intoCHAT.
¿Puedo mostrar el chat dentro de una página en lugar de como burbuja?
Sí. Añade un elemento HTML a la página y pega el código iframe de la pestaña Share, y el chat aparecerá con el tamaño y en el lugar que elijas. En una misma página usa el iframe o el script de la burbuja, no ambos, para que los visitantes no vean dos chats.
¿Tengo que cambiar mi app de Bubble cuando modifico el agente?
No. El script solo lleva el ID de tu agente. Los colores, la posición, el mensaje de bienvenida, las preguntas sugeridas y el conocimiento se cargan desde intoCHAT cada vez que se abre una página, así que los cambios aparecen sin volver a desplegar.
¿Cómo se ve el chat en el móvil?
En pantallas de hasta 768 píxeles de ancho, el chat se abre a pantalla completa y la página deja de desplazarse mientras está abierto. Cuando el usuario lo cierra, vuelve al punto de la página donde estaba.
Míralo responder con tu propia web
Pega la dirección de tu web y chatea con un agente creado a partir de tus páginas. Tarda alrededor de un minuto.
Crea tu agente gratisPlan gratuito, sin tarjeta de crédito.