Comment ajouter un chat en direct sur WordPress

Le chat en direct : un canal de conversion puissant

Un chat en direct sur votre site peut augmenter vos conversions de 20-40%. Les visiteurs qui utilisent le chat achètent 3 fois plus que ceux qui ne l’utilisent pas. Au Sénégal, les gens sont habitués à communiquer en temps réel — WhatsApp, Facebook Messenger — et s’attendent à pouvoir poser une question et obtenir une réponse rapide avant d’acheter.

Option 1 : Widget WhatsApp (le plus simple)

Avant d’installer un système de chat complexe, considérez WhatsApp. C’est l’application de messagerie n°1 au Sénégal, tout le monde l’a, et ça ne nécessite aucun logiciel supplémentaire de votre côté.

Bouton WhatsApp flottant en pur HTML/CSS

Ajoutez ce code dans un widget HTML personnalisé ou dans le footer.php de votre thème :

<a href="https://wa.me/221770000000?text=Bonjour, j'ai une question concernant votre site"
   class="whatsapp-btn"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Contacter via WhatsApp">
   <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
     <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
     <path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.611.611l4.458-1.495A11.943 11.943 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.352 0-4.55-.684-6.416-1.858l-.447-.293-2.934.984.984-2.934-.293-.447A9.965 9.965 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
   </svg>
</a>

<style>
.whatsapp-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* Animation d'apparition */
@keyframes whatsapp-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.whatsapp-btn { animation: whatsapp-bounce 2s ease infinite; }
.whatsapp-btn:hover { animation: none; transform: scale(1.1); }
</style>

Remplacez 221770000000 par votre numéro (indicatif Sénégal +221, sans le +).

Widget WhatsApp avec message d’accueil

<div class="wa-widget" id="wa-widget">
    <div class="wa-popup">
        <div class="wa-popup-header">
            <strong>ITSkillsCenter</strong>
            <span>Répond en général en quelques minutes</span>
        </div>
        <div class="wa-popup-body">
            <div class="wa-message">
                Bonjour ! 👋 Comment puis-je vous aider ?
            </div>
        </div>
        <a href="https://wa.me/221770000000" target="_blank" rel="noopener" class="wa-popup-cta">
            Démarrer la conversation →
        </a>
    </div>
    <button class="wa-toggle" onclick="document.getElementById('wa-widget').classList.toggle('open')">
        💬
    </button>
</div>

