Intégration du widget

Ajoutez votre chatbot AI à n'importe quel site web en quelques secondes grâce à notre simple embed code.

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 web.

Trouver l'ID de votre chatbot

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

Ou trouvez l'ID dans l'URL de votre tableau de bord : /dashboard/company/chatbots/[CHATBOT_ID]

Options du widget

Personnalisez le widget avec des attributs data :

Options de base

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

Remplacement des couleurs

Remplacez les paramètres du tableau de bord par des couleurs en ligne :

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

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"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

Le widget FAQ affiche les FAQ publiées par votre chatbot.

Options du widget FAQ

Exemple de filtre par catégorie

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="livraison,retours"
  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 à l'ouverture
• Gestion du clavier iOS (le widget s'adapte au clavier à l'écran)
• Support des zones sûres pour l'encoche et l'indicateur d'accueil de l'iPhone
• Cibles tactiles plus grandes pour une meilleure utilisabilité
• Taille de police de saisie empêchant le zoom automatique iOS

Guides spécifiques à la plateforme

WordPress

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

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

1. Installez n'importe quel plugin "Header/Footer Scripts"
2. Ajoutez le code d'intégration dans la section de pied de page
3. Enregistrez et publiez

Shopify

Recommandé : Application Shopify ChatReact

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

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

L'application prend également en charge les widgets Formulaire 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 à votre App.vue principal ou à votre mise en page :

<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>

JavaScript API

Interagissez avec le widget par programmation :

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

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

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Tests

Mode d'aperçu

Avant l'intégration en production :

1. Utilisez la Preview feature dans votre dashboard
2. Testez différents scénarios
3. Vérifiez que les réponses sont précises

Développement local

Pour les tests locaux, utilisez des URL localhost :

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Dépannage

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 pub interfèrent

Conflits de style

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

• Le widget utilise le shadow DOM pour l'isolation
• Vérifiez les valeurs de z-index
• Assurez-vous qu'aucun !important ne remplace

Performances

Le widget est conçu pour un impact minimal :

• Lazy loaded
• < 50KB total size
• Non-blocking
• Mise en cache agressive

Étapes suivantes

• Plugin WordPress →
• Intégration Shopify →
• Gestion des FAQ →