ajouter un live chat à un site en html pur

30 septembre 2026 · par kuba · 7 min de lecture

Un site en HTML pur n’a besoin que d’une ligne pour avoir un live chat : une balise script avant </body>. Ce guide montre où placer cette ligne sur des pages écrites à la main et sur des sites construits avec un générateur statique, toutes les options que vous pouvez définir à côté, et comment vérifier dans le navigateur que rien ne se charge avant un clic.

la ligne

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

Votre clé de site se trouve sur la page d’installation du tableau de bord, déjà insérée dans le snippet, avec un bouton pour la copier. Elle commence par site_live_ et elle est publique : elle figure de toute façon dans le code source de votre page, et elle ne fonctionne que sur le domaine que vous avez enregistré.

Le fichier qu’elle charge, c’est le lanceur : un bouton, ses styles et l’apparence que vous avez publiée dans le tableau de bord. Il pèse moins de 4 kb compressés en gzip (au-delà, le build échoue). Il fait 0 requête vers notre API et ne pose aucun cookie. Le panneau de chat et la connexion à notre serveur ne se chargent que lorsqu’un visiteur clique.

Vous débutez sur le sujet ? Le guide de référence explique ce qu’un widget de chat coûte à une page et ce qu’il faut regarder.

où la placer

Juste avant la balise fermante </body> :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

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

Pourquoi à cet endroit, et pourquoi async :

À la fin du body, la balise ne retarde rien de ce qui se trouve au-dessus. Le navigateur a déjà vu votre contenu quand il atteint la balise.
async indique au navigateur de récupérer le fichier en arrière-plan et de l’exécuter dès qu’il arrive, sans mettre la page en pause. Gardez-le.

chaque page, une fois

Le chat devrait être présent sur chaque page où un visiteur peut avoir une question, c’est-à-dire en général toutes. La façon de l’y mettre dépend de la manière dont le site est construit.

Pages écrites à la main. Collez la balise dans chaque fichier .html. Cherchez </body> dans le dossier pour les trouver toutes. Quand vous ajoutez une page plus tard, partez d’une page existante et la balise suivra.

Un pied de page partagé. Si vos pages incluent un fichier de pied de page commun (un include côté serveur, un include PHP, un partial de template), placez-y la balise une seule fois.

Générateurs de sites statiques. Mettez-la dans le layout de base, le template dont hérite chaque page :

générateur	fichier
Jekyll	`_layouts/default.html`, ou `_includes/footer.html`
Hugo	`layouts/_default/baseof.html`, ou un partial de pied de page
Eleventy	votre layout de base dans `_includes/`
Astro	le composant de layout de base
Pandoc, scripts maison	le template HTML que vous lui passez

Pas d’inquiétude pour une page qui se retrouve avec la balise en double : le lanceur vérifie s’il est déjà sur la page, et la deuxième copie ne fait rien. C’est quand même une requête gaspillée, alors n’en gardez qu’une.

la configuration dans le code

L’apparence que vous choisissez dans le tableau de bord voyage dans le lanceur, donc la ligne ci-dessus constitue toute l’installation. Si vous préférez garder les réglages dans votre HTML, définissez window.Spookat dans un script au-dessus de la balise :

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Si la page et le tableau de bord ne sont pas d’accord, la page l’emporte. Ce que fait chaque clé :

clé	valeur attendue	effet
`style`	l’un des 8 styles	l’apparence. `brutal`, `clean`, `glass`, `soft`, `terminal`, `paper`, `retro`, `swiss`
`font`	`"system"` ou l’une des 17 polices hébergées	la police du widget. `system` ne télécharge rien ; les polices hébergées se chargent depuis notre CDN après le clic, jamais depuis Google
`accent`	`"#RRGGBB"`	la couleur de votre marque. La couleur du texte posé dessus est choisie pour le contraste
`side`	`"right"` ou `"left"`	où se place le lanceur
`greeting`	du texte, jusqu’à 200 caractères	le premier message que voit un visiteur. Vide signifie celui du style
`label`	du texte, jusqu’à 40 caractères	transforme le bouton rond en pilule portant ce texte
`lang`	un code de langue, comme `"en"` ou `"pl"`	la langue du widget. Par défaut : celle du navigateur du visiteur, puis l’anglais
`user`	`{ id, sig }`, à partir de cool guy	qui est connecté, signé sur votre serveur

La documentation contient la référence complète, y compris la façon de signer user.

un site multilingue

Si votre site a un dossier par langue (/en/, /pl/), définissez lang par dossier pour que le widget corresponde à la page, pas au navigateur. Le widget parle 12 langues. Votre équipe voit la langue du visiteur sur chaque conversation.

un lanceur qui dit quelque chose

Un site simple a souvent une question claire que posent les visiteurs : « livrez-vous en… », « puis-je réserver… ». Un label comme "questions? ask a human" transforme l’icône en petite pilule qui le dit. Restez bref ; elle est aussi dans le coin sur téléphone.

