Laura - Agent de support client via chatbot

Modèle

- Modèle : Laura
- Fonction : Support client intelligent via chatbot intégrable
- Credentials requis : Base de connaissances (obligatoire), SMTP (optionnel)

Description

L'agent Laura permet d'automatiser le support client via un chatbot intégrable directement sur votre site. Il peut analyser les demandes, y répondre et qualifier les prospects, à partir de la base de connaissances que vous lui fournissez.

Prérequis

• Un document de base de connaissances (PDF ou Word)
• (Optionnel) Avoir configuré un serveur SMTP (voir Partie 2 - SMTP)

Étapes de configuration

Étape 1 : Accéder à la configuration

1. Connectez-vous à votre compte Agentic
2. Allez dans My AI Agents ou depuis le Dashboard puis Nouvel Agent
3. Sélectionnez le modèle Laura

Étape 2 : Choisir la variante

• Chatbot uniquement : Communication sans email
• Chatbot + Email : Communication avec relances email

Étape 3 : (Optionnel) Configurer SMTP

Si vous avez choisi la variante Chatbot + Email :

• Remplissez les informations SMTP (serveur, email, mot de passe)
• Cliquez sur "Enregistrer la configuration SMTP"
• Renseignez l'Email d'envoi qui apparaîtra comme expéditeur
• Cliquez sur "Enregistrer l'email d'envoi"

Étape 4 : Uploader la base de connaissances

1. Cliquez sur la zone de téléchargement
2. Sélectionnez votre document (PDF ou Word, max 20 Mo)
3. Cliquez sur "Enregistrer le document"

Information importante

La base de connaissances est essentielle pour que l'agent puisse répondre correctement aux clients. Elle doit contenir : FAQ, procédures, catalogue produits, etc.

Étape 5 : Finaliser la création

1. Cliquez sur le bouton "Créer l'agent Laura"
2. Vous serez redirigé vers la page de plan
3. Sélectionnez un plan (Starter, Premium, Enterprise) et un cycle (Mensuel, Annuel)
4. Validez le paiement via LigdiCash
5. Une fois le paiement confirmé, vous serez automatiquement redirigé vers la page de plan
6. Cliquez sur "Activer l'agent Laura" pour finaliser la création
7. L'agent est créé et disponible dans votre dashboard

Bon à savoir

Une fois l'agent créé, vous pouvez l'activer/désactiver depuis le tableau de bord. L'URL de votre chatbot, ainsi que le nom d'utilisateur et le mot de passe nécessaires à son authentification (sécurité du webhook), vous seront fournis pour l'intégrer sur votre site — voir la méthode d'intégration ci-dessous.

---

Méthode d'intégration

Une fois votre agent Laura créé et actif, intégrez son chatbot sur votre propre site en suivant ces trois étapes. Le code ci-dessous est donné pour un frontend HTML/CSS/JS classique et un backend Django — adaptez-le à votre propre technologie si besoin.

1. Partie HTML

À intégrer sur chaque page où le chatbot doit apparaître, ou dans un template commun importé partout :

<!-- ── Chatbot bubble avec icônes unicode ── -->
<div class="chatbot-bubble">
    <div class="chatbot-window" id="chatbotWindow">
        <div class="chatbot-header">
            <div class="bot-avatar">
                <span class="bot-icon">🤖</span>
            </div>
            <div class="bot-info">
                <strong>Assistant Agentic</strong>
                <span>Toujours disponible</span>
            </div>
            <div class="bot-status"></div>
        </div>
        <div class="chatbot-messages" id="chatMessages">
            <div class="chat-msg bot">
                Bonjour 👋 Je suis votre assistant Agentic. Comment puis-je vous aider ?
            </div>
        </div>
        <div class="chatbot-input">
            <input type="text" id="chatInput" placeholder="Tapez votre message..." autocomplete="off">
            <button id="chatSendBtn" onclick="sendChatMessage()">
                <span class="send-icon">➤</span>
            </button>
        </div>
    </div>

    <button class="chatbot-btn" id="chatbotToggle" onclick="toggleChatbot()" title="Assistant">
        <span class="icon-chat">💬</span>
        <span class="icon-close">✕</span>
    </button>
</div>

2. Partie JavaScript

À placer dans un fichier .js dédié, importé sur chaque page :

// ========================================
// CHATBOT — fonctions partagées entre toutes les pages
// ========================================
const CHATBOT_WEBHOOK = '/chatbot/proxy/';
let chatbotOpen   = false;
let chatSessionId = 'session_' + Date.now();

function toggleChatbot() {
    chatbotOpen = !chatbotOpen;
    const win = document.getElementById('chatbotWindow');
    const btn = document.getElementById('chatbotToggle');
    if (!win || !btn) return;
    if (chatbotOpen) {
        win.classList.add('open');
        btn.classList.add('open');
        const input = document.getElementById('chatInput');
        if (input) input.focus();
    } else {
        win.classList.remove('open');
        btn.classList.remove('open');
    }
}

function appendChatMessage(text, sender) {
    const messages = document.getElementById('chatMessages');
    if (!messages) return;
    const msg = document.createElement('div');
    msg.className = `chat-msg ${sender}`;
    msg.textContent = text;
    messages.appendChild(msg);
    messages.scrollTop = messages.scrollHeight;
    return msg;
}

function showChatTyping() {
    const messages = document.getElementById('chatMessages');
    if (!messages) return;
    const typing = document.createElement('div');
    typing.className = 'chat-typing';
    typing.id = 'typingIndicator';
    typing.innerHTML = '<span></span><span></span><span></span>';
    messages.appendChild(typing);
    messages.scrollTop = messages.scrollHeight;
}

