ajouter un live chat à votre site sans le ralentir

Un live chat devrait ne presque rien coûter à votre page tant qu’un visiteur n’a pas vraiment envie de parler. Ce guide montre ce qu’un widget de chat charge avant le premier clic, ce qu’il faut vérifier avant d’en choisir un, comment installer Spookat en quelques minutes et comment prouver dans les DevTools que votre page est restée rapide.

ce qu’un widget de chat coûte avant tout clic

La plupart des visiteurs n’ouvrent jamais le chat. Ils lisent, font défiler, achètent peut-être, puis partent. Tout ce que le widget charge avec la page, chacun d’eux le paie quand même, y compris ceux qui ont un téléphone bon marché et un réseau faible.

Ce coût a quatre composantes :

• Les octets. JavaScript, CSS, polices, images et souvent un iframe avec son propre document. Le JavaScript est le plus cher : le navigateur le télécharge, l’analyse et l’exécute sur le thread principal, celui-là même qui gère le défilement et les taps.
• Les requêtes. Chaque requête est un aller-retour, et les requêtes vers de nouveaux domaines paient en plus une résolution DNS et une négociation TLS. Un widget qui appelle son serveur au chargement ajoute tout cela à chaque page vue.
• Le stockage. Cookies, localStorage et IndexedDB écrits avant toute interaction. Dans l’UE, cela peut décider si vous avez besoin d’un consentement avant même que le widget se charge.
• Le temps sur le thread principal. Le code qui s’exécute au démarrage entre en concurrence avec le vôtre. Lighthouse le mesure sous le nom de Total Blocking Time, et il se voit dans votre score.

Les quatre widgets de nos pages de comparaison chargeaient entre 220 et 509 kb compressés en gzip avant le moindre clic. Nous l’avons mesuré le 2026-09-26 en chargeant chaque widget sur une page de test vide et en additionnant les octets transférés ; les chiffres et les sources sont sur /vs. Pour comparer, le texte de tout cet article pèse moins de 20 kb.

Rien de tout cela n’est nécessaire pour afficher un bouton. Un bouton, c’est quelques centaines d’octets de HTML et de CSS. Tout le reste (le panneau de chat, la connexion au serveur, l’historique) ne sert qu’après un clic.

ce qu’il faut vérifier avant de choisir un widget

Vous pouvez juger n’importe quel widget de chat avec un navigateur et dix minutes. Voici quoi regarder, par ordre d’impact sur vos visiteurs.

le poids avant le clic

Ouvrez la page de démo de l’éditeur ou votre propre site de préproduction, ouvrez les DevTools et rechargez avec le cache désactivé. Filtrez l’onglet Network sur les domaines de l’éditeur et additionnez la taille transférée. Tout ce qui dépasse quelques kilo-octets avant un clic, c’est du code que vos visiteurs téléchargent pour un panneau que la plupart n’ouvriront jamais.

les requêtes avant le clic, et vers qui

Comptez les requêtes et notez les domaines. Un widget qui parle à son API au chargement envoie quelque chose sur chaque visiteur, au minimum qu’il existe et sur quelle page il se trouve. Certains chargent aussi des outils d’analytics ou de suivi d’erreurs de tiers.

cookies et stockage avant le clic

Regardez l’onglet Application après un chargement neuf, sans toucher au widget. Les cookies posés par les domaines du widget, ou les clés de stockage qu’il a écrites, sont ceux qu’un bandeau de consentement devra peut-être couvrir. Nous ne sommes pas vos avocats et les règles varient selon les pays, alors demandez aux vôtres ce qui s’applique à votre site. Le cas le plus simple à expliquer, c’est un widget qui ne stocke rien tant que le visiteur n’a pas commencé une conversation.

où votre équipe répond

Un chat ne vaut que par sa réponse. Si répondre signifie ouvrir un tableau de bord de plus, quelqu’un doit garder cet onglet ouvert toute la journée. Si les conversations arrivent là où votre équipe parle déjà (Slack, Discord), une réponse tient en un message dans un fil.

ce que ça coûte quand l’équipe grandit

La tarification par siège vous facture chaque personne susceptible de répondre. La tarification par résolution vous facture chaque réponse. La tarification par site vous facture le site, peu importe qui répond et combien de fois.

le téléphone

