Comment intégrer un chatbot sur n’importe quel site web

Vous avez un chatbot entraîné. Il vous faut maintenant le mettre sur votre site web. Agentkit prend en charge quatre méthodes d’intégration, et celle qui vous convient dépend de votre plateforme, de votre configuration technique et du niveau de contrôle dont vous avez besoin. Ce guide couvre les quatre options avec des exemples de code, des détails de configuration et des instructions propres à chaque plateforme.

Les méthodes d’intégration en un coup d’œil

La plupart des utilisateurs devraient commencer par le widget JS. Il fonctionne sur n’importe quelle plateforme, se charge de manière asynchrone, et prend moins de cinq minutes à mettre en place.

Avant de commencer

Chaque méthode d’intégration nécessite un chatbot entraîné. Si vous n’en avez pas encore :

1. Inscrivez-vous sur Agentkit (gratuit).
2. Créez un chatbot et entraînez-le sur votre contenu à l’aide d’URL de site web, de documents, de paires Q&R ou de texte.
3. Testez-le dans le Playground jusqu’à ce que les réponses soient exactes.
4. Récupérez votre code d’intégration depuis Paramètres puis Publier dans le tableau de bord.

Pour un guide d’entraînement, consultez Comment entraîner un chatbot sur le contenu de votre site web.

Méthode 1 : widget JavaScript

Le widget JS est la méthode d’intégration universelle. Une balise de script, placée avant la balise fermante </body>, charge une bulle de discussion sur votre site. Elle fonctionne sur toute plateforme qui autorise le JavaScript personnalisé : sites HTML statiques, plateformes CMS, créateurs de landing pages et applications web.

Installation de base

Copiez cette balise de script et placez-la avant la balise fermante </body> de votre page :

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Remplacez your-chatbot-id par l’ID réel indiqué dans votre tableau de bord Agentkit. L’attribut async garantit que le script se charge sans bloquer votre page.

C’est tout ce dont vous avez besoin pour un chatbot fonctionnel. Le widget apparaît sous forme de bulle de discussion en bas à droite. Les visiteurs cliquent dessus pour ouvrir une conversation.

Configuration via les attributs de données

Vous pouvez personnaliser le comportement du widget en ajoutant des attributs de données à la balise de script :

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  data-position="bottom-right"
  data-theme="light"
  async>
</script>

Attributs de données disponibles

La majorité de la personnalisation visuelle (couleurs, message d’accueil, image de marque) est contrôlée depuis le tableau de bord Agentkit plutôt que via les attributs de données. Cela garde votre code d’intégration simple et vous permet de mettre à jour les paramètres sans modifier le code de votre site.

Comment le widget se charge

Le script du widget est léger et se charge de manière asynchrone. Voici ce qui se passe :

1. Votre page se charge normalement. L’attribut async signifie que le script ne bloque pas le rendu.
2. Le script se télécharge depuis notre CDN et s’initialise.
3. Une bulle de discussion apparaît sur la page.
4. Lorsqu’un visiteur clique sur la bulle, l’interface de chat complète se charge.
5. Les messages sont envoyés à l’API Agentkit et renvoyés en flux continu en temps réel.

Le script initial est petit. L’interface de chat complète ne se charge que lorsque le visiteur interagit avec la bulle, ce qui a un impact minimal sur la vitesse de votre page.

Installation du widget selon la plateforme

Le widget JS fonctionne sur toutes les plateformes, mais les étapes pour ajouter le script diffèrent selon la plateforme. Voici des liens rapides vers des guides spécifiques à chaque plateforme :

Méthode 2 : composant React

Si vous développez avec React, Next.js, Remix ou Gatsby, le composant React offre une intégration plus étroite que la simple balise de script. Vous bénéficiez d’une configuration par props, de types TypeScript, et de la possibilité de vous connecter aux événements du chatbot.

Installation

Installez le package React d’Agentkit :

npm install @agentkit/react

Utilisation de base

import { AgentitkChat } from '@agentkit/react';

function App() {
  return (
    <AgentitkChat chatbotId="your-chatbot-id" />
  );
}

Cela affiche la même bulle de discussion que le widget JS, mais en tant que composant React au sein de l’arborescence de composants de votre application.

Props

Intégration Next.js

Dans un projet Next.js avec l’App Router, ajoutez le chatbot à votre layout racine afin qu’il apparaisse sur toutes les pages :

// app/layout.tsx
import { AgentitkChat } from '@agentkit/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <AgentitkChat chatbotId="your-chatbot-id" />
      </body>
    </html>
  );
}

Pour le Pages Router, ajoutez plutôt le composant à _app.tsx.

Quand utiliser le composant React plutôt que le widget JS

Si vous utilisez React, utilisez le composant React. Pour tout le reste, utilisez le widget JS.

Méthode 3 : iframe

La méthode iframe intègre le chatbot comme une page autonome dans un cadre sur votre site. C’est utile dans les environnements où l’injection de JavaScript est restreinte, ou lorsque vous voulez afficher le chatbot comme un élément intégré au flux de la page plutôt que comme une bulle flottante.

Intégration iframe basique

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

Cela affiche l’interface de chat complète directement dans votre page, et non comme une bulle flottante.

Quand utiliser l’iframe

Configuration de l’iframe

Personnalisez l’iframe via des paramètres d’URL :

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id?theme=dark"
  style="width: 400px; height: 600px; border: none; border-radius: 12px;"
  allow="clipboard-write">
