Saltar al contenido
intoCHAT

Integración con React

Añade un chatbot con IA a tu app de React

Añade el widget de intoCHAT con una etiqueta script en index.html, o cárgalo desde un pequeño componente con useEffect. Se mantiene durante los cambios de ruta en el cliente.

Crea tu agente gratis

Última actualización:

Cómo funciona intoCHAT en React

El widget de intoCHAT es un script normal, no un componente de React. Lee el ID de tu agente del atributo data-chatbot-id del elemento script que lo cargó y luego añade una burbuja de chat a document.body, fuera de tu árbol de React. Por eso funciona con cualquier router o librería de estado, y los re-renderizados nunca lo tocan. Los colores, la posición y el mensaje de bienvenida se configuran en intoCHAT, así que no necesitas un nuevo build para cambiarlos.

Instalar intoCHAT en una app de React

  1. Crea y entrena tu agente

    Regístrate en intoCHAT, crea un agente y añade tu web en la pestaña Knowledge. El rastreo renderiza las páginas que dependen de JavaScript antes de leerlas, así que las rutas que tu app renderiza en el navegador se leen tal como las ven los visitantes.

  2. Copia la etiqueta script

    Abre la pestaña Share y copia el código de Bubble Chat. Ya incluye el ID de tu agente.

  3. Lo más sencillo: pégala en index.html

    Pega la etiqueta script justo antes de la etiqueta de cierre del body en index.html: en la raíz del proyecto con Vite, o en public/index.html con Create React App.

  4. O cárgala desde un componente

    Si prefieres tenerla en el código, añade el componente IntoChatWidget de abajo y renderízalo una vez en tu componente raíz, por ejemplo App. Usa solo una de las dos opciones.

  5. Compruébalo

    Arranca tu app. La burbuja de chat aparece en la esquina inferior y se queda mientras cambias de ruta.

IntoChatWidget.jsx

import { useEffect } from 'react'

export default function IntoChatWidget() {
  useEffect(() => {
    // Load the widget only once, even when StrictMode runs effects twice
    if (document.getElementById('intochat-embed')) return

    const script = document.createElement('script')
    script.id = 'intochat-embed'
    script.src = 'https://www.intochat.ai/api/embed.js'
    script.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID')
    document.body.appendChild(script)
  }, [])

  return null
}

El widget lee el ID del agente del atributo data-chatbot-id del elemento script que lo cargó, así que define el atributo antes de añadir el elemento a la página. La comprobación del id evita una segunda copia en desarrollo.

Qué puede hacer el agente en tu app de React

  • Acciones en el cliente

    Registra funciones con window.IntoChatActions.register y el agente podrá llamarlas durante el chat para leer el estado de tu app o lanzar algo que hayas definido.

  • Acciones de API propias

    Deja que el agente llame a tu API HTTP, con autenticación bearer, basic, clave de API o cabeceras propias. Importa una petición desde cURL y elige qué campos de la respuesta ve el modelo.

  • Lee tus páginas renderizadas

    El rastreo de la web renderiza las páginas que dependen de JavaScript antes de leerlas, encuentra hasta 500 URL en el sitemap y los enlaces y te permite excluir rutas con patrones.

  • Respuestas fundamentadas

    Búsqueda híbrida semántica y por palabras clave en tus contenidos, con reglas que ciñen las respuestas a tus fuentes, resisten la inyección de prompts y avisan cuando la respuesta no está.

  • Captación de leads

    Pide un email o un teléfono en el chat, de forma manual, por reglas o cuando la IA lo decida. Los leads te llegan por email y se exportan a CSV.

  • Nuevo estilo sin nuevo build

    Los colores, el avatar, el icono del botón, la posición y el mensaje de bienvenida se configuran en la pestaña Appearance y llegan con el widget, no desde tu bundle.

Preguntas frecuentes

¿Uso index.html o el componente?

index.html es la opción más sencilla y carga el widget en todas las páginas. Usa el componente cuando quieras decidir en el código si se carga, por ejemplo solo en producción o solo después de que el visitante acepte las cookies. Usa solo una de las dos, o tendrás dos burbujas.

¿Por qué veo dos burbujas de chat en desarrollo?

React StrictMode ejecuta los efectos dos veces en desarrollo, y el widget añade una burbuja nueva cada vez que se ejecuta su script. La comprobación del id al principio del efecto evita que la segunda ejecución añada otro script. Comprueba también que el script no esté además en index.html.

¿El widget ralentiza mi app de React?

Cargado desde el componente, el script se añade después de que tu app se renderiza, así que no frena el primer renderizado. En index.html es un script normal al final del body. En ambos casos la ventana del chat funciona en su propio iframe servido por intoCHAT, separado del código de tu app.

¿Funciona con React Router y otros sistemas de enrutado en el cliente?

Sí. El widget vive en document.body, fuera de la raíz de React, así que los cambios de ruta y los re-renderizados no le afectan. También se queda si el componente que lo cargó se desmonta, hasta la siguiente carga completa de la página.

¿Puede el agente ejecutar código en mi app de React?

Sí, con las acciones en el cliente. Registra una función con window.IntoChatActions.register y el agente podrá llamarla durante el chat para leer el estado de tu app o lanzar algo que hayas definido. Si tu código se ejecuta antes de que cargue el widget, añade el nombre y la función como pareja a window.IntoChatActionsQueue y el widget los registra al arrancar.

Mi app tiene una Content Security Policy. ¿Qué debo permitir?

Permite www.intochat.ai en script-src para el script, en connect-src para cargar los ajustes del agente y en frame-src para la ventana del chat. Sin estas entradas, el navegador bloquea el widget y la burbuja no aparece.

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 gratis

Plan gratuito, sin tarjeta de crédito.