Vérifiez le lanceur sur un écran de 375 px de large. Il ne doit pas masquer vos propres boutons, et il doit faire au moins 44 px pour qu’un pouce l’atteigne. Ouvrez le panneau et tapez : le clavier ne doit pas cacher le champ de saisie.

pas à pas : un live chat avec spookat

Spookat est construit autour des vérifications ci-dessus. Le snippet charge un petit lanceur depuis notre CDN, avec l’apparence de votre site déjà incluse. Il fait 0 requête vers notre API avant un clic et ne pose aucun cookie. Votre équipe répond dans un fil Slack ou un post de forum Discord. Cela coûte 4,99 € par mois et par site avec broke af, avec des coéquipiers illimités, et l’essai dure 14 jours sans carte.

1. récupérez votre snippet

Connectez-vous au tableau de bord et ajoutez votre site. La page d’installation affiche votre snippet avec votre clé de site déjà insérée, et un bouton pour le copier. Vous pouvez l’ouvrir directement avec votre domaine dans l’adresse :

https://app.spookat.com/install?domain=your-domain.com

2. collez-le avant la balise body fermante

Une seule balise, n’importe où dans la page, idéalement juste avant </body> :

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

async signifie que le navigateur continue d’afficher votre page pendant qu’il récupère le fichier, et l’exécute dès qu’il arrive. Ce fichier, c’est le lanceur : un bouton, ses styles et l’apparence que vous avez publiée dans le tableau de bord. Son build échoue s’il dépasse 4 kb compressés en gzip. Le 2026-09-27, il pesait 2,0 kb.

Si votre site est une single-page app, placez la balise dans le template HTML racine, pas dans un composant qui se ré-affiche. Le lanceur vérifie s’il existe déjà, donc une deuxième copie ne fait rien, mais une balise à un seul endroit est plus simple à comprendre.

3. choisissez une apparence

Il y a 8 styles et 12 polices auto-hébergées, plus la police système du visiteur. Choisissez-les dans le tableau de bord et publiez ; le lanceur récupère la nouvelle apparence en moins d’une minute. Ou définissez-la dans la page, au-dessus du snippet, où elle l’emporte sur le tableau de bord :

<script>
  window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

font: "system" ne télécharge aucune police. Toute autre police vient de notre CDN, seulement après le clic, jamais de Google. accent accepte une couleur hexadécimale, et la couleur du texte posé dessus est choisie pour le contraste. La liste complète des clés est dans la documentation.

4. connectez slack ou discord

Dans le tableau de bord, connectez un canal. Vous validez la connexion dans Slack ou Discord directement, puis vous choisissez le canal dans une liste. Vous n’êtes pas administrateur de l’espace de travail ? Le tableau de bord vous donne un lien à usage unique pour la personne qui l’est, valable 7 jours, et elle n’a pas besoin de compte Spookat.

À partir de là, chaque conversation devient un fil dans Slack ou un post de forum dans Discord.

5. répondez depuis le fil

Répondez dans le fil, et le visiteur le voit dans le widget. Un message qui commence par // reste interne : vous pouvez interroger un collègue sans que le visiteur le lise. Les visiteurs voient votre prénom Slack ou votre pseudo Discord ; /spookat me l’affiche ou le modifie, site par site.

Si le visiteur est parti 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, dans la langue du widget. Avec broke af, la réponse l’attend dans le widget jusqu’à sa prochaine visite.

ou : laissez votre agent tout faire

Si vous développez avec Claude Code, Cursor ou un autre agent de code, collez ceci et laissez-le lire le manuel :

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

L’agent trouve votre template racine, ajoute le snippet et choisit un style adapté à votre site. Connecter Slack ou Discord et payer restent entre vos mains : un humain valide les deux.

vérifiez-le dans les devtools

Ne croyez aucun éditeur sur parole, nous compris. Voici comment vérifier votre propre page dans Chrome. Firefox et Safari ont les mêmes panneaux, sous des noms un peu différents.

l’onglet network, avant le clic

1. Ouvrez votre page dans une fenêtre privée, pour qu’aucun ancien stockage ni cache n’intervienne.
2. Ouvrez les DevTools, allez dans Network, cochez « Disable cache » et rechargez.
3. Tapez spookat dans le champ de filtre.

