--- title: "Cómo agregar un chat de soporte a tu app Next.js en 5 minutos" description: "Si tu app está hecha con Next.js, poner un chat de soporte no requiere instalar dependencias ni tocar tu build. Es un bloque de script antes del cierre de…" collection: "Primeros pasos" source: Vibelayers url: https://ayuda.vibelayers.app/chat-de-soporte-en-next-js updated: 2026-08-01T02:54:04.453005+00:00 language: es-AR --- # Cómo agregar un chat de soporte a tu app Next.js en 5 minutos > Si tu app está hecha con Next.js, poner un chat de soporte no requiere instalar dependencias ni tocar tu build. Es un bloque de script antes del cierre de… Si tu app está hecha con Next.js, poner un chat de soporte no requiere instalar dependencias ni tocar tu build. Es un bloque de script antes del cierre de ``, y hay dos formas de ponerlo: pegándoselo a tu agente de código, o a mano. ## La forma corta: que lo haga tu agente En tu panel, en el paso de instalación, hay un botón que copia un prompt ya armado con el id de tu cuenta adentro. Se lo pegás a Cursor o a Claude Code y lo instala solo: sabe dónde va el bloque en el App Router, qué no tocar y cómo verificar que quedó andando. > Es el camino que recomendamos. El prompt trae tu id real, así que no hay nada que reemplazar a mano y no se puede pegar el de otra cuenta por error. ## La forma manual 1. #### Copiá tu snippet Está en el panel, en la sección Widget. Ya viene con el id de tu guía. 2. #### Pegalo en tu layout raíz En el App Router es `app/layout.tsx`, adentro del `` y lo más abajo posible. En Pages Router va en `pages/_document.tsx`. Si usás Vite o Create React App, va en `index.html`. 3. #### Abrí tu app y buscá la burbuja Aparece abajo a la derecha. No hace falta que marques nada: el panel detecta la instalación solo la primera vez que el widget carga. > Localhost también cuenta. Podés verificar que quedó bien sin deployar. ## Si tu app tiene login Opcional, pero cambia bastante la experiencia: donde tu app ya sabe quién es el usuario, avisale al widget. ```javascript window.Vibelayers.identify({ email: user.email, name: user.name }); // Al cerrar sesión: window.Vibelayers.reset(); ``` Con eso, cada conversación queda atada a esa persona y podés ver su historial en vez de mensajes sueltos de visitantes anónimos. ## Qué pasa cuando alguien escribe La IA responde primero, usando los artículos que publicaste. Si no encuentra la respuesta lo dice y te deriva la conversación, y te llega un aviso por email para que no se te pase. Esa parte no depende del plan: enterarte de que te escribieron viene prendido desde el primer día.