</iframe>

Dimensionner l’iframe

L’iframe ne se redimensionne pas automatiquement. Vous contrôlez ses dimensions via CSS :

• Chat intégré pleine largeur : width: 100%; height: 600px;
• Chat en barre latérale : width: 400px; height: 100vh; positionné dans une mise en page en barre latérale.
• Widget compact : width: 350px; height: 500px; pour une zone intégrée plus petite.

Limites de l’intégration iframe

Pour la plupart des sites web, le widget JS est un meilleur choix. N’utilisez l’iframe que lorsque le widget JS n’est pas une option, ou lorsque vous voulez spécifiquement une expérience de chat intégrée.

Méthode 4 : plugin WordPress

Les sites WordPress peuvent utiliser le widget JS via l’une des méthodes décrites ci-dessus, mais il existe aussi une approche dédiée utilisant des plugins d’extraits de code, qui simplifie le processus pour les utilisateurs non techniques.

Mise en place rapide avec WPCode

1. Installez le plugin WPCode (gratuit, plus de 2 millions d’installations) depuis Plugins puis Add New.
2. Allez dans Code Snippets puis Header & Footer.
3. Collez la balise de script Agentkit dans la section Footer.
4. Enregistrez.

Le chatbot apparaît désormais sur chaque page. WPCode prend également en charge la logique conditionnelle afin d’afficher le chatbot uniquement sur des pages spécifiques.

Autres méthodes WordPress

Pour le guide WordPress complet avec le dépannage, consultez Comment ajouter un chatbot à WordPress.

Options de personnalisation

Quelle que soit la méthode d’intégration utilisée, l’essentiel de la personnalisation se fait depuis le tableau de bord Agentkit. Cela signifie que vous pouvez modifier les paramètres sans toucher à votre code d’intégration.

Personnalisation visuelle

Personnalisation comportementale

Considérations de sécurité

Lors de l’intégration d’un chatbot sur votre site, gardez ces paramètres de sécurité à l’esprit.

Restriction de domaine

Configurez toujours la restriction de domaine dans les paramètres de votre chatbot. Cela garantit que votre chatbot ne se charge que sur vos domaines autorisés. Sans elle, quiconque trouve l’ID de votre chatbot pourrait l’intégrer sur son propre site et consommer votre quota de messages.

Allez dans Paramètres dans le tableau de bord Agentkit et ajoutez chaque domaine où le chatbot doit fonctionner :

• Votre domaine principal (par exemple yourbusiness.com)
• Tout sous-domaine (par exemple support.yourbusiness.com)
• Les domaines de développement ou de préproduction si vous devez tester

Limite de débit

La limite de débit plafonne le nombre de messages qu’un même visiteur peut envoyer par session. Cela empêche les abus et aide à gérer votre quota de messages. Une limite de 15 à 25 messages par session est raisonnable pour la plupart des sites.

Content Security Policy

Si votre site utilise des en-têtes Content Security Policy, vous devez autoriser les domaines Agentkit. Ajoutez ce qui suit à votre CSP :

• script-src : cdn.agentkit.ai
• frame-src : cdn.agentkit.ai (si vous utilisez la méthode iframe)
• connect-src : *.agentkit.com (pour les appels API)

Dépannage des problèmes d’intégration courants

Le chatbot n’apparaît pas

Le chatbot apparaît mais ne répond pas

• Vérifiez les données d’entraînement. Un chatbot non entraîné n’a aucune matière sur laquelle s’appuyer.
• Vérifiez l’ID du chatbot. Un ID incorrect fait que le widget se charge mais ne trouve pas le chatbot.
• Vérifiez la restriction de domaine. Si votre domaine ne figure pas sur la liste autorisée, le chatbot ne répondra pas.
• Vérifiez le quota de votre forfait. Si vous avez utilisé tous vos messages mensuels, le chatbot cessera de répondre jusqu’au prochain cycle de facturation.

Le chatbot entre en conflit avec d’autres widgets

Si un autre widget de chat (Intercom, Crisp, Drift) chevauche le vôtre, retirez l’autre widget, passez la position d’Agentkit à bottom-left, ou utilisez la méthode iframe pour placer le chatbot en ligne plutôt que comme bulle flottante.

Choisir le bon forfait pour votre intégration

La facturation annuelle permet d’économiser environ 20 % sur tous les forfaits payants. Commencez avec le forfait Free pour tester l’intégration, puis passez à un forfait supérieur lorsque votre trafic le nécessite.

Prochaines étapes

Une fois votre chatbot intégré, le travail passe de l’installation à l’optimisation :

1. Surveillez les conversations dans le tableau de bord Agentkit pendant la première semaine. Identifiez les questions sur lesquelles le chatbot peine.
2. Ajoutez des données d’entraînement pour les points faibles. Les paires Q&R sont le moyen le plus rapide de corriger des problèmes de réponse spécifiques.
3. Activez la collecte de prospects pour recueillir les e-mails des visiteurs pendant les conversations. Consultez le guide de génération de prospects.
4. Connectez le chatbot à vos outils via Zapier, les webhooks ou l’API REST. Consultez le guide d’intégration.
5. Configurez la restriction de domaine et la limite de débit pour la sécurité et la gestion du quota.

Pour des guides propres à chaque plateforme, consultez les guides détaillés :

• WordPress
• Shopify
• Squarespace
• Wix
• Webflow

Créez votre chatbot gratuitement →

Aucune carte bancaire requise.