Integración con Lovable
Añadir un chat en vivo a tu web de Lovable
Tu web de Lovable ya está online y tus visitantes tienen preguntas. Con Hooky aparece una burbuja de chat en todas tus páginas: pegas un prompt en Lovable, publicas y respondes desde el móvil.
Por qué un chat en una web de Lovable
Lovable te lleva de la idea a la web en una tarde. Pero una web recién salida también trae visitantes con dudas: «¿hacéis envíos a Sevilla?», «el formulario no funciona en mi móvil», «¿tenéis hueco el sábado?». Si no tienen una forma fácil de preguntar, se van.
La burbuja de Hooky les da esa forma, sin crear ninguna cuenta. Tú recibes una notificación y respondes desde la app. Y como una web de Lovable es una app React (Vite), basta con una sola etiqueta en index.html para cubrir todas las páginas.
Instalar Hooky en Lovable
Crea tu cuenta de Hooky (gratis para un sitio) y añade tu web: su nombre y su dirección, por ejemplo
mi-web.lovable.app.Copia el prompt de instalación en Sitios: ya lleva la clave de tu web. El de abajo es el mismo, adaptado a Lovable, con una clave de ejemplo.
Abre tu proyecto en Lovable y pega el prompt en el chat del proyecto, en modo Build (los modos Chat y Plan conversan o preparan un plan sin tocar el código).
Publica: botón Publish arriba a la derecha del editor y luego Publish changes si tu web ya está online. Mientras no publiques, la versión online no tiene la burbuja.
El prompt para Lovable
Añade la burbuja de chat de Hooky a esta web, en todas las páginas. Pega esta etiqueta una sola vez en index.html, en la raíz del proyecto, justo antes de </body>:
<script src="https://heyhooky.com/widget.js" data-site-key="TU_CLAVE_PUBLICA" async></script>Déjala tal cual en index.html: no la muevas a un componente de React ni la añadas con un useEffect. No cambies la dirección del script ni el atributo data-site-key, y no cambies nada más.
Con un plan de pago de Lovable puedes comprobarlo tú: pestaña Code, archivo index.html; la línea debe estar justo antes de </body>. En el plan gratuito el editor de código es de solo lectura, pero puedes mirarlo igualmente.
Comprobar que aparece la burbuja
Abre tu dirección publicada (mi-web.lovable.app o tu dominio) en una pestaña nueva y recarga. La burbuja aparece abajo, a la derecha por defecto. Envíate un primer mensaje: llega al instante a Mensajes.
¿No aparece nada? Por orden:
- has pulsado Publish changes después del cambio;
- la dirección que pruebas está en las direcciones autorizadas del sitio en Hooky (en cuanto hay una, la burbuja se oculta en las demás);
- la etiqueta sigue intacta, con la clave correcta (pide a Lovable que te enseñe la línea).
Tu dominio y la dirección lovable.app
Lovable publica primero tu web en una dirección lovable.app y luego conectas tu propio dominio. Añade las dos en la página del sitio, en Hooky: conversaciones y estadísticas se quedan en el mismo sitio, y la burbuja funciona en ambas sin reinstalar nada. No hace falta añadir www.: tuweb.es cubre también www.tuweb.es.
Responder a tus visitantes
Los mensajes de todas tus webs llegan a una sola bandeja de entrada, en la app para iPhone, iPad, Mac y Android, o en el panel web. Una notificación te avisa. Tus visitantes pueden enviarte fotos o un PDF (una captura del fallo, por ejemplo), y si alguno se va antes de tu respuesta tras dejar su email, tu respuesta le llega por email, con un enlace para retomar la conversación.
¿Quieres ir más allá? Pide también a Lovable que cuente tus registros o pedidos con Hooky.track: el prompt te espera en la pestaña Estadísticas, y todo está en la documentación.
Preguntas frecuentes
¿Aparece la burbuja en la vista previa del editor de Lovable?
La vista previa del editor funciona en una dirección de desarrollo. Mientras no declares ninguna dirección en Hooky, la burbuja aparece en todas partes; en cuanto declaras alguna, solo aparece en esas. Lo más sencillo: prueba en tu dirección publicada.
Lovable ha puesto la etiqueta fuera de index.html
Pasa: a una IA le gusta «ordenar» el código en un componente. Dile simplemente: «Vuelve a poner la etiqueta de Hooky tal cual en index.html, justo antes de </body>, y quítala del componente». Y vuelve a publicar.
¿Necesito un plan de pago de Lovable?
No para Hooky: el prompt pasa por el chat del proyecto. Solo necesitas poder publicar tu web. El dominio propio sí depende de tu plan de Lovable.
Tengo varias webs en Lovable
Crea un sitio en Hooky para cada una: cada prompt lleva su propia clave. El plan Gratis cubre un sitio, Creador diez y Studio cincuenta, y todos llegan a la misma bandeja de entrada.
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.