Para agregar un chatbot con IA a un sitio Next.js con DokBot, publicá tu bot, copiá su script desde la pestaña Instalar y cargalo con el componente Script de next/script en tu layout raíz. Así el widget aparece en todas las páginas que usan ese layout. Esta guía cubre App Router y el método manual con script que describe la documentación de DokBot.
next/script te permite decidir cuándo se carga un script de terceros. Un widget de chat no necesita cargarse antes de que aparezca la primera página, así que esta guía usa la estrategia lazyOnload. Los pasos siguen la referencia de la API Script de Next.js, que revisamos el 4 de noviembre de 2026.
¿Qué necesitás antes de empezar?
Necesitás una cuenta de DokBot con un bot que tenga una base de conocimiento armada con archivos admitidos o una página web, si tu plan lo incluye. Del lado de Next.js, necesitás un proyecto con App Router, es decir, un archivo app/layout.tsx o app/layout.js. Los proyectos con Pages Router también pueden usar next/script, pero el lugar donde se coloca es otro, así que esta guía no los cubre.
Revisá qué incluye tu plan de DokBot en la página de precios antes de depender de una función. El navegador carga el script desde el dominio de DokBot, así que el hosting que uses no cambia el método.
Paso 1: entrená el bot y probalo en Live Preview
Subí los documentos de los que tus visitantes necesitan respuestas, como descripciones de productos o servicios, políticas de envío o de reserva, reglas de precios y preguntas frecuentes. DokBot admite PDF, DOCX, XLSX/XLS, MD y TXT, de hasta 10 MB por archivo. Después hacele al bot las preguntas que realmente te llegan. Live Preview sirve para detectar respuestas incorrectas o faltantes, pero no garantiza la exactitud, así que revisá cada respuesta vos mismo.
En la configuración del bot, revisá Dominios permitidos. Si lo dejás vacío, cualquier sitio puede cargar el widget. Si cargás dominios, incluí tu dominio de producción. La documentación de DokBot no aclara el caso de localhost, así que probá el widget en tu dominio publicado.
Paso 2: copiá el script desde la pestaña Instalar
Publicá tu bot y abrí su pestaña Instalar. Copiá la etiqueta script que aparece allí, con el src y el data-bot-id exactos de tu bot. Un bot en borrador no responde en sitios externos, así que publicalo antes de probar. Nunca reutilices el data-bot-id de otro bot.
<script src="https://www.dokbot.app/widget.js" data-bot-id="YOUR_BOT_ID" async></script>Paso 3: cargá el script con next/script en app/layout.tsx
Next.js recomienda el componente Script para los scripts de terceros. Convertí la etiqueta del paso 2 en un elemento Script, mantené los valores de src y data-bot-id, y quitá async, porque next/script controla cuándo se carga el script. Colocá el elemento dentro de body, después de {children}. El ejemplo muestra solo el script; conservá tu head, tus fuentes y tus providers actuales.
La prop strategy decide cuándo se ejecuta el script. afterInteractive, el valor por defecto, carga después de que ya ocurrió parte de la hidratación. lazyOnload carga durante los tiempos de inactividad del navegador, cuando la página ya trajo sus recursos. La referencia de Next.js menciona los plugins de soporte por chat entre los casos adecuados para lazyOnload, por eso esta guía lo usa. La burbuja puede aparecer un momento después de la página, así que revisala también con una conexión lenta. Si querés el widget en una sola ruta, poné el Script en el archivo de esa página en lugar del layout.
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://www.dokbot.app/widget.js"
data-bot-id="YOUR_BOT_ID"
strategy="lazyOnload"
/>
</body>
</html>
)
}Paso 4: desplegá, probá en producción y revisá la primera semana
Desplegá tu app y abrí el sitio de producción en una ventana privada, en computadora y en celular. Confirmá que el widget carga, que el mensaje de bienvenida es correcto y que las respuestas coinciden con tus políticas actuales. En el código fuente de la página, revisá que el elemento script incluya data-bot-id. Si falta, revisá el componente y volvé a desplegar.
Durante la primera semana, revisá las conversaciones todos los días. Las preguntas repetidas suelen indicar un documento faltante o poco claro. Si algunas consultas necesitan una persona, como un presupuesto a medida o un reclamo, configurá la derivación antes de publicar.
Preguntas frecuentes
¿Necesito cambiar la estructura de mi proyecto? No. Agregás un componente al layout raíz que ya tenés. Tus páginas, rutas y componentes siguen igual.
¿Por qué no aparece el widget? Revisá, en este orden: que el bot esté publicado; que tu dominio de producción esté en Dominios permitidos o que la lista esté vacía; que el componente Script esté guardado en el layout o la página que muestra tu contenido; y que hayas desplegado después de guardar. Después probá en una ventana privada para no ver una versión en caché.
¿El chatbot puede ver datos en vivo de mi base de datos o de mi API? Solo si esa información está en su base de conocimiento como documento o página web. Responde con el contenido asignado al bot, así que mantenelo actualizado.
Fuentes y fecha de verificación
El Veredicto: ¿por qué elegir DokBot?
- Publicá tu bot, copiá el script desde la pestaña Instalar y cargalo con next/script en app/layout.tsx usando la estrategia lazyOnload.
- Agregá tu dominio de producción a Dominios permitidos y probá el sitio desplegado en computadora y celular.
- Revisá las conversaciones durante la primera semana y completá los vacíos de tus documentos.
Entrená un bot con el contenido de tu sitio Next.js
Subí tus políticas y documentos de productos, revisá las respuestas en Live Preview y copiá el script desde la pestaña Instalar cuando el bot esté publicado.