ITSkillsCenter
Intelligence Artificielle

Tutoriel : Créer un chatbot IA pour votre site web

8 min de lecture

Pourquoi ajouter un chatbot IA à votre site web en 2026

Un chatbot IA sur votre site web peut répondre aux visiteurs 24h/24, qualifier des prospects, prendre des rendez-vous et réduire la charge de votre équipe support. Pour une entreprise au Sénégal, c’est particulièrement utile : vos clients envoient des messages à toute heure sur WhatsApp, et un chatbot peut gérer les questions récurrentes pendant que vous dormez.

Ce guide vous montre concrètement comment créer et déployer un chatbot IA sur votre site — des solutions no-code gratuites aux intégrations avancées avec l’API OpenAI ou Claude.

Les 3 types de chatbots

1. Chatbot à règles (rule-based)

  • Fonctionnement : arbre de décision prédéfini — l’utilisateur clique sur des boutons ou choisit parmi des options
  • Avantages : simple, prévisible, pas de risque de réponse incorrecte
  • Limites : ne comprend pas les questions libres, nécessite de prévoir tous les scénarios
  • Idéal pour : FAQ, prise de rendez-vous, collecte d’informations basiques

2. Chatbot IA conversationnel

  • Fonctionnement : utilise un LLM (GPT-4, Claude, Mistral) pour comprendre et répondre en langage naturel
  • Avantages : comprend les questions complexes, peut répondre à des questions imprévues
  • Limites : peut halluciner (inventer des infos), coût par requête API
  • Idéal pour : support client avancé, conseil personnalisé, assistance technique

3. Chatbot IA avec RAG (Retrieval-Augmented Generation)

  • Fonctionnement : le LLM interroge votre base de connaissances (site web, documents, FAQ) avant de répondre
  • Avantages : réponses précises basées sur vos propres données, réduit les hallucinations
  • Limites : setup plus complexe, nécessite de maintenir la base de connaissances
  • Idéal pour : entreprises avec beaucoup de contenu (e-commerce, SaaS, formation)

Méthode 1 : Chatbot no-code avec Tidio (gratuit)

La solution la plus rapide pour les débutants. Tidio offre un plan gratuit avec chatbot IA inclus.

Étapes d’installation

  • Étape 1 : créez un compte sur tidio.com (plan gratuit = 50 conversations/mois avec l’IA)
  • Étape 2 : dans le dashboard Tidio, allez dans « Lyro AI Chatbot » et activez-le
  • Étape 3 : importez votre FAQ — collez les questions/réponses ou donnez l’URL de votre page FAQ
  • Étape 4 : personnalisez l’apparence (couleurs, avatar, message d’accueil)
  • Étape 5 : installez sur WordPress — plugin « Tidio » depuis l’admin WordPress, ou collez le script dans le header
  • Étape 6 : testez en ouvrant votre site en navigation privée

Alternatives no-code

  • Chatbase : uploadez des documents/URLs, il crée un chatbot IA entraîné sur votre contenu. Plan gratuit : 20 messages/mois
  • Botpress : plateforme open-source avec interface visuelle. Gratuit pour les petits volumes
  • Voiceflow : interface drag-and-drop puissante, idéale pour les chatbots complexes
  • Crisp : live chat + chatbot IA, populaire en Afrique francophone. Plan gratuit disponible

Méthode 2 : Chatbot IA personnalisé avec Chatbase

Chatbase est idéal si vous voulez un chatbot qui connaît votre entreprise sans écrire de code.

  • Étape 1 : allez sur chatbase.co et créez un compte
  • Étape 2 : cliquez « New Chatbot » et choisissez vos sources de données :
    • URLs de votre site (il crawle automatiquement les pages)
    • Documents PDF (catalogue produits, conditions générales)
    • Texte brut (FAQ, scripts de vente)
  • Étape 3 : configurez le « System Prompt » — c’est la personnalité de votre chatbot. Exemple :
