Vous voulez ajouter un chatbot sur votre site web mais vous ne savez pas par où commencer ? Bonne nouvelle : intégrer un chatbot ne nécessite aucune compétence technique. Une seule ligne de code suffit — et dans cet article, on vous montre exactement où la coller selon votre plateforme.

Pourquoi intégrer un chatbot sur votre site ?

Un chatbot bien configuré peut répondre à 80 % des questions récurrentes de vos visiteurs sans que vous n'ayez à intervenir. Résultat : moins d'appels, moins d'emails, et des prospects qualifiés même la nuit.

Disponibilité 24h/24 — votre site répond même quand vous dormez
Qualification automatique — le chatbot collecte nom, email, téléphone avant de transmettre le lead
Réduction du taux de rebond — un visiteur qui obtient une réponse reste plus longtemps
Support client automatisé — FAQ, horaires, tarifs répondus instantanément

Les 4 étapes pour intégrer un chatbot sur votre site

Étape 1 — Créer votre chatbot

Rendez-vous sur botexpress.fr et créez un compte gratuit. Entrez l'URL de votre site : notre IA analyse automatiquement toutes vos pages, extrait le contenu, vos couleurs et votre logo, puis génère un chatbot aux couleurs de votre marque.

Étape 2 — Personnaliser

Depuis le dashboard, ajustez le nom du chatbot, son message d'accueil et sa couleur principale. L'aperçu en temps réel vous montre exactement ce que verront vos visiteurs.

Étape 3 — Copier le code d'intégration

Dans l'onglet Configuration de votre chatbot, vous trouvez votre code d'intégration personnalisé. Il ressemble à ceci :

<script
  src="https://www.botexpress.fr/widget.js"
  data-chatbot-id="votre-id-unique"
  data-api-url="https://agentai-23tt.onrender.com"
  defer
></script>

Étape 4 — Coller dans votre site

Collez ce code juste avant la balise </body> de votre site. L'endroit exact dépend de votre plateforme — on vous explique ci-dessous pour chaque cas.

Intégration par type de site

Site HTML classique

Ouvrez votre fichier index.html (ou le fichier de template principal). Trouvez la ligne </body> et collez le script juste au-dessus. Enregistrez et uploadez le fichier sur votre serveur.

    <!-- Votre contenu -->
    <script src="https://www.botexpress.fr/widget.js"
            data-chatbot-id="votre-id"
            defer></script>
  </body>
</html>

WordPress

La méthode recommandée pour WordPress est d'utiliser le plugin officiel botexpress, téléchargeable depuis votre dashboard. Il suffit de l'installer, de l'activer, puis de coller votre Chatbot ID dans Réglages → botexpress. Le script s'injecte automatiquement sur toutes les pages.

Vous pouvez aussi l'ajouter manuellement via Apparence → Éditeur → footer.php juste avant </body>, ou via une extension comme Header Footer Code Manager.

Shopify

Dans votre admin Shopify, allez dans Boutique en ligne → Thèmes → Modifier le code. Ouvrez le fichier layout/theme.liquid et collez le script juste avant </body>. Sauvegardez.

React / Next.js

Dans un projet Next.js App Router, ajoutez le script dans votre app/layout.tsx en utilisant le composant Script de Next.js :

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://www.botexpress.fr/widget.js"
          data-chatbot-id="votre-id"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Webflow / Wix / Squarespace

Ces plateformes proposent une section Code personnalisé dans les paramètres du site. Cherchez dans Paramètres → Code personnalisé → Pied de page (ou équivalent selon la plateforme) et collez-y votre script.

Vue.js / Nuxt

Pour Nuxt 3, ajoutez le script dans nuxt.config.ts :

export default defineNuxtConfig({
  app: {
    head: {
      script: [{
        src: "https://www.botexpress.fr/widget.js",
        "data-chatbot-id": "votre-id",
        defer: true,
      }],
    },
  },
})

Le chatbot s'adapte-t-il au thème dark/light de mon site ?

Oui. Le widget botexpress détecte automatiquement si votre site est en mode sombre ou clair grâce à la classe dark sur votre <html> (standard Tailwind CSS et next-themes). Si votre site bascule en mode sombre, le chatbot bascule également.

Vous pouvez aussi choisir une couleur de fond personnalisée depuis votre dashboard — dans ce cas, cette couleur est toujours utilisée, indépendamment du thème du site.

Questions fréquentes sur l'intégration d'un chatbot

Faut-il un développeur pour intégrer un chatbot ?

Non. Une seule ligne de code à coller dans votre site suffit. Si vous savez modifier du texte dans votre CMS ou dans un fichier HTML, vous pouvez intégrer botexpress.

Le chatbot ralentit-il mon site ?

Non. Le script est chargé avec l'attribut defer, ce qui signifie qu'il ne bloque pas le chargement de votre page. Il s'initialise en arrière-plan après le chargement du contenu principal.

Puis-je limiter le chatbot à certaines pages ?

Oui. Vous pouvez choisir de n'intégrer le script que sur certaines pages de votre site (page de contact, page produit, etc.) plutôt que sur l'ensemble du site.

Le chatbot fonctionne-t-il en mobile ?

Oui, le widget est entièrement responsive. Il s'adapte à toutes les tailles d'écran et respecte les zones de sécurité (notch, barre de navigation).

Comment intégrer un chatbot sur son site web (2026)