Vibelayers
GuíaFeedbackNovedades
Primeros pasos
03
  • Qué es Vibelayers y cómo empezar
  • Instalá el widget en tu sitio
  • Cómo agregar un chat de soporte a tu app Next.js en 5 minutos
Funcionalidades
05
  • Soporte por email
  • Feedback y roadmap público
  • Publicá tus novedades con el changelog
  • Asistente de IA: chatbot, Ask AI y créditos
  • Qué es llms.txt y por qué tu documentación lo necesita
Planes y facturación
02
  • Planes, precios y facturación
  • Cuánto cuesta dar soporte con IA y de qué depende
COLECCIÓN · PRIMEROS PASOS

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 </body>, 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 <body> 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.

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.

En esta página
  • Cómo agregar un chat de soporte a tu app Next.js en 5 minutos
  • La forma corta: que lo haga tu agente
  • La forma manual
  • Copiá tu snippet
  • Pegalo en tu layout raíz
  • Abrí tu app y buscá la burbuja
  • Si tu app tiene login
  • Qué pasa cuando alguien escribe