Intégration du Widget

Ajoutez votre chatbot IA à n'importe quel site web en quelques secondes avec notre simple code d'intégration.

Démarrage rapide

Ajoutez ce code avant la balise de fermeture </body> :

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

C'est tout ! Votre chatbot est maintenant en ligne sur votre site.

Trouver l'ID de votre Chatbot

1. Allez dans les paramètres de votre chatbot
2. Naviguez vers l'onglet Embed
3. Copiez le code d'intégration (il contient votre ID)

Personnalisation du Widget

L'apparence et le comportement du widget sont configurés dans votre tableau de bord — pas dans le code d'intégration. Allez dans Dashboard → Chatbots → [votre chatbot] → Widget pour ajuster :

• Position — bas-droit, bas-gauche, ou inline
• Couleurs — couleurs primaire, d'arrière-plan et du texte, plus le rayon des bordures
• Taille — largeur et hauteur du widget

Pour ouvrir la conversation automatiquement après un délai configurable, activez Auto-Open dans l'onglet Behavior de la même page de paramètres.

Les modifications s'appliquent automatiquement à votre site — pas besoin de mettre à jour le code d'intégration. Consultez le guide Widget Customization pour toutes les options disponibles.

La langue du widget est détectée automatiquement à partir du navigateur de chaque visiteur, en fonction des langues que vous activez dans l'onglet Languages de votre chatbot.

Widget FAQ

Affichez les FAQ sous forme d'accordéon sur n'importe quelle page :

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

Le widget FAQ affiche les FAQ publiées de votre chatbot. Les couleurs et le style (primaire, arrière-plan et couleurs du texte, rayon des bordures) sont configurés dans Dashboard → FAQs → Settings.

Options du Widget FAQ

Exemple de Filtre de Catégorie

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Optimisation Mobile

Le widget de chat est entièrement optimisé pour les appareils mobiles :

• Mise en page pleine largeur sur les petits écrans
• Animation de glissement vers le haut lors de l'ouverture
• Gestion du clavier iOS (le widget s'ajuste au clavier à l'écran)
• Prise en charge des zones de sécurité pour l'encoche et l'indicateur d'accueil des iPhone
• Zones tactiles plus grandes pour une meilleure utilisabilité
• Taille de police d'entrée empêchant le zoom automatique sur iOS

Guides par Plateforme

WordPress

Recommandé : Utilisez le ChatReact WordPress Plugin officiel pour l'intégration la plus simple avec les blocs Gutenberg, les widgets Elementor et les shortcodes.

Alternative : Intégration manuelle via un plugin "Header/Footer Scripts" :

1. Installez un plugin "Header/Footer Scripts"
2. Ajoutez le code d'intégration dans la section footer
3. Enregistrez et publiez

Shopify

Recommandé : ChatReact Shopify App

Installez l'application ChatReact depuis le Shopify App Store pour l'intégration la plus simple :

1. Installez l'application ChatReact dans votre admin Shopify
2. Entrez votre Chatbot ID dans les paramètres de l'application
3. Le widget de chat apparaît automatiquement sur votre boutique
4. Gérez les affectations du widget par page, ou activez-le partout

L'application prend également en charge les widgets Form et FAQ en tant que App Blocks dans le Theme Editor.

Alternative : Intégration manuelle

1. Allez dans Online Store → Themes → Edit Code
2. Ouvrez theme.liquid
3. Ajoutez le code avant </body>
4. Enregistrez

Webflow

1. Allez dans Project Settings → Custom Code
2. Ajoutez dans Footer Code
3. Publiez le site

Next.js / React

Utilisez le composant Script :

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Ajoutez-le dans votre App.vue principal ou layout :

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

API JavaScript

Interagissez avec le widget de manière programmatique :

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Tests

Mode Aperçu

Avant d'intégrer en production :

1. Utilisez la fonctionnalité Preview dans votre tableau de bord
2. Testez différents scénarios
3. Vérifiez que les réponses sont correctes

Dépannage

Le Widget n'Apparaît Pas

1. Vérifiez la console du navigateur pour des erreurs
2. Vérifiez que l'ID du chatbot est correct
3. Assurez-vous que le chatbot est actif (non désactivé)
4. Vérifiez si des bloqueurs de publicités interfèrent
5. Vérifiez votre utilisation du plan — le widget se met en pause lorsque la limite mensuelle de votre plan est atteinte

Plugins de Mise en Cache & d'Optimisation

Certains plugins de mise en cache ou d'optimisation de scripts réécrivent les URL des scripts, ce qui peut empêcher le chargement du widget. Si cela se produit, ajoutez une URL d'API explicite à la balise script :

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-api-url="https://www.chatreact.ai"
  async
></script>

Le même attribut fonctionne pour les scripts des widgets FAQ et form.

Conflits de Style

Si le CSS de votre site crée des conflits :

• Le widget isole ses styles dans son propre conteneur et utilise des règles à haute priorité pour résister aux conflits
• Vérifiez les valeurs de z-index des éléments qui chevauchent le widget
• Évitez les règles larges !important dans le CSS de votre site qui ciblent des éléments génériques

Performance

Le widget est conçu pour un impact minimal :

• Se charge de façon asynchrone — ne bloque jamais le rendu de votre page
• Léger : environ 30 KB en transfert compressé

Étapes suivantes

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — intégrez des formulaires autonomes avec le widget form