ce que le visiteur obtient

Un bouton dans le coin, à vos couleurs. Un clic ouvre le panneau avec votre message d’accueil et une ligne indiquant qu’un humain répond. Il écrit ; le message arrive dans votre fil Slack ou Discord, ou dans notre boîte de réception et son app mobile ; votre réponse revient dans le widget. S’il part avant votre réponse et a laissé une adresse e-mail, cool guy et les formules supérieures lui envoient la réponse par e-mail. La conversation reste sur son appareil d’une page à l’autre et lors de visites ultérieures, jusqu’à l’expiration de l’historique (30 jours avec broke af).

vérifiez-le

Ouvrez votre site dans une fenêtre privée, pour qu’aucun ancien cache ni stockage n’intervienne. Puis ouvrez les DevTools (F12, ou clic droit puis Inspecter).

Network. Cochez « Disable cache », rechargez et tapez spookat dans le filtre. Une requête : le lanceur depuis cdn.spookat.com, environ 2 kb transférés. 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.
Application (Stockage dans Firefox). Cookies : rien de Spookat. Local storage : rien pour l’instant. Une clé n’apparaît qu’après l’envoi d’un premier message ; elle conserve votre conversation sur cet appareil.
Cliquez sur le lanceur. Le script du panneau et la feuille de style de votre style se chargent alors depuis le CDN, puis le chat se connecte. Envoyez un message de test et regardez-le arriver dans Slack ou Discord.

Si le lanceur n’apparaît pas :

Rien dans l’onglet Network. La balise n’est pas sur cette page, elle est dans un commentaire HTML, ou votre étape de build l’a supprimée. Affichez le code source de la page et cherchez spookat.
La requête échoue. Une clé de la mauvaise longueur reçoit une 404 du CDN. Comparez la clé dans l’URL avec celle du tableau de bord.
Le lanceur s’affiche avec l’apparence par défaut et ne se connecte jamais. Avec un seul caractère faux dans la clé, un lanceur se charge quand même. Comparez la clé avec celle du tableau de bord.
Le lanceur s’affiche, mais le chat ne se connecte pas. Vous êtes sur un autre domaine que celui enregistré : un fichier local, localhost ou un hôte de préproduction. Le chat ne se connecte que sur votre domaine et ses sous-domaines.
Une Content Security Policy le bloque. La console indique la directive. Autorisez https://cdn.spookat.com pour les scripts, les styles et les polices, wss://api.spookat.com pour la connexion, et data: pour les images, car les logos et les photos de l’équipe sont des images data:. Le lanceur injecte aussi un petit bloc <style> dans sa propre shadow root, donc style-src doit autoriser les styles inline pour lui. Si vous définissez window.Spookat dans un script inline, donnez à ce script le nonce ou le hash de votre politique.

ce qu’il ne faut pas ajouter

Les sites en HTML pur sont rapides parce que rien ne gêne. Gardez-les ainsi :

Pas de gestionnaire de balises juste pour le chat. C’est un script qui charge des scripts, et il pèse plus que le lanceur.
Pas de preload ni de prefetch pour le panneau. Cela ramènerait le téléchargement du panneau avant le clic, pour chaque visiteur.
Pas de jonglage entre defer et async. async seul est ce qu’il faut pour cette balise.
Pas de surcouche qui ouvre le chat au bout de quelques secondes. Elle charge tout le panneau pour tout le monde et masque votre page sur téléphone. Un message d’accueil fait le même travail quand quelqu’un ouvre vraiment le chat.

l’hébergement n’a pas d’importance

GitHub Pages, Netlify, Cloudflare Pages, un dossier FTP sur un hébergement mutualisé, un serveur dans un placard : la balise est du HTML pur, elle fonctionne donc partout où vos fichiers sont servis. Pas d’étape de build, pas de paquet, pas de code serveur.

connectez les réponses

Dernière étape : connectez Slack ou Discord dans le tableau de bord et choisissez un canal, ou passez-vous-en et répondez dans notre boîte de réception et son app mobile. Chaque visiteur a son propre fil, toute personne du canal peut répondre, et il n’y a pas de sièges. Cela coûte 4,99 € par mois et par site avec broke af.

checklist

Une balise, avec async, avant </body>, sur chaque page (ou une fois dans le layout partagé).
En option, window.Spookat au-dessus, si vous gardez les réglages dans le code.
Vérifié dans une fenêtre privée : une requête avant le clic (deux, toutes deux depuis cdn.spookat.com, si votre code définit un style que vous n’avez pas publié), aucun cookie.
Un message de test envoyé depuis le widget est arrivé dans Slack ou Discord.

L’essai dure 14 jours et ne demande pas de carte. Collez la ligne, et votre site statique peut répondre aux questions.