# ajouter un live chat à un site fait avec lovable, bolt ou v0

Le prompt à coller dans Lovable, Bolt ou v0, l’endroit où le snippet du chat doit se trouver dans le code qu’ils génèrent, et comment vérifier le résultat sur votre site publié.

2026-10-28 · Kuba

Vous avez construit votre site en le décrivant, alors ajoutez le chat de la même façon. Ce guide vous donne un prompt pour Lovable, Bolt ou v0, montre où le snippet doit se retrouver dans le code qu’ils génèrent, et comment vérifier sur le site publié que rien ne se charge avant un clic.

## ce que génèrent ces outils

Vus depuis leur fenêtre de chat, les trois outils se ressemblent, mais ils écrivent des projets de types différents, et c’est ce qui décide où va une balise script :

- **Lovable** génère une application Vite et React. Il y a un `index.html` à la racine du projet ; c’est la page dans laquelle chaque route s’affiche.
- **Bolt** génère ce que vous lui avez demandé. La plupart des projets sont des applications Vite avec un `index.html` ; certains sont en Next.js, en Astro ou en HTML pur (le [guide HTML pur](/fr/blog/live-chat-plain-html-site/) couvre ce dernier cas).
- **v0** génère du Next.js avec l’app router. La page partagée est `app/layout.tsx`.

Le chat a besoin d’une balise sur chaque page. Dans une single-page app, cela veut dire `index.html`. En Next.js, le layout racine. Nulle part ailleurs.

## avant de commencer : le domaine

Spookat lie un site à son domaine. Le chat ne se connecte que depuis ce domaine et ses sous-domaines, et c’est l’une des raisons pour lesquelles personne ne peut copier votre snippet sur son propre site.

Avec ces outils, c’est important, parce que votre projet vit à plusieurs adresses :

- la **prévisualisation** dans l’outil, sur le domaine de l’outil
- l’adresse **publiée** que l’outil vous donne, en général un de ses sous-domaines
- votre **domaine personnalisé**, si vous en avez connecté un

Enregistrez le site sous l’adresse qu’utiliseront les visiteurs. Si c’est un domaine personnalisé, prenez-le ; son `www` et ses autres sous-domaines sont inclus. Si vous publiez sur le sous-domaine de l’outil, enregistrez ce sous-domaine complet, pas le domaine principal de l’outil. Dans la prévisualisation de l’outil, le lanceur s’affiche, mais le chat ne se connecte pas. Testez sur le site publié.

## le prompt

Il vous faut d’abord votre clé de site. Dans le tableau de bord Spookat, ajoutez le site avec le bon domaine ; la page d’installation affiche le snippet. Puis collez ceci dans le chat de l’outil, avec votre clé à la place de `YOUR_SITE_KEY` :

```text
Add this live chat script to every page of the site. It must be exactly one tag, loaded once, right before the closing </body> tag of the shared HTML (index.html in a Vite app, the root layout in Next.js). Keep the async attribute. Do not wrap it in a React component, do not add it to individual pages, do not preload anything.

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
```

Le prompt est aussi précis exprès. Ces outils aiment se rendre utiles, et « ajoute un widget de chat » peut devenir un nouveau composant React, un bouton flottant maison, ou la balise collée dans cinq pages. Une balise à un seul endroit, c’est tout ce dont Spookat a besoin : le lanceur dessine son propre bouton.

### l’apparence, dans le même prompt

L’apparence du widget se règle dans le tableau de bord Spookat et voyage dans le lanceur, l’outil n’a donc pas besoin de la connaître. Si vous préférez la garder dans le code, ajoutez une deuxième ligne au prompt :

```text
Above that script, add: <script>window.Spookat = { style: "clean", accent: "#2F6FEB", side: "right" };</script>
```

Il y a 8 styles. `accent` est la couleur de votre marque en hexadécimal ; la couleur du texte posé dessus est choisie pour le contraste. La [documentation](/fr/docs/) liste toutes les clés.

## où il doit se retrouver

Ouvrez la vue du code et vérifiez. Pour une application Vite (Lovable, la plupart des projets Bolt), `index.html` doit se terminer ainsi :

```html
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>
```

Pour Next.js (v0, certains projets Bolt), `app/layout.tsx` reçoit la balise dans `<body>`, après `{children}` :

```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
      </body>
    </html>
  );
}
```

Si l’outil a plutôt utilisé `next/script`, c’est bien aussi, avec `strategy="afterInteractive"` ou `"lazyOnload"`. Ce que vous ne voulez pas voir :

- la balise dans un composant de page, comme `Home.tsx` ou `app/page.tsx` : le chat n’existerait que sur cette page
- un `useEffect` qui crée l’élément script : ça fonctionne, mais c’est plus de code pour la même balise
- un bouton ou un panneau de chat que l’outil a dessiné lui-même : supprimez-le, Spookat apporte le sien

Si quelque chose a mal tourné, dites-le en une phrase : "Remove the chat code you added and put only the script tag in index.html." Ces outils corrigent bien ce genre de chose quand la consigne est concrète.

## publiez, puis vérifiez

Publiez le site et ouvrez l’adresse publiée dans une fenêtre privée. Ouvrez les DevTools :

1. **Network**, cochez « Disable cache », rechargez et tapez `spookat` dans le filtre. Vous devriez voir une requête : le lanceur depuis `cdn.spookat.com`, environ 2 kb. Deux, toutes deux depuis `cdn.spookat.com`, si votre code définit dans `window.Spookat` un autre style que celui que vous avez publié. Rien vers `api.spookat.com`.
2. **Application**, cookies et local storage : rien de Spookat.
3. **Cliquez sur le lanceur.** Le panneau se charge depuis le CDN. Écrivez un message de test. Avec Slack ou Discord connecté, il y apparaît ; répondez et regardez la réponse arriver dans le widget.

