Widget de Chat pour React
Installez un widget de chat léger de 3KB sur votre app React en 2 minutes.
Zéro tracking. Zéro cookies. Aucune dépendance.
Installation Rapide (2 Minutes)
- 1.
Inscrivez-vous gratuitement et obtenez votre Site ID depuis le tableau de bord.
S'inscrire Gratuitement → - 2.
Ajoutez la balise script à votre fichier HTML.
Pour Create React App :
public/index.htmlPour Vite :
index.htmlPour Gatsby :
gatsby-ssr.js - 3.
Collez ce code avant la balise de fermeture
</body>:<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script> - ✓
C'est fait ! Le widget apparaît sur toutes les pages automatiquement.
Instructions par Framework
Vous utilisez Next.js ? Consultez notre guide dédié Guide Widget de Chat Next.js →
Create React App (public/index.html)
Ajoutez directement à votre fichier public/index.html.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="root"></div>
<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>
</html>Vite (index.html)
Ajoutez directement à votre fichier index.html racine.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>
</html>Gatsby (gatsby-ssr.js)
Ajoutez à votre fichier gatsby-ssr.js dans le répertoire racine.
import React from 'react'
export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
key="chat-widget"
src="https://api.thechatwidget.com/widget.js"
data-site="YOUR_SITE_ID"
defer
/>
])
}Pourquoi Choisir Ceci Plutôt que les Librairies Chat React ?
3KB vs packages npm lourds
La plupart des librairies chat React font 50-200Ko+ et alourdissent votre bundle. Ceci se charge en externe.
Pas de surcharge du bundle
Une balise script. Pas de npm install. N'augmente pas la taille de votre bundle JavaScript.
Fonctionne avec SSR/SSG
Parfait pour Gatsby et autres frameworks SSR. Pas de problèmes d'hydratation.
Compatible RGPD par défaut
Zéro tracking, zéro cookies. Pas besoin de bannière cookies. Parfait pour la conformité UE.
Questions Fréquentes
Ça fonctionne avec Vite ?
Oui ! Ajoutez simplement la balise script à votre fichier index.html. Fonctionne parfaitement avec Vite + React.
Ça fonctionnera avec TypeScript ?
Oui ! La balise script fonctionne avec TypeScript. Pas besoin de définitions de types - c'est juste une balise script.
Ça fonctionne avec Create React App ?
Oui ! Ajoutez la balise script à votre fichier public/index.html. Fonctionne avec CRA, éjecté ou non.
Ça va ralentir mon app React ?
Non. Avec 3KB, c'est 20-40 fois plus léger que la plupart des librairies chat. Se charge de manière asynchrone et ne bloque pas le rendu.
Puis-je l'utiliser avec React Native ?
Ce widget est conçu pour les navigateurs web. Pour React Native, vous auriez besoin d'une autre solution. Contactez-nous si vous avez besoin de support mobile.
Prêt à Ajouter le Chat à Votre App React ?
Inscrivez-vous gratuitement et ayez votre widget de chat en 2 minutes. Sans carte bancaire.