function hideChatTyping() {
    const t = document.getElementById('typingIndicator');
    if (t) t.remove();
}

async function sendChatMessage() {
    const input   = document.getElementById('chatInput');
    const sendBtn = document.getElementById('chatSendBtn');
    if (!input || !sendBtn) return;
    const message = input.value.trim();
    if (!message) return;

    appendChatMessage(message, 'user');
    input.value      = '';
    sendBtn.disabled = true;
    // Désactivé pendant l'attente de la réponse : empêche d'envoyer un
    // nouveau message (clic ou touche Entrée) avant d'avoir reçu la
    // réponse au précédent. Complète la protection côté serveur ci-dessous.
    input.disabled   = true;
    showChatTyping();

    try {
        const response = await fetch(CHATBOT_WEBHOOK, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCSRFToken()
            },
            body: JSON.stringify({ message, sessionId: chatSessionId }),
            credentials: 'include'
        });

        hideChatTyping();

        // Le backend renvoie 429 si un message précédent de cette même
        // session est encore en cours de traitement (anti-spam).
        if (response.status === 429) {
            const result = await response.json().catch(() => ({}));
            appendChatMessage(
                result.error || 'Veuillez patienter, votre précédent message est encore en cours de traitement.',
                'bot'
            );
            return;
        }

        if (!response.ok) throw new Error('Réponse invalide');

        const result = await response.json();
        if (!result.success) throw new Error(result.error || 'Erreur backend');

        const data  = result.data;
        const reply = data.output || data.message || data.response || data.text || 'Je suis là pour vous aider.';
        appendChatMessage(reply, 'bot');

    } catch (err) {
        hideChatTyping();
        appendChatMessage('Désolé, une erreur est survenue. Veuillez réessayer.', 'bot');
    } finally {
        sendBtn.disabled = false;
        input.disabled   = false;
        if (input) input.focus();
    }
}

function initChatbot() {
    const input = document.getElementById('chatInput');
    if (input) {
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') sendChatMessage();
        });
    }
}

3. Partie backend (exemple Django)

Un proxy côté serveur est nécessaire pour éviter les problèmes CORS, pour fournir l'authentification Basic Auth exigée par le webhook, et pour limiter les envois trop rapides d'un même visiteur. Exemple avec Django — adaptez-le à votre propre framework :

@require_http_methods(["POST"])
@csrf_exempt
def chatbot_proxy(request):
    """Proxy entre le frontend et le webhook n8n pour éviter les problèmes CORS.
    ✅ Accessible sans connexion : utilisé aussi bien depuis le tableau de
    bord (utilisateurs connectés) que depuis la page d'accueil publique
    (visiteurs non connectés)."""
    try:
        import urllib.request
        import base64
        import os
        from django.core.cache import cache

        # Nom d'utilisateur et mot de passe fournis dans My AI Agents,
        # à côté de l'URL du webhook de votre agent Laura.
        webhook_user     = os.environ.get('LAURA_WEBHOOK_USER', 'VOTRE_USERNAME_WEBHOOK')
        webhook_password = os.environ.get('LAURA_WEBHOOK_PASSWORD', 'VOTRE_MOT_DE_PASSE_WEBHOOK')

        data = json.loads(request.body)
        payload = json.dumps(data).encode('utf-8')

        # Anti-spam : un seul message "en vol" par session visiteur. Si un
        # message précédent de cette session n'a pas encore reçu de réponse
        # du webhook, on refuse le nouveau plutôt que de les empiler.
        session_id = data.get('sessionId')
        lock_key = f"chatbot_lock_{session_id}" if session_id else None

        if lock_key and not cache.add(lock_key, True, timeout=35):
            return JsonResponse({
                'success': False,
                'rate_limited': True,
                'error': "Veuillez patienter, votre précédent message est encore en cours de traitement."
            }, status=429)

        try:
            headers = {'Content-Type': 'application/json'}
            if webhook_user and webhook_password:
                credentials = f"{webhook_user}:{webhook_password}"
                encoded_credentials = base64.b64encode(credentials.encode('utf-8')).decode('ascii')
                headers['Authorization'] = f'Basic {encoded_credentials}'

            req = urllib.request.Request(
                'https://automate.integriscloud.com/webhook/VOTRE_URL_WEBHOOK',
                data=payload,
                headers=headers,
                method='POST'
            )
            with urllib.request.urlopen(req, timeout=30) as resp:
                response_data = json.loads(resp.read().decode('utf-8'))
            return JsonResponse({'success': True, 'data': response_data})
        finally:
            if lock_key:
                cache.delete(lock_key)

    except Exception as e:
        return JsonResponse({'success': False, 'error': str(e)}, status=500)

Et la route correspondante dans urls.py :

path('chatbot/proxy/', views.chatbot_proxy, name='chatbot_proxy'),

Important

Remplacez toujours l'URL d'exemple https://automate.integriscloud.com/webhook/VOTRE_URL_WEBHOOK, ainsi que VOTRE_USERNAME_WEBHOOK et VOTRE_MOT_DE_PASSE_WEBHOOK, par les valeurs réelles fournies pour votre propre agent Laura (visibles dans My AI Agents une fois l'agent créé). Sans l'authentification Basic Auth correctement renseignée, le webhook refusera la requête.

Résumé

Il suffit d'ajouter une bulle de chat sur votre site, à travers laquelle vos visiteurs peuvent poser des questions. Le texte saisi est envoyé en POST vers votre proxy backend, accompagné d'un identifiant de session (nécessaire à l'agent pour suivre le fil d'une conversation), puis transmis — avec l'authentification Basic Auth requise — à l'URL réelle de votre agent Laura.

---

← Hugo

Accueil

Marie →