Si le lanceur n’apparaît pas du tout, la balise n’est pas arrivée dans le build publié. Revérifiez la vue du code. Si le lanceur apparaît mais que le chat ne se connecte pas, le domaine du tableau de bord ne correspond pas à l’adresse où vous êtes.

Le [guide de référence](/fr/blog/add-live-chat-to-your-website/) explique chacune de ces vérifications plus en détail.

## connectez les réponses

Le chat doit vous joindre là où vous êtes déjà. Connectez Slack ou Discord dans le tableau de bord, choisissez un canal, et chaque visiteur a son propre fil. Le [guide Slack](/fr/blog/answer-website-chat-from-slack/) et le [guide Discord](/fr/blog/answer-website-chat-from-discord/) détaillent tout cela.

## pourquoi ne pas laisser l’outil créer un chat

Vous pourriez le lui demander. L’outil vous fera un joli panneau avec un champ de texte en quelques minutes. Ensuite viennent les questions : où vont les messages, qui est prévenu, comment la réponse parvient à un visiteur qui a fermé l’onglet, que faire du spam, qui fait tourner tout ça. Il faut un serveur, une base de données, une intégration Slack et une chaîne d’envoi d’e-mails, et rien de tout cela n’est le produit que vous construisiez.

Spookat, c’est une balise, pour 4,99 € par mois et par site avec starter, et l’essai dure 14 jours sans carte.

## si vous utilisez plutôt claude code ou cursor

Exportez le projet dans un dépôt et laissez un agent de code s’en charger avec le serveur MCP de Spookat. Il peut aussi accorder le widget aux couleurs de votre site et tout configurer sans que vous ayez à copier de clé. Le [guide Claude Code](/fr/blog/claude-code-live-chat/) vous accompagne.

## accorder l’apparence à un site généré

Ces outils produisent souvent un style reconnaissable : une sans-serif nette, des ombres douces, des cartes arrondies, une couleur d’accent. Le widget doit avoir l’air d’être à sa place, pas d’un autocollant venu d’un autre site.

- **Style.** Pour l’apparence générée typique, commencez par `clean` ou `soft`. Si votre site est plus sombre et plus technique, essayez `terminal`. Si vous lui avez donné un look franc et plat, `brutal` ou `swiss`. Vous pouvez changer dans le tableau de bord et voir chacun en aperçu direct avant de publier.
- **Accent.** Utilisez le même hexadécimal que vos boutons. L’outil l’a en général dans sa config Tailwind ou dans une variable CSS ; demandez-lui `what is the primary color's hex?`
- **Police.** `system` ne télécharge rien et ressemble assez à la plupart des sites générés. Si votre site utilise une police précise et que nous l’hébergeons, choisissez-la ; elle ne se charge qu’après le clic.
- **Côté.** Si l’outil a placé son propre bouton flottant en bas à droite (une flèche de retour en haut, une icône de réglages des cookies), mettez le lanceur à gauche.

## ce que voient vos visiteurs

Un petit bouton dans le coin, à vos couleurs. Rien d’autre ne se passe tant qu’ils ne cliquent pas. Ensuite, le panneau s’ouvre avec votre message d’accueil et une ligne indiquant qu’un humain répond. Ils écrivent, et le message arrive dans votre fil Slack ou Discord, ou dans notre boîte de réception et son app mobile. S’ils partent avant votre réponse, ils peuvent laisser une adresse e-mail ; avec pro, la réponse les y rejoint. Le widget parle la langue de leur navigateur, parmi 12, sauf si vous en fixez une.

## après une régénération de l’outil

Ces outils réécrivent des fichiers. Un gros changement de layout (« fais-en un tableau de bord », « passe en mode sombre ») peut faire disparaître la balise de `index.html` ou du layout racine sans prévenir. Après une grosse régénération, ouvrez le site publié et vérifiez que le lanceur est toujours là. S’il a disparu, le même prompt le remet.

## plus d’un projet

Avec ces outils, lancer un deuxième ou un troisième site ne coûte presque rien. Dans Spookat, chacun est un site à part, avec sa propre clé, son domaine, son apparence et son canal, donc une conversation n’arrive jamais dans le fil du mauvais projet. Le premier site d’un compte paie le plein tarif ; chaque autre site du même compte que vous payez via Spookat bénéficie de 30 % de réduction, sur tous les plans. Plusieurs sites peuvent partager un canal Slack ou Discord si ce sont les mêmes personnes qui répondent, mais la carte n’indique que le chemin de la page, pas le site d’où vient la conversation. Donnez à chaque site son propre canal si vous devez les distinguer.

## checklist

- Le site est enregistré sous l’adresse qu’utilisent les visiteurs.
- Une balise, `async`, dans `index.html` ou le layout racine.
- Aucun bouton ni composant de chat créé par l’outil lui-même.
- Testé sur le site publié, pas dans la prévisualisation.
- Une requête avant un clic (deux, toutes deux depuis `cdn.spookat.com`, si votre code définit un style que vous n’avez pas publié), aucun cookie.
- Slack ou Discord connecté.

Décrivez, publiez, vérifiez. Puis répondez à la première question depuis un fil.

---
source: https://spookat.com/fr/blog/live-chat-lovable-bolt-v0/