Vous devriez voir une seule requête : le lanceur depuis cdn.spookat.com, environ 2 kb transférés. Rien ne part vers api.spookat.com. Si vous voyez davantage, c’est qu’autre chose sur la page l’a chargé (un deuxième snippet dans un gestionnaire de balises, par exemple).

l’onglet application, avant le clic

Ouvrez Application, puis Cookies et Local storage pour votre domaine. Spookat n’écrit rien ici au chargement de la page. Il ne pose aucun cookie, jamais. La seule clé de stockage qu’il utilise, spookat: suivi de votre clé de site, n’est écrite qu’après le premier message du visiteur : elle conserve sa conversation sur cet appareil.

après le clic

Videz le journal Network et cliquez sur le lanceur. Le panneau se charge alors depuis le CDN : son script (16,6 kb compressés le 2026-09-27) et la feuille de style de votre style (environ 2 kb). Une police arrive aussi si vous en avez choisi une. Ensuite, le panneau ouvre une connexion vers notre API, et le visiteur peut écrire.

Tout le principe est là : la partie coûteuse passe derrière le clic, et seuls les visiteurs qui veulent discuter la téléchargent.

lighthouse

Lancez Lighthouse en mode mobile sur la page sans le snippet puis avec, plusieurs fois chacune, et comparez les médianes. D’une exécution à l’autre, la même page varie de plusieurs points, donc une seule exécution ne prouve rien dans un sens ni dans l’autre. Avec un lanceur de 2 kb et aucun travail avant le clic, la différence devrait rester dans ce bruit.

quatre façons d’alourdir à nouveau un widget léger

Un petit lanceur ne reste petit que si la page autour le laisse faire. Voici les erreurs que nous voyons le plus, et chacune défait discrètement le travail ci-dessus.

Ouvrir le chat tout seul. Un panneau qui s’ouvre au bout de dix secondes charge tout le chat pour chaque visiteur, y compris ceux qui allaient acheter. Sur téléphone, il masque aussi la page. Si vous voulez lancer la conversation, écrivez un message d’accueil ; il s’affiche quand le chat est ouvert.

Précharger le panneau « pour aller plus vite ». Un <link rel="preload"> ou un prefetch pour le script du panneau ramène son téléchargement avant le clic, pour tout le monde. Après le clic, ce sont deux courtes requêtes vers un CDN proche du visiteur. Laissez-les attendre le clic.

L’envelopper dans un gestionnaire de balises. Un gestionnaire de balises, c’est un script qui charge d’autres scripts. S’il n’existe que pour contenir le snippet du chat, il coûte plus cher que le chat. Mettez la balise directement dans votre template.

Deux snippets. Un thème en ajoute un, un plugin en ajoute un autre, quelqu’un en colle un troisième dans le pied de page. Le lanceur ignore ses propres doublons, mais les autres widgets souvent pas, et vous vous retrouvez avec deux chats qui se disputent le même coin. Cherchez cdn.spookat.com (ou le domaine de votre ancien éditeur) dans vos templates et n’en gardez qu’un.

ce qu’il advient des données

Quand un visiteur envoie un message, celui-ci est d’abord enregistré, puis publié dans votre fil Slack ou votre post Discord. Nous ne stockons jamais d’adresse IP. Le pays du visiteur est déterminé à partir d’une base de données hors ligne au moment du message, et l’adresse n’est pas conservée. L’historique des conversations est gardé 30 jours avec broke af, 90 avec cool guy et 365 avec vc money, puis supprimé. Les détails, y compris les sous-traitants, sont sur la page confidentialité.

une checklist réutilisable

Pour n’importe quel widget de chat, pas seulement le nôtre :

• Le snippet se charge avec async ou defer et ne bloque pas le rendu.
• Avant un clic : quelques kilo-octets, une requête, aucune requête vers l’API de l’éditeur.
• Aucun cookie et aucun stockage avant que le visiteur ne commence une conversation.
• Le lanceur ne masque pas vos propres boutons sur un écran de 375 px.
• Le panneau et ses polices ne se chargent qu’après le clic.
• Votre équipe répond là où elle travaille déjà, sans onglet de plus à surveiller.
• La tarification ne vous pénalise pas quand vous ajoutez un coéquipier.
• Vous l’avez mesuré vous-même, cache désactivé, dans une fenêtre privée.

Essayez-le sur votre propre site : l’essai dure 14 jours et ne demande pas de carte.