Intégration Lovable
Ajouter un chat en direct à ton site Lovable
Ton site Lovable est en ligne, et tes visiteurs ont des questions. Avec Hooky, une bulle de chat apparaît sur toutes tes pages : tu colles un prompt dans Lovable, tu publies, et tu réponds depuis ton téléphone.
Pourquoi un chat sur un site Lovable
Lovable te fait passer de l’idée au site en une soirée. Mais un site tout neuf, c’est aussi des visiteurs qui hésitent : « c’est livré où ? », « le formulaire ne marche pas sur mon téléphone », « vous êtes dispo samedi ? ». Sans moyen simple de te poser la question, ils repartent.
La bulle Hooky leur donne ce moyen, sans compte à créer. Toi, tu reçois une notif et tu réponds depuis l’app. Et comme un site Lovable est une app React (Vite), une seule balise dans index.html suffit pour couvrir toutes les pages.
Installer Hooky dans Lovable
Crée ton compte Hooky (gratuit pour un site) et déclare ton site : son nom et son adresse, par exemple
mon-site.lovable.app.Copie le prompt d’installation dans Sites : il contient déjà la clé de ton site. Celui ci-dessous est le même, adapté à Lovable, avec une clé d’exemple.
Ouvre ton projet dans Lovable et colle le prompt dans le chat du projet, en mode Build (les modes Chat et Plan discutent ou préparent un plan sans toucher au code).
Publie : bouton Publish en haut à droite de l’éditeur, puis Publish changes si ton site est déjà en ligne. Tant que tu n’as pas publié, la version en ligne n’a pas la bulle.
Le prompt pour Lovable
Ajoute la bulle de chat Hooky à ce site, sur toutes les pages. Colle cette balise une seule fois dans index.html, à la racine du projet, juste avant </body> :
<script src="https://heyhooky.com/widget.js" data-site-key="TA_CLE_PUBLIQUE" async></script>Laisse-la telle quelle dans index.html : ne la déplace pas dans un composant React et ne l’ajoute pas avec un useEffect. Ne modifie ni l’adresse du script ni l’attribut data-site-key, et ne change rien d’autre.
Sur une offre payante de Lovable, tu peux vérifier toi-même : onglet Code, fichier index.html, la ligne doit être juste avant </body>. Sur l’offre gratuite, l’éditeur de code est en lecture seule, mais tu peux quand même regarder.
Vérifier que la bulle apparaît
Ouvre ton adresse publiée (mon-site.lovable.app ou ton domaine) dans un nouvel onglet et recharge la page. La bulle s’affiche en bas de l’écran, à droite par défaut. Écris-toi un premier message : il arrive aussitôt dans Messages.
Rien ne s’affiche ? Dans l’ordre :
- tu as bien cliqué sur Publish changes après la modification ;
- l’adresse que tu testes figure dans les adresses autorisées du site, dans Hooky (dès qu’il y en a une, la bulle reste cachée ailleurs) ;
- la balise est restée intacte, avec la bonne clé (redemande à Lovable de te montrer la ligne).
Ton domaine et l’adresse lovable.app
Lovable publie d’abord ton site sur une adresse en lovable.app, puis tu branches ton propre domaine. Déclare les deux dans la page du site, dans Hooky : les conversations et les stats restent au même endroit, et la bulle marche sur les deux, sans rien réinstaller. Inutile d’ajouter www. : atelierlila.fr couvre aussi www.atelierlila.fr.
Répondre à tes visiteurs
Les messages de tous tes sites arrivent dans une seule boîte de réception, sur l’app iPhone, iPad, Mac et Android, ou dans l’espace web. Une notif te prévient. Tes visiteurs peuvent t’envoyer des photos ou un PDF (une capture du bug, par exemple), et si l’un d’eux part avant ta réponse en laissant son e-mail, ta réponse le suit par e-mail, avec un lien pour reprendre la conversation.
Envie d’aller plus loin ? Demande aussi à Lovable de compter tes inscriptions ou tes commandes avec Hooky.track : le prompt t’attend dans l’onglet Stats, et tout est dans la doc.
Questions fréquentes
La bulle apparaît-elle dans l’aperçu de l’éditeur Lovable ?
L’aperçu de l’éditeur tourne sur une adresse de développement. Tant que tu n’as déclaré aucune adresse dans Hooky, la bulle s’affiche partout ; dès que tu en déclares, elle n’apparaît que sur celles-là. Le plus simple : teste sur ton adresse publiée.
Lovable a mis la balise ailleurs que dans index.html
Ça arrive : une IA aime « ranger » le code dans un composant. Redis-lui simplement : « Remets la balise Hooky telle quelle dans index.html, juste avant </body>, et retire-la du composant. » Puis republie.
Faut-il une offre payante de Lovable ?
Pas pour Hooky : le prompt passe par le chat du projet. Il te faut seulement pouvoir publier ton site. Le domaine personnalisé, lui, dépend de ton offre Lovable.
J’ai plusieurs sites Lovable
Crée un site dans Hooky pour chacun : chaque prompt a sa propre clé. L’offre Gratuit couvre un site, Créateur dix et Studio cinquante, et tous arrivent dans la même boîte de réception.
Les autres outils
Tes visiteurs ont des questions. Réponds-leur d’où tu es.
Gratuit pour un site, installé en un prompt. Ensuite, garde ton téléphone dans la poche.