Tu es l'assistant virtuel d'ITSkillsCenter, un centre de formation IT basé à Dakar, Sénégal. Tu réponds en français. Tu aides les visiteurs à :
- Découvrir nos formations (développement web, IA, cybersécurité, marketing digital)
- Connaître les tarifs et modalités de paiement (Wave, Orange Money, virement)
- Prendre rendez-vous pour une session d'information
Si tu ne connais pas la réponse, dis-le honnêtement et propose de contacter l'équipe par WhatsApp au +221 XX XXX XX XX.
  • Étape 4 : testez le chatbot dans l’interface Chatbase
  • Étape 5 : copiez le code d’intégration (iframe ou script) et collez-le dans votre site

Méthode 3 : Chatbot avec l’API OpenAI (développeurs)

Pour un contrôle total, construisez votre propre chatbot avec l’API. Voici l’architecture :

Architecture du chatbot

[Widget frontend (HTML/JS)] 
    ↓ requête utilisateur
[Votre serveur backend (Node.js/Python)]
    ↓ appel API
[OpenAI API / Claude API]
    ↓ réponse
[Widget frontend affiche la réponse]

Backend Node.js (Express)

const express = require('express');
const OpenAI = require('openai');
const app = express();
app.use(express.json());

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const SYSTEM_PROMPT = `Tu es l'assistant d'ITSkillsCenter Dakar. 
Tu réponds en français, de manière concise et utile.
Tu connais nos formations, tarifs et modalités.`;

// Historique simple en mémoire (en production, utilisez Redis ou une DB)
const conversations = new Map();

app.post('/api/chat', async (req, res) => {
  const { message, sessionId } = req.body;
  
  // Récupérer ou créer l'historique
  if (!conversations.has(sessionId)) {
    conversations.set(sessionId, [
      { role: 'system', content: SYSTEM_PROMPT }
    ]);
  }
  const history = conversations.get(sessionId);
  history.push({ role: 'user', content: message });
  
  // Limiter l'historique à 20 messages pour contrôler les coûts
  const trimmed = [history[0], ...history.slice(-19)];
  
  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini', // Bon rapport qualité/prix
    messages: trimmed,
    max_tokens: 500,
    temperature: 0.7
  });
  
  const reply = completion.choices[0].message.content;
  history.push({ role: 'assistant', content: reply });
  
  res.json({ reply });
});

app.listen(3000);

Widget frontend

<!-- Ajoutez ce code avant </body> dans votre site -->
<div id="chatbot-widget" style="position:fixed;bottom:20px;right:20px;z-index:9999">
  <button onclick="toggleChat()" style="width:60px;height:60px;border-radius:50%;
    background:#2563eb;color:white;border:none;font-size:24px;cursor:pointer">💬</button>
  <div id="chat-window" style="display:none;width:350px;height:500px;
    background:white;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.15);
    flex-direction:column;overflow:hidden">
    <div style="background:#2563eb;color:white;padding:16px;font-weight:bold">
      Assistant ITSkillsCenter
    </div>
    <div id="messages" style="flex:1;overflow-y:auto;padding:12px"></div>
    <div style="padding:12px;border-top:1px solid #eee;display:flex;gap:8px">
      <input id="user-input" type="text" placeholder="Posez votre question..."
        style="flex:1;padding:8px;border:1px solid #ddd;border-radius:8px"
        onkeypress="if(event.key==='Enter')sendMessage()">
      <button onclick="sendMessage()" 
        style="padding:8px 16px;background:#2563eb;color:white;border:none;border-radius:8px">
        Envoyer</button>
    </div>
  </div>
</div>

<script>
const sessionId = 'session_' + Math.random().toString(36).substr(2, 9);

function toggleChat() {
  const w = document.getElementById('chat-window');
  w.style.display = w.style.display === 'none' ? 'flex' : 'none';
}

