Intégration React
Ajoutez un chatbot IA à votre app React
Ajoutez le widget intoCHAT avec une balise script dans index.html, ou chargez-le depuis un petit composant avec useEffect. Il reste en place lors des changements de route côté client.
Dernière mise à jour:
Comment intoCHAT fonctionne dans React
Le widget intoCHAT est un simple script, pas un composant React. Il lit l'identifiant de votre agent dans l'attribut data-chatbot-id de l'élément script qui l'a chargé, puis ajoute une bulle de chat à document.body, en dehors de votre arbre React. Il fonctionne donc avec n'importe quel routeur ou bibliothèque d'état, et les re-rendus n'y touchent jamais. Les couleurs, la position et le message d'accueil se règlent dans intoCHAT : pas besoin d'un nouveau build pour les modifier.
Installer intoCHAT dans une app React
Créez et entraînez votre agent
Inscrivez-vous sur intoCHAT, créez un agent et ajoutez votre site dans l'onglet Knowledge. L'exploration affiche les pages qui dépendent de JavaScript avant de les lire : les routes que votre app rend dans le navigateur sont lues telles que les visiteurs les voient.
Copiez la balise script
Ouvrez l'onglet Share et copiez le code sous Bubble Chat. Il contient déjà l'identifiant de votre agent.
Le plus simple : collez-la dans index.html
Collez la balise script juste avant la balise de fermeture du body dans index.html : à la racine du projet avec Vite, ou dans public/index.html avec Create React App.
Ou chargez-la depuis un composant
Pour la garder dans le code, ajoutez le composant IntoChatWidget ci-dessous et affichez-le une seule fois dans votre composant racine, par exemple App. Utilisez une seule des deux options.
Vérifiez
Lancez votre app. La bulle de chat apparaît dans le coin inférieur et reste en place quand vous changez de route.
IntoChatWidget.jsx
import { useEffect } from 'react'
export default function IntoChatWidget() {
useEffect(() => {
// Load the widget only once, even when StrictMode runs effects twice
if (document.getElementById('intochat-embed')) return
const script = document.createElement('script')
script.id = 'intochat-embed'
script.src = 'https://www.intochat.ai/api/embed.js'
script.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID')
document.body.appendChild(script)
}, [])
return null
}Le widget lit l'identifiant de l'agent dans l'attribut data-chatbot-id de l'élément script qui l'a chargé : définissez donc l'attribut avant d'ajouter l'élément à la page. La vérification de l'id évite une deuxième copie en développement.
Ce que l'agent peut faire dans votre app React
Actions côté client
Enregistrez des fonctions avec window.IntoChatActions.register, et l'agent peut les appeler pendant un chat pour lire l'état de votre app ou déclencher une action qu'elle définit.
Actions API personnalisées
Laissez l'agent appeler votre API HTTP, avec authentification bearer, basic, clé API ou en-têtes personnalisés. Importez une requête depuis cURL et choisissez les champs de réponse que le modèle voit.
Lit vos pages rendues
L'exploration du site affiche les pages qui dépendent de JavaScript avant de les lire, trouve jusqu'à 500 URL via le sitemap et les liens, et permet d'exclure des chemins avec des motifs.
Des réponses fondées
Recherche hybride sémantique et par mots-clés dans vos contenus, avec des règles qui s'en tiennent à vos sources, résistent à l'injection de prompt et signalent quand la réponse manque.
Collecte de leads
Demandez un e-mail ou un numéro de téléphone dans le chat, manuellement, selon des règles ou quand l'IA le décide. Les leads vous sont envoyés par e-mail et s'exportent en CSV.
Nouveau style sans nouveau build
Couleurs, avatar, icône du bouton, position et message d'accueil se règlent dans l'onglet Appearance et arrivent avec le widget, pas depuis votre bundle.
Questions fréquentes
Faut-il utiliser index.html ou le composant ?
index.html est l'option la plus simple et charge le widget sur chaque page. Choisissez le composant pour décider dans le code s'il se charge, par exemple seulement en production ou seulement après l'accord du visiteur pour les cookies. N'utilisez qu'une des deux options, sinon vous aurez deux bulles.
Pourquoi vois-je deux bulles de chat en développement ?
React StrictMode exécute les effets deux fois en développement, et le widget ajoute une nouvelle bulle à chaque exécution de son script. La vérification de l'id en tête de l'effet empêche la deuxième exécution d'ajouter un autre script. Vérifiez aussi que le script ne figure pas en plus dans index.html.
Le widget ralentit-il mon app React ?
Chargé depuis le composant, le script est ajouté après le rendu de votre app : il ne retarde pas le premier rendu. Dans index.html, c'est un script classique en fin de body. Dans les deux cas, la fenêtre de chat tourne dans son propre iframe servi par intoCHAT, séparé du code de votre app.
Est-ce compatible avec React Router et le routage côté client ?
Oui. Le widget vit dans document.body, en dehors de votre racine React : les changements de route et les re-rendus ne l'affectent pas. Il reste aussi en place si le composant qui l'a chargé est démonté, jusqu'au prochain rechargement complet de la page.
L'agent peut-il exécuter du code dans mon app React ?
Oui, avec les actions côté client. Enregistrez une fonction avec window.IntoChatActions.register, et l'agent peut l'appeler pendant un chat pour lire l'état de votre app ou déclencher une action qu'elle définit. Si votre code s'exécute avant le chargement du widget, ajoutez le nom et la fonction sous forme de paire dans window.IntoChatActionsQueue, et le widget les enregistre à son démarrage.
Mon app a une Content Security Policy. Que dois-je autoriser ?
Autorisez www.intochat.ai dans script-src pour le script, dans connect-src pour le chargement des réglages de l'agent et dans frame-src pour la fenêtre de chat. Sans ces entrées, le navigateur bloque le widget et la bulle n'apparaît pas.
Voyez-le répondre à partir de votre site
Collez l’adresse de votre site et discutez avec un agent créé à partir de vos pages. Cela prend environ une minute.
Créer votre agent gratuitementOffre gratuite, sans carte bancaire.