Integración con v0
Añadir un chat en vivo a tu web de v0
v0 genera tu web en Next.js y la publica en Vercel. Para añadir un chat basta un prompt: v0 pone la etiqueta de Hooky en el layout raíz, publicas, y los mensajes de tus visitantes llegan a tu móvil.
Por qué un chat en una web de v0
Con v0, la interfaz sale cuidada desde el primer intento: una página de producto, un portfolio, una app de reservas. Lo que suele faltar es el contacto directo. Un formulario es una espera; una burbuja de chat es una respuesta mientras el visitante sigue ahí. Hooky se añade sin tocar tus componentes ni tus datos.
Instalar Hooky en v0
Crea tu cuenta de Hooky (gratis para un sitio) y añade tu web, con su dirección
vercel.appo tu dominio.Copia el prompt en Sitios: la clave de tu web ya va dentro. La versión de abajo está pensada para un proyecto Next.js (App Router), como los de v0.
Pégalo en el chat de v0 de tu proyecto. v0 modifica
app/layout.tsx: puedes revisar el código antes de publicar.Publica: Publish en la cabecera del chat. La primera vez, v0 te guía (visibilidad, dominio); después, abre Publish y elige Publish Changes.
El prompt para v0
Añade la burbuja de chat de Hooky a esta web, en todas las páginas. En app/layout.tsx, importa Script desde next/script y añádelo una sola vez, justo antes del cierre de <body>, con strategy="afterInteractive":
<script src="https://heyhooky.com/widget.js" data-site-key="TU_CLAVE_PUBLICA" async></script>Mantén exactamente la dirección del script y el atributo data-site-key. No añadas ningún otro código ni cambies nada más: la burbuja aparece sola, abajo de la pantalla.
Si prefieres hacerlo tú, este es el resultado esperado en app/layout.tsx:
import Script from "next/script";
// … dentro del <body> del layout raíz, después de {children}:
<Script src="https://heyhooky.com/widget.js" data-site-key="TU_CLAVE_PUBLICA" strategy="afterInteractive" />Comprobar que aparece la burbuja
Abre la dirección de producción (la que muestra v0 tras publicar) y recarga: la burbuja está abajo. Un mensaje de prueba llega al momento a Mensajes.
¿No hay burbuja? Comprueba que la publicación ha terminado, que la etiqueta está en el layout raíz (y no en una sola página) y que la dirección abierta está en las direcciones autorizadas del sitio, si declaraste alguna.
vercel.app, vistas previas y tu dominio
Cada proyecto publicado tiene una dirección estable vercel.app, a la que puedes añadir tu dominio (Publish › Customize Domain en v0). Declara las dos en Hooky: conversaciones y estadísticas se quedan juntas.
Los despliegues de vista previa de Vercel tienen cada uno una dirección única que cambia cada vez. No hace falta declararlas todas: prueba la burbuja en tu dirección de producción. Mientras no haya ninguna dirección declarada en Hooky, la burbuja aparece en todas partes, vistas previas incluidas.
Responder a tus visitantes
Te llega una notificación al móvil; respondes desde la app de Hooky (iPhone, iPad, Mac, Android) o desde el panel web. Tu visitante puede adjuntar una captura o un PDF, y si se va tras dejar su email, tu respuesta le sigue por email.
¿Tu web tiene backend? Envía también tus eventos (registro, pedido pagado) desde el servidor con la clave secreta del sitio, o publica tus avisos en el canal del sitio con el formato de los webhooks de Slack. Todo está en la documentación.
Preguntas frecuentes
¿Por qué el componente Script y no una etiqueta <script>?
En Next.js, next/script es la forma limpia de cargar scripts de terceros; con afterInteractive, la burbuja se carga justo después de que la página es usable, sin ralentizarla.
¿Aparece la burbuja en la vista previa de v0?
La vista previa funciona en un entorno aislado, con una dirección temporal. La burbuja solo aparece ahí si no has declarado ninguna dirección en Hooky. Mejor prueba en la dirección publicada.
Mi proyecto de v0 está conectado a GitHub
Nada especial: el cambio en app/layout.tsx va a tu rama, y Publish la fusiona y despliega, como el resto de tu código.
¿Funciona también en una web Next.js fuera de v0?
Sí, es exactamente la misma etiqueta, en el mismo sitio. Mira también la página de Cursor si programas en un editor.
Otras herramientas
Tus visitantes tienen preguntas. Respóndeles desde donde estés.
Gratis para un sitio, instalado con un prompt. Después, solo tienes que llevar el móvil en el bolsillo.