Intégration v0

Ajouter un chat en direct à ton site v0

v0 génère ton site en Next.js et le publie sur Vercel. Pour y ajouter un chat, un prompt suffit : v0 pose la balise Hooky dans le layout racine, tu publies, et les messages de tes visiteurs arrivent sur ton téléphone.

Commencer gratuitement

Télécharger dans l’App Store Disponible surGoogle Play

Pourquoi un chat sur un site v0

Avec v0, l’interface est soignée dès le premier jet : page produit, portfolio, app de réservation. Ce qui manque souvent, c’est le contact direct. Un formulaire, c’est une attente ; une bulle de chat, c’est une réponse pendant que le visiteur est encore là. Hooky s’ajoute sans toucher à tes composants ni à tes données.

Installer Hooky dans v0

Crée ton compte Hooky (gratuit pour un site) et déclare ton site, avec son adresse vercel.app ou ton domaine.
Copie le prompt dans Sites : la clé de ton site y est déjà. La version ci-dessous est pensée pour un projet Next.js (App Router), comme ceux de v0.
Colle-le dans le chat v0 de ton projet. v0 modifie app/layout.tsx : tu peux vérifier dans le code avant de publier.
Publie : Publish dans l’en-tête du chat. La première fois, v0 te guide (visibilité, domaine) ; ensuite, ouvre Publish et choisis Publish Changes.

Le prompt pour v0

Ajoute la bulle de chat Hooky à ce site, sur toutes les pages. Dans app/layout.tsx, importe Script depuis next/script et ajoute-le une seule fois, juste avant la fermeture de <body>, avec strategy="afterInteractive" :

<script src="https://heyhooky.com/widget.js" data-site-key="TA_CLE_PUBLIQUE" async></script>

Garde exactement l’adresse du script et l’attribut data-site-key. N’ajoute aucun autre code et ne change rien d’autre : la bulle s’affiche seule, en bas de l’écran.

Si tu préfères le faire toi-même, voici le résultat attendu dans app/layout.tsx :

import Script from "next/script";

// … dans le <body> du layout racine, après {children} :
<Script src="https://heyhooky.com/widget.js" data-site-key="TA_CLE_PUBLIQUE" strategy="afterInteractive" />

Vérifier que la bulle apparaît

Ouvre l’adresse de production (celle que v0 affiche après la publication) et recharge la page : la bulle est en bas de l’écran. Un message de test arrive tout de suite dans Messages.

Pas de bulle ? Vérifie que la publication est terminée, que la balise est bien dans le layout racine (et pas dans une seule page), et que l’adresse ouverte est dans les adresses autorisées du site, si tu en as déclaré.

vercel.app, aperçus et ton domaine

Chaque projet publié a une adresse stable en vercel.app, à laquelle tu peux ajouter ton domaine (Publish › Customize Domain dans v0). Déclare les deux dans Hooky : conversations et stats restent ensemble.

Les déploiements d’aperçu de Vercel ont chacun une adresse unique, qui change à chaque fois. Inutile de toutes les déclarer : teste la bulle sur ton adresse de production. Tant qu’aucune adresse n’est déclarée dans Hooky, la bulle s’affiche partout, aperçus compris.

Répondre à tes visiteurs

Une notif arrive sur ton téléphone ; tu réponds depuis l’app Hooky (iPhone, iPad, Mac, Android) ou l’espace web. Ton visiteur peut joindre une capture ou un PDF, et s’il part en laissant son e-mail, ta réponse le suit par e-mail.

Ton site a un backend ? Envoie aussi tes événements (inscription, commande payée) depuis le serveur avec la clé secrète du site, ou poste tes alertes dans le canal du site au format des webhooks Slack. Tout est dans la doc.

Questions fréquentes

Pourquoi le composant Script plutôt qu’une balise <script> ?

Dans Next.js, next/script charge proprement les scripts tiers ; avec afterInteractive, la bulle se charge juste après que la page est utilisable, sans la ralentir.

La bulle apparaît-elle dans l’aperçu de v0 ?

L’aperçu tourne dans un bac à sable, sur une adresse temporaire. La bulle s’y affiche seulement si tu n’as déclaré aucune adresse dans Hooky. Teste plutôt sur l’adresse publiée.

Mon projet v0 est relié à GitHub

Rien de spécial : la modification de app/layout.tsx part dans ta branche, et Publish la fusionne puis déploie, comme le reste de ton code.

Ça marche aussi pour un site Next.js hors de v0 ?

Oui, c’est exactement la même balise, au même endroit. Vois aussi la page Cursor si tu codes dans un éditeur.

Les autres outils

LovableUn prompt dans le chat de Lovable, en mode Build, puis « Publish changes ».BoltUn prompt dans le chat de Bolt, puis le bouton Publish ou Update.CursorUn prompt pour l’Agent de Cursor, qui trouve lui-même le gabarit commun de ton projet.ReplitUn prompt pour Replit Agent, puis une nouvelle publication de l’app.FramerLa balise dans les réglages du site, section Custom Code, en fin de <body>.WebflowLa balise dans Site settings › Custom code › Footer code (forfait payant requis).WordPressLa balise dans le pied de page du site, avec l’extension WPCode ou ton thème enfant.ClaudeLe prompt dans ta conversation avec Claude, ou Claude Code qui fait tout, compte compris.ChatGPTLe prompt dans ta conversation ChatGPT, ou une tâche Codex sur ton dépôt.

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.

Commencer gratuitement

Télécharger dans l’App Store Disponible surGoogle Play