async function sendMessage() {
  const input = document.getElementById('user-input');
  const message = input.value.trim();
  if (!message) return;
  
  addMessage(message, 'user');
  input.value = '';
  
  const res = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message, sessionId })
  });
  const data = await res.json();
  addMessage(data.reply, 'bot');
}

function addMessage(text, sender) {
  const div = document.createElement('div');
  div.style.cssText = `margin:8px 0;padding:10px;border-radius:12px;max-width:80%;
    ${sender === 'user' 
      ? 'background:#2563eb;color:white;margin-left:auto' 
      : 'background:#f1f5f9;margin-right:auto'}`;
  div.textContent = text;
  document.getElementById('messages').appendChild(div);
  div.scrollIntoView();
}
</script>

Méthode 4 : Chatbot RAG avec Flowise (open-source)

Flowise est un outil open-source qui vous permet de créer des chatbots RAG visuellement, sans (presque) coder.

  • Installation : npx flowise start (nécessite Node.js 18+)
  • Créez un flow : glissez-déposez les composants — Document Loader → Text Splitter → Embedding → Vector Store → LLM → Chat
  • Sources de données : PDF, pages web, fichiers texte, base de données
  • LLM au choix : OpenAI, Claude (Anthropic), Mistral, Ollama (local et gratuit)
  • Déploiement : Flowise génère une API et un widget intégrable directement

Coût : Flowise est gratuit. Vous payez uniquement l’API du LLM (ou rien si vous utilisez Ollama en local).

Coûts et comparaison des solutions

Estimation pour un site avec 500 conversations/mois :

  • Tidio (gratuit) : 0 FCFA — limité à 50 conversations IA/mois
  • Tidio (Lyro AI) : ~25 000 FCFA/mois — 200 conversations IA
  • Chatbase (Hobby) : ~12 000 FCFA/mois — 2000 messages
  • Crisp (Pro) : ~15 000 FCFA/mois — chatbot IA + live chat
  • API OpenAI (GPT-4o-mini) : ~3 000-8 000 FCFA/mois pour 500 conversations (selon la longueur)
  • API Claude (Haiku) : ~2 000-5 000 FCFA/mois — moins cher que GPT pour les gros volumes
  • Flowise + Ollama : 0 FCFA — tout est local et gratuit (nécessite un serveur)

Bonnes pratiques pour votre chatbot

  • Définissez clairement le périmètre : votre chatbot doit savoir ce qu’il peut et ne peut pas faire. Quand il ne sait pas, il doit le dire
  • Proposez toujours un contact humain : « Souhaitez-vous parler à un conseiller ? » avec un lien WhatsApp ou un formulaire
  • Personnalisez le ton : adaptez le style à votre marque. Formel pour un cabinet comptable, décontracté pour un e-commerce de mode
  • Collectez des feedbacks : ajoutez des boutons 👍/👎 sur les réponses pour améliorer le système
  • Analysez les conversations : identifiez les questions fréquentes sans réponse et enrichissez votre base
  • Respectez la vie privée : ne stockez pas de données personnelles inutilement. Informez les utilisateurs que c’est un chatbot IA
  • Testez en wolof/français : si vos clients écrivent en wolof ou en francolof, testez que votre chatbot gère ces cas (les LLMs modernes comprennent le wolof basique)

Commencez simple : installez Tidio ou Chatbase en 15 minutes, testez pendant un mois, puis évoluez vers une solution personnalisée si le volume le justifie. Un chatbot basique qui répond à 80 % des questions est infiniment mieux que pas de chatbot du tout.

#chatbot #ia #service client
Besoin d'un site web ?

Confiez-nous la Création de Votre Site Web

Site vitrine, e-commerce ou application web — nous transformons votre vision en réalité digitale. Accompagnement personnalisé de A à Z.

À partir de 350.000 FCFA
Parlons de Votre Projet
Publicité

Articles Similaires