Saltar al contenido
intoCHAT

Integración con Next.js

Añade un chatbot con IA a tu app de Next.js

Carga el widget de intoCHAT una sola vez en tu layout raíz con next/script. Se mantiene durante la navegación en el cliente, y el agente responde con los contenidos con los que lo entrenas.

Crea tu agente gratis

Última actualización:

Cómo funciona intoCHAT en Next.js

El widget de intoCHAT es un único script que lee el ID de tu agente de su atributo data-chatbot-id y añade una burbuja de chat a la página. Next.js pasa los atributos data del componente Script al elemento script final, así que te basta con el componente next/script de siempre. Ponlo en el layout raíz y Next.js lo carga una sola vez, aunque los visitantes cambien de ruta. Los colores, la posición y el mensaje de bienvenida vienen de intoCHAT, así que no hace falta volver a desplegar para cambiarlos.

Instalar intoCHAT en Next.js

  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 renderizadas en el cliente se leen tal como las ven los visitantes.

  2. Copia el ID de tu agente

    Abre la pestaña Share. El código de Bubble Chat incluye el ID de tu agente en el atributo data-chatbot-id.

  3. Añade Script a tu layout raíz

    En app/layout.tsx, importa Script desde next/script y añádelo dentro de body, después de children, con la URL del embed, el ID de tu agente y strategy en lazyOnload.

  4. Despliega y comprueba

    Abre cualquier ruta. La burbuja de chat aparece en la esquina inferior y se queda ahí mientras navegas entre páginas.

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://www.intochat.ai/api/embed.js"
          data-chatbot-id="YOUR_AGENT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Next.js pasa data-chatbot-id al elemento script, y así es como el widget encuentra tu agente. El layout puede seguir siendo un Server Component, porque este Script no tiene manejadores de eventos.

Qué puede hacer el agente en tu app de Next.js

  • Acciones en el cliente

    Registra funciones en tu página con window.IntoChatActions.register y el agente podrá llamarlas durante el chat, por ejemplo para leer el estado de la página o abrir un formulario.

  • Acciones de API propias

    Deja que el agente llame a tus propios endpoints 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 páginas renderizadas en el cliente

    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.

  • Estilo desde el panel

    Los colores, el avatar, el icono del botón, la posición y el mensaje de bienvenida se configuran en la pestaña Appearance, no en tu código.

Preguntas frecuentes

¿El widget ralentiza mi app de Next.js?

Con strategy en lazyOnload, Next.js añade el script cuando el navegador está inactivo, después de cargar el resto de recursos de la página, así que no frena ni el renderizado ni la hidratación. La ventana del chat funciona en su propio iframe servido por intoCHAT, separado del JavaScript de tu app.

¿Uso lazyOnload o afterInteractive?

Los dos funcionan. afterInteractive, el valor por defecto, carga el script antes, justo después de parte de la hidratación, así que la burbuja aparece antes, mientras que lazyOnload espera a que el navegador esté inactivo. En ambos casos Next.js crea el elemento script con tu atributo data-chatbot-id, que el widget necesita.

¿Funciona con el Pages Router?

Sí. Añade el mismo componente Script en pages/_app para que se cargue en todas las páginas. Next.js también pasa los atributos data en el Pages Router.

¿Puedo mostrar el chat solo en algunas rutas?

Puedes poner el Script en un layout anidado en lugar del layout raíz, y se carga cuando se abre una ruta de ese layout. Una vez cargada, la burbuja vive en la propia página, así que sigue visible tras navegar en el cliente a otras rutas hasta la siguiente carga completa de la página.

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. Si tu política usa nonces, pasa también el nonce al componente Script.

¿Tengo que volver a desplegar cuando cambio el agente?

No. El código 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 en cada carga de página, así que los cambios aparecen sin un nuevo despliegue.

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.