<style>
.wa-widget { position: fixed; bottom: 24px; right: 24px; z-index: 999; }
.wa-popup {
    display: none;
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 320px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    overflow: hidden;
}
.wa-widget.open .wa-popup { display: block; }
.wa-popup-header {
    background: #075E54;
    color: white;
    padding: 16px 20px;
}
.wa-popup-header strong { display: block; font-size: 1rem; }
.wa-popup-header span { font-size: 0.75rem; opacity: 0.8; }
.wa-popup-body { padding: 20px; background: #E5DDD5; }
.wa-message {
    background: white;
    padding: 10px 14px;
    border-radius: 0 8px 8px 8px;
    font-size: 0.875rem;
    max-width: 80%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wa-popup-cta {
    display: block;
    text-align: center;
    padding: 14px;
    background: #25D366;
    color: white;
    font-weight: 600;
    text-decoration: none;
}
.wa-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
</style>

Avantage : Zéro dépendance, ultra léger, fonctionne même avec une connexion lente. Le visiteur est redirigé vers WhatsApp où vous gérez la conversation comme d’habitude.

Option 2 : Tawk.to (chat en direct gratuit)

Tawk.to est le meilleur chat en direct entièrement gratuit — pas de limite de conversations, pas de limite d’agents, pas de version « premium » obligatoire.

Installation

1. Créez un compte sur tawk.to
2. Ajoutez votre site dans le dashboard
3. WordPress → Extensions → « Tawk.to Live Chat » → Installer et Activer
4. Connectez votre compte Tawk.to dans les réglages du plugin
5. Le widget de chat apparaît automatiquement en bas à droite

Configuration recommandée

• Message d’accueil : « Bonjour ! Besoin d’aide ? Posez votre question ici. » — s’affiche après 10 secondes de navigation
• Formulaire pré-chat : Demandez au minimum le prénom et l’email avant de démarrer le chat
• Horaires : Définissez vos heures de disponibilité (ex: 9h-18h GMT). En dehors, un formulaire de message s’affiche
• Réponses rapides : Préparez des réponses aux questions fréquentes (prix, délais, processus)
• Application mobile : Installez l’app Tawk.to sur votre téléphone pour répondre en déplacement

Fonctionnalités gratuites de Tawk.to

• Chat en temps réel illimité
• Historique des conversations
• Suivi des visiteurs en temps réel (pages visitées, localisation)
• Transfert de fichiers
• Multi-agents
• Application mobile iOS/Android
• Personnalisation du widget (couleurs, position)
• Traduction automatique (utile si vous avez des visiteurs non francophones)

Option 3 : Crisp (freemium élégant)

Crisp offre un widget de chat plus moderne que Tawk.to, avec un plan gratuit limité à 2 agents.

Installation

1. Créez un compte sur crisp.chat
2. Extensions → « Crisp – Live Chat » → Installer et Activer
3. Collez votre Website ID dans les réglages du plugin

Avantages de Crisp

• Design très soigné et moderne
• Chatbot basique inclus en gratuit (réponses automatiques simples)
• Intégration email — les messages hors ligne arrivent par email et vous répondez par email
• Base de connaissances intégrée (plan Pro)
• GIF, emojis, partage de fichiers et d’écran

Option 4 : Chatbot IA avec Tidio

Si vous ne pouvez pas être disponible en permanence, un chatbot répond à votre place 24/7.

Tidio : chat + chatbot IA

1. Créez un compte sur tidio.com (plan gratuit : 50 conversations chatbot/mois)
2. Extensions → « Tidio – Live Chat & Chatbots » → Installer et Activer
3. Configurez le chatbot avec des scénarios :

Scénarios de chatbot recommandés

• Accueil : « Bonjour ! Je suis l’assistant virtuel. Que puis-je faire pour vous ? » → Options : Voir nos formations / Demander un devis / Parler à un humain
• FAQ automatique : Le bot répond aux questions fréquentes (prix, horaires, délais) sans intervention humaine
• Capture de leads : Si le visiteur montre de l’intérêt, le bot demande nom + email + besoin avant de transférer à un humain
• Hors heures : « Notre équipe n’est pas disponible actuellement. Laissez-nous votre email et nous vous répondrons dans les 24h. »

Bonnes pratiques pour le chat en direct

Temps de réponse

• Objectif : Répondre en moins de 30 secondes. Au-delà d’1 minute, 50% des visiteurs abandonnent
• Si vous ne pouvez pas répondre vite : Configurez un message automatique « Nous avons reçu votre message, un conseiller vous répond dans les 5 minutes »
• Hors ligne : Affichez un formulaire de contact ou redirigez vers WhatsApp plutôt que de laisser un chat qui ne répond jamais

Ton et communication

• Soyez chaleureux mais professionnel. « Bonjour ! Merci pour votre message » plutôt que « yo slt »
• Utilisez le prénom du visiteur s’il l’a donné
• Ne laissez jamais un chat sans réponse — même « je vérifie et je reviens vers vous » est mieux que le silence
• Finissez toujours par une question ou un CTA : « Souhaitez-vous que je vous envoie un devis ? »

Ne pas nuire à l’expérience

• Pas de pop-up immédiat : Attendez 10-15 secondes ou que le visiteur scroll 50% de la page avant d’afficher le message d’accueil
• Pas de son : Les notifications sonores sont intrusives. Laissez-les désactivées par défaut
• Position mobile : Sur mobile, le widget de chat ne doit pas couvrir le bouton CTA principal ni le contenu important
• Performance : Chaque script de chat ajoute 100-300 Ko à votre page. Chargez-le en différé (lazy load) si possible

Charger le chat en différé (performance)

Pour éviter que le script de chat ralentisse le chargement initial de la page :

// Charger le widget de chat seulement après 5 secondes
// ou quand l'utilisateur scrolle
function loadChatWidget() {
    if (window.chatLoaded) return;
    window.chatLoaded = true;
    
    // Exemple avec Tawk.to
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://embed.tawk.to/VOTRE_ID/default';
    s.charset = 'UTF-8';
    s.setAttribute('crossorigin', '*');
    document.body.appendChild(s);
}

// Charger après 5 secondes
setTimeout(loadChatWidget, 5000);

// Ou au premier scroll
window.addEventListener('scroll', loadChatWidget, { once: true });

Ajoutez ce script dans votre thème ou via un plugin comme « Code Snippets ». Le chat ne se charge qu’après 5 secondes ou au premier scroll — votre page initiale reste rapide.

Quel outil choisir ?

Recommandation au Sénégal : Commencez avec un bouton WhatsApp (tout le monde connaît). Si vous avez une équipe dédiée au support, ajoutez Tawk.to en complément. Le chatbot IA est un plus si vous recevez beaucoup de questions répétitives.