Chatbot site web Claude API : FAQ + qualification leads pour PME Afrique (2026)

Le chatbot site web n'est plus l'arnaque "scripted" des années 2010. Avec Claude API en 2026, il devient un assistant qui comprend, qualifie, propose un devis. Pour une PME africaine, c'est l'amplificateur n°1 de conversion en 2026.

TL;DR

- Stack : Claude API (claude-haiku-4-5 ou claude-sonnet-4-6) + Next.js + persistance conversation Postgres.

- Coût mensuel : 5-30K FCFA selon trafic.

- Performance : 60-75 % questions résolues sans humain, 25 % conversion en WhatsApp/devis.

Architecture cible

`

[Visiteur site] → [Widget chatbot bottom-right]

↓

[Claude API streaming]

↓

(System prompt avec contexte produit + tools)

↓

[Réponse texte + tool calls]

↓

(Tools : booking, devis, transfer WhatsApp)

↓

[UI responsive]

`

Étape 1 — backend Next.js + Claude API

`ts

// app/api/chatbot/route.ts

import Anthropic from '@anthropic-ai/sdk';

import { prisma } from '@/lib/prisma';

const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY! });

const SYSTEM_PROMPT = `Tu es l'assistant chatbot de Kolonell, agence digitale à Dakar.

Tu aides les visiteurs avec :

• Questions sur services (sites web, e-commerce, SEO, branding)
• Tarifs (Starter à partir de 350K FCFA, Pro 750K, Premium 1.5M+)
• Délais (Starter 7-10 jours, Pro 21 jours, Premium 6-8 semaines)
• Prise de RDV / WhatsApp pour discussion approfondie

Tu réponds en français de manière chaleureuse, professionnelle, concise (max 3 phrases).

Si la question dépasse ton scope ou nécessite un humain, propose le WhatsApp +221 77 596 93 33.

Tu ne donnes JAMAIS de prix précis non listé ci-dessus.`;

export async function POST(req: Request) {

const { sessionId, messages } = await req.json();

const response = await anthropic.messages.create({

model: 'claude-haiku-4-5-20251001',

max_tokens: 512,

system: SYSTEM_PROMPT,

messages: messages.map((m: any) => ({ role: m.role, content: m.content })),

tools: [

{

name: 'request_quote',

description: "Demande de devis détaillé via WhatsApp",

input_schema: {

type: 'object',

properties: {

project_type: { type: 'string', enum: ['site_web', 'ecommerce', 'app', 'seo', 'autre'] },

budget_estimated: { type: 'string' },

timeline: { type: 'string' },

},

required: ['project_type'],

},

},

{

name: 'transfer_whatsapp',

description: "Transférer la conversation vers WhatsApp humain",

input_schema: {

type: 'object',

properties: { reason: { type: 'string' } },

},

},

],

});

// Persister conversation

await prisma.chatbotConversation.upsert({

where: { sessionId },

update: { messages: [...messages, { role: 'assistant', content: response.content }] },

create: { sessionId, messages: [...messages, { role: 'assistant', content: response.content }] },

});

return Response.json({ response: response.content });

}

`

Étape 2 — widget frontend

`tsx

// components/Chatbot.tsx

'use client';

import { useState } from 'react';

interface Message { role: 'user' | 'assistant'; content: string; }

export function Chatbot() {

const [open, setOpen] = useState(false);

const [messages, setMessages] = useState([

{ role: 'assistant', content: "Bonjour ! Comment puis-je vous aider ? Je peux répondre à vos questions sur nos services, tarifs, et délais." },

]);

const [input, setInput] = useState('');

const [loading, setLoading] = useState(false);

const [sessionId] = useState(() => crypto.randomUUID());

async function send() {

const userMsg: Message = { role: 'user', content: input };

const newMessages = [...messages, userMsg];

setMessages(newMessages);

setInput('');

setLoading(true);

const res = await fetch('/api/chatbot', {

method: 'POST',

body: JSON.stringify({ sessionId, messages: newMessages }),

headers: { 'Content-Type': 'application/json' },

});

const { response } = await res.json();

const assistantText = response.find((c: any) => c.type === 'text')?.text ?? '';

setMessages([...newMessages, { role: 'assistant', content: assistantText }]);

setLoading(false);

}

return (

<>

setOpen(!open)} className="fixed bottom-4 right-4 bg-emerald-600 text-white p-4 rounded-full shadow-lg">

💬

{open && (

)}

);

}

`

Étape 3 — coûts mensuels

Avec Claude Haiku 4.5 ($0.25/MT input, $1.25/MT output). Pour des questions complexes nécessitant Sonnet, multiplier ces coûts par ~5.

Étape 4 — prompt engineering avancé

Prompt caching pour réduire coûts

Le system prompt long (catalogue produit, FAQ, tarifs) peut être caché pour économiser 90 % en tokens input :

`ts

const response = await anthropic.messages.create({

model: 'claude-haiku-4-5-20251001',

max_tokens: 512,

system: [

{

type: 'text',

text: SYSTEM_PROMPT_LONG, // 5000+ tokens

cache_control: { type: 'ephemeral' },

},

],

messages: [...],

});

`

Cache TTL : 5 min. Hit cache = $0.03/MT au lieu de $0.25/MT.

Inclure FAQ + catalogue dans le system prompt

Lister vos 30 FAQ + 50 produits dans le system prompt. Claude répond avec précision sans appeler vos APIs.

Limiter température

temperature: 0.3 pour réponses cohérentes (vs 1.0 = créatif).

Pièges fréquents

• Hallucinations prix — strict system prompt "ne donne JAMAIS un prix précis non listé".
• Conversations trop longues — couper à 20 messages max, archiver / résumer.
• Pas de fallback — si Claude API tombe, afficher "Notre assistant est temporairement indisponible. Contactez-nous via WhatsApp : ...".
• Données sensibles — ne JAMAIS demander mot de passe, carte. Si l'utilisateur en envoie : redact en logs.

Cas réel — Kolonell.com (le site lui-même)

Stats 12 mois 2025 :

• 145 000 visites totales
• 12 800 conversations chatbot
• 8 900 conversations résolues sans humain (69 %)
• 2 850 conversations transférées WhatsApp (22 %)
• 1 050 conversations devenues clients qualifiés (8.2 %)
• Coût mensuel moyen : ~12 USD (~7K FCFA)

Sans chatbot : ~30 % moins de leads qualifiés selon estimation.

FAQ

Q : Claude vs GPT-4 vs Gemini ?

R : Claude Haiku 4.5 = meilleur rapport qualité/prix/sobriété en 2026. Gemini moins cher mais qualité inférieure. GPT-4 cher mais bons résultats.

Q : Combien de mémoire conversation ?

R : Garder les 10-20 derniers messages. Au-delà, résumer en background avec un prompt court "résume cette conversation en 200 mots".

Q : Multilingue automatique ?

R : Claude détecte langue et répond automatiquement. FR + EN + Wolof + EN OK. Pour multilingue strict, ajouter au system prompt.

Conclusion

Un chatbot Claude bien configuré = amplificateur de conversion #1 pour PME africaine en 2026. 1 jour de dev, 5-30K FCFA/mois, 60-75 % de questions résolues automatiquement. L'écart concurrentiel se creuse rapidement entre les sites qui le font et ceux qui ne le font pas.