PHP : Coder un chatbot avec l’API ChatGTP pour son site web

Dans le monde numérique actuel, offrir une interaction instantanée et personnalisée avec vos visiteurs est devenu indispensable. Un chatbot coder en PHP et relier à l’API de ChatGPT peut répondre à cette exigence.

Grâce à lui, vos utilisateurs peuvent obtenir des informations rapidement, poser des questions ou être guidés dans leurs choix, et ce, sans que vous soyez connecté 24 heures sur 24.

Mais qu’est-ce qu’un chatbot exactement, et comment peut-on le créer avec PHP, un langage simple et populaire pour le développement web ? Ce tutoriel a pour objectif de vous guider pas à pas dans la création de votre propre chatbot pour votre site web, de manière claire, conviviale et accessible à tous, même si vous n’avez jamais travaillé avec l’intelligence artificielle auparavant.

Vous aurez ainsi toutes les clés pour intégrer un assistant intelligent à votre site web.

Qu’est-ce qu’un chatbot ?

Un chatbot est un programme informatique capable de simuler une conversation avec un utilisateur. Il peut être simple, en répondant uniquement à des phrases préenregistrées, ou complexe, utilisant l’intelligence artificielle pour comprendre le sens des questions et répondre de manière pertinente.

L’objectif principal est d’automatiser certaines interactions avec vos visiteurs, que ce soit pour le service client, l’aide à la navigation ou la recommandation de produits.

Contrairement à un formulaire de contact classique, le chatbot permet une interaction dynamique, fluide et naturelle. L’utilisateur peut poser sa question comme il le ferait avec un humain, et obtenir une réponse immédiate. Avec l’évolution de l’IA, les chatbots deviennent de plus en plus performants, capables d’apprendre de nouvelles informations et d’adapter leurs réponses en fonction des conversations précédentes.

Nous allons coder un chatbot en PHP en le reliant à l’API de ChatGPT.

À quoi sert un chatbot sur un site web ?

L’utilisation d’un chatbot sur un site web est très variée. Tout dépend de vos objectifs et de votre audience. Voici les principaux usages :

1. Service client automatisé : répondre aux questions fréquentes sur les produits, les services, les horaires, ou les conditions d’achat.
2. Guidage et navigation : aider l’utilisateur à trouver rapidement l’information qu’il cherche sur le site.
3. Prise de rendez-vous ou réservation : automatiser les réservations en ligne.
4. Collecte de données : obtenir des informations sur vos utilisateurs pour mieux comprendre leurs besoins et améliorer vos services.
5. Promotion et marketing : présenter vos offres, promotions ou nouveautés de manière interactive.

L’avantage est que le chatbot est disponible 24 heures sur 24 et 7 jours sur 7, contrairement à un service humain limité dans le temps. Cela améliore l’expérience utilisateur et peut augmenter la satisfaction et la fidélisation.

Les avantages d’un chatbot

Créer un chatbot avec PHP pour votre site web présente de nombreux avantages. Voici les principaux :

1. Gain de temps : vos visiteurs obtiennent immédiatement une réponse sans attendre qu’un humain soit disponible.
2. Réduction des coûts : moins de besoin de personnel pour répondre aux mêmes questions répétitives.
3. Disponibilité continue : le chatbot ne dort jamais et peut gérer plusieurs conversations en simultané.
4. Amélioration de l’expérience utilisateur : les utilisateurs se sentent accompagnés et guidés dans leur navigation.
5. Collecte d’informations précieuses : chaque conversation peut être analysée pour mieux comprendre les besoins des clients.

Un chatbot bien conçu peut transformer l’expérience de vos visiteurs, augmenter vos ventes et rendre votre site web plus interactif et moderne.

Comment fonctionne un chatbot ?

Techniquement, un chatbot peut fonctionner de deux manières principales :

• Basé sur des règles : le chatbot suit des scénarios prédéfinis. Par exemple, si l’utilisateur écrit « horaires », il répond avec vos horaires d’ouverture. Ce type est simple à mettre en place, mais limité dans ses réponses.
• Basé sur l’intelligence artificielle : le chatbot comprend le sens des phrases et peut générer des réponses plus naturelles. Il utilise des technologies comme le NLP (Natural Language Processing) et des modèles d’IA pour analyser et répondre aux questions.

Pour notre tutoriel PHP, nous allons utiliser une approche basée sur l’IA grâce à une API simple, permettant de créer un chatbot intelligent sans devoir développer un moteur de traitement du langage complexe.

Prérequis pour créer un chatbot avec PHP

Avant de commencer, assurez-vous de disposer des éléments suivants :

1. Un site web fonctionnel avec PHP installé (version 7.4 ou supérieure recommandée).
2. Un serveur web local ou distant (MAMP, WAMP, ou serveur en ligne).
3. Une clé API pour un service d’intelligence artificielle (par exemple OpenAI ou autre).
4. Des notions de base en HTML, CSS et PHP pour intégrer le chatbot sur votre site.

Avec ces éléments, vous êtes prêts à passer à l’étape pratique.

L’API d’OpenAI – ChatGPT

Si vous souhaitez intégrer un chatbot à votre site web sans frais, voici quelques options :

1. Utiliser l’interface ChatGPT gratuite

La version gratuite de ChatGPT est accessible via chat.openai.com. Bien que cette interface ne permette pas d’intégration directe via une API, vous pouvez l’utiliser pour des interactions ponctuelles ou pour tester le service. Dans notre situation, cela n’a aucun intérêt.

2. Explorer des solutions open-source

Des projets open-source, tels que ChatGPTAPIFree, proposent des proxys API permettant d’accéder à ChatGPT sans clé API. Ces solutions peuvent être adaptées à vos besoins, mais elles nécessitent une mise en place technique et peuvent ne pas offrir la même fiabilité que l’API officielle.

3. Utiliser des bibliothèques JavaScript comme Puter.js

Puter.js est une bibliothèque JavaScript open-source qui permet d’accéder aux capacités de l’API OpenAI sans nécessiter de clé API. Elle peut être utilisée directement dans le code frontend de votre site, facilitant ainsi l’intégration d’un chatbot sans coûts supplémentaires.

Donc, bien que l’API officielle de ChatGPT ne soit pas gratuite, il existe des alternatives open-source et des solutions techniques permettant d’intégrer un chatbot à votre site web sans frais. Ces options nécessitent généralement des compétences techniques pour leur mise en place et leur maintenance.

L’API officielle de ChatGPT, proposée par OpenAI, n’est pas gratuite. Cependant, OpenAI offre un crédit initial de 18 € lors de la création d’un compte, ce qui permet d’expérimenter avec l’API sans frais pendant un certain temps. Une fois ce crédit épuisé, l’utilisation de l’API devient payante selon le modèle tarifaire d’OpenAI. Nous allons donc opter pour la solution avec la bibliothèque Puter.js et vous montrer également comment utiliser l’API de chatGPT grâce aux crédits gratuits de départ.

Créer l’interface utilisateur

La première étape consiste à créer un formulaire simple sur votre site web où l’utilisateur pourra écrire ses questions et recevoir les réponses. Vous pouvez créer un fichier nommé chatbot.php et y ajouter le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Chatbot PHP</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #chatbox { margin-bottom: 10px; width: calc(100% - 20px); max-height: 80%; height: 400px; border: 1px solid #ccc; padding: 10px; overflow-y: scroll; }
        #userInput { width: calc(100% - 130px); padding: 10px; }
        #sendBtn { padding: 10px;width:100px; }
        .user { color: blue; }
        .bot { color: green; }
    </style>
</head>
<body>
    <h1>Chatbot</h1>
    <div id="chatbox"></div>
    <input type="text" id="userInput" placeholder="Écrivez votre message...">
    <button id="sendBtn">Envoyer</button>

    <script>
        const chatbox = document.getElementById('chatbox');
        const input = document.getElementById('userInput');
        const btn = document.getElementById('sendBtn');

        btn.addEventListener('click', () => {
            const userText = input.value;
            if(userText === '') return;
            chatbox.innerHTML += `<div class="user">Vous : ${userText}</div>`;
            fetch('bot_response.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: 'message=' + encodeURIComponent(userText)
            })
            .then(response => response.text())
            .then(data => {
                chatbox.innerHTML += `<div class="bot">Bot : ${data}</div>`;
                chatbox.scrollTop = chatbox.scrollHeight;
            });
            input.value = '';
        });
    </script>
</body>
</html>

Ce code crée une zone de chat simple, où l’utilisateur peut taper son message, cliquer sur envoyer, et recevoir la réponse du bot.

Obtenir une clé API de ChatGPT (OpenAI)

1. Créer un compte OpenAI : Rendez-vous sur la plateforme d’OpenAI (https://platform.openai.com) et inscrivez-vous. Vous pouvez utiliser votre adresse e-mail ou vous connecter avec un compte Google ou Microsoft.
2. Accéder à la section des clés API : Une fois connecté, accédez à votre tableau de bord. Cliquez sur l’icône de votre profil dans le coin supérieur droit, puis sélectionnez « View API keys » (Afficher les clés API).
3. Générer une nouvelle clé secrète : Sur la page des clés API, cliquez sur le bouton « Create new secret key »(Créer une nouvelle clé secrète). On vous demandera de donner un nom à cette clé. Donnez-lui un nom descriptif pour vous aider à l’identifier plus tard.
4. Copier la clé : Après avoir cliqué sur « Create secret key », votre clé API sera affichée une seule fois. Copiez-la immédiatement et conservez-la en lieu sûr, car vous ne pourrez plus la revoir. Si vous la perdez, vous devrez en générer une nouvelle.

Conseils importants

• Sécurité : Traitez votre clé API comme un mot de passe. Ne la partagez jamais publiquement et ne l’intégrez pas directement dans le code côté client (comme le JavaScript de votre site web), car elle pourrait être exposée. Utilisez-la uniquement sur votre serveur.
• Utilisation gratuite : OpenAI offre souvent des crédits gratuits aux nouveaux utilisateurs. Cela vous permet de tester l’API sans frais initiaux. Cependant, l’utilisation au-delà de ces crédits vous sera facturée.
• Surveiller l’utilisation : Il est recommandé de définir des limites d’utilisation dans votre tableau de bord pour éviter les dépenses imprévues.

Créer le script PHP pour obtenir et afficher les réponses de ChatGPT

Ensuite, il faut créer un fichier bot_response.php qui traitera le message envoyé par l’utilisateur et renverra une réponse. Nous allons utiliser une API d’IA pour générer les réponses automatiquement. Voici un exemple avec une API générique (OpenAI) :

<?php
if(isset($_POST['message'])){
    $userMessage = $_POST['message'];

    // IMPORTANT: Ne stockez jamais votre clé API directement dans le code.
    // Utilisez des variables d'environnement. J'ai remplacé votre clé par une méthode plus sûre.
    // Pensez à révoquer la clé qui était exposée dans votre code.
    $apiKey = getenv('OPENAI_API_KEY'); // Ou une autre méthode sécurisée pour charger votre clé
    if (!$apiKey) {
        // Pour le développement, vous pouvez la mettre ici TEMPORAIREMENT, mais ne la committez jamais !
        $apiKey = "VOTRE_NOUVELLE_CLE_API_ICI";
    }

    $url = "https://api.openai.com/v1/chat/completions";

    $data = [
        "model" => "gpt-3.5-turbo", // Utilisation d'un modèle valide
        "messages" => [
            ["role" => "user", "content" => $userMessage]
        ]
    ];

    $options = [
        "http" => [
            "ignore_errors" => true, // Permet de lire le corps de la réponse même en cas d'erreur 4xx/5xx
            "header" => "Content-Type: application/json\r\n" .
                        "Authorization: Bearer $apiKey\r\n",
            "method" => "POST",
            "content" => json_encode($data),
        ]
    ];
    $context = stream_context_create($options);
    $result = file_get_contents($url, false, $context);

    if ($result === FALSE) {
        echo "Erreur de connexion à l'API";
        exit; // Arrête le script si la connexion échoue
    }

    $response = json_decode($result, true);

    // Vérifie si la réponse de l'API est valide avant de l'utiliser
    if (isset($response['choices'][0]['message']['content'])) {
        echo $response['choices'][0]['message']['content'];
    } else {
        // Affiche une erreur plus détaillée si l'API renvoie un problème
        echo "Erreur: Réponse inattendue de l'API. ";
        if (isset($response['error']['message'])) {
            echo $response['error']['message'];
        }
    }
}
?>

Ce script envoie le message de l’utilisateur à l’API et récupère une réponse générée automatiquement. L’utilisateur voit alors sa question et la réponse du chatbot en temps réel.

Pour tester, ouvrez chatbot.php dans votre navigateur, tapez un message et cliquez sur envoyer. Vous devriez voir le message apparaître dans le chat et recevoir une réponse générée par l’IA.

À ce stade, votre chatbot est fonctionnel et peut répondre à des questions simples ou complexes selon la puissance de l’API choisie.

Chatbot pour un site e-commerce

Imaginons que vous possédez un site e-commerce et souhaitez aider vos clients à trouver des produits rapidement. Votre chatbot pourrait répondre à des questions comme « Quels sont vos horaires d’ouverture ? », « Avez-vous ce produit en stock ? », ou « Comment passer une commande ? ».

Pour cela, vous pouvez adapter le script bot_response.php pour inclure des données de votre site. Par exemple :

if(stripos($userMessage, 'horaires') !== false){
    echo "Nos horaires d'ouverture sont du lundi au vendredi de 9h à 18h.";
} elseif(stripos($userMessage, 'produit') !== false){
    echo "Veuillez préciser le nom du produit que vous recherchez.";
} else {
    // Sinon, utilisez l'API IA pour répondre
}

Ainsi, votre chatbot devient un assistant intelligent capable de guider vos visiteurs tout en s’appuyant sur l’IA pour des réponses plus complexes.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Améliorer votre chatbot

Pour rendre votre chatbot plus performant et agréable à utiliser, voici quelques bonnes pratiques :

• Soignez la présentation de votre chat pour le rendre clair et lisible.
• Limitez le temps de réponse pour ne pas frustrer l’utilisateur.
• Analysez les conversations pour améliorer les réponses et détecter les questions récurrentes.
• Intégrez des fonctionnalités comme la suggestion automatique ou les boutons rapides pour faciliter la navigation.
• Mettez à jour régulièrement les informations que le chatbot peut fournir, notamment pour un site e-commerce.

Utiliser une API autre que ChatGPT mais gratuite

la recherche d’une API d’IA totalement gratuite est une quête commune. Il est important de comprendre que « gratuit » dans le domaine de l’IA a souvent des nuances, car les modèles de langage nécessitent des ressources de calcul importantes.

Voici les principales options et approches que vous pouvez explorer pour un usage gratuit :

Modèles open source hébergés sur des plateformes gratuites

Plutôt que d’utiliser directement les API des grandes entreprises comme OpenAI ou Google, vous pouvez vous tourner vers des modèles open source, souvent de qualité équivalente ou très proche pour les tâches de base.

• Google AI Studio (API Gemini) : Google propose un niveau gratuit pour son API Gemini (anciennement Google Bard). Il offre un quota gratuit qui est généralement suffisant pour des projets personnels ou de petite taille. L’utilisation de Google AI Studio est entièrement gratuite.
• Hugging Face : Hugging Face est une plateforme de référence pour l’IA open source. Vous pouvez y trouver des milliers de modèles (comme Llama 3 de Meta) et utiliser leurs « Endpoints » pour les appeler via une API. Certains modèles peuvent être utilisés gratuitement avec des limites de débit.
• Groq : Groq est une entreprise spécialisée dans les puces d’IA qui offrent une inférence extrêmement rapide. Ils proposent un niveau d’API gratuit avec une limite de jetons par jour, ce qui peut être très généreux pour un usage de chatbot de base.
• Cohere : Cohere propose une API gratuite avec des limites d’appels par mois. Leurs modèles sont conçus pour la compréhension du langage naturel et sont une excellente alternative à OpenAI.

Modèles auto-hébergés (Open Source)

Pour une solution vraiment « sans limite » et totalement gratuite (à condition d’avoir un serveur puissant), vous pouvez opter pour l’auto-hébergement. C’est l’approche la plus complexe, mais aussi la plus libre :

• Modèles comme Llama (Meta) ou Mistral AI : Vous pouvez télécharger les poids de ces modèles et les faire tourner sur votre propre serveur. Cela vous donne un contrôle total et vous n’avez pas à vous soucier des limites de requêtes ou des frais d’API.
• Frameworks pour le déploiement : Utilisez des frameworks comme Ollama ou LM Studio pour faciliter le déploiement de ces modèles sur votre machine.

Consultez notre tutoriel Coder en local avec l’IA qui vous aidera à installer un modele de langage sur votre machine ou serveur.

Pour notre projet de chatbot PHP, je vous recommande de commencer par ChatPGT ou Google AI Studio (API Gemini). Les documentations sont claires, et le processus pour obtenir une clé API est très similaire.

Si vous êtes à l’aise avec la programmation, l’exploration de l’API de Hugging Face ou de Groq vous donnera accès à des modèles de pointe avec des limites gratuites généreuses.

Il n’existe pas d’API d’IA qui soit à la fois totalement gratuite, sans aucune limite, et prête à l’emploi sans configuration. L’approche la plus viable est de choisir un service qui propose un niveau gratuit suffisant pour vos besoins, ou de vous lancer dans le monde de l’IA open source et de l’auto-hébergement.

La bibliothèque JavaScript Puter.js

C’est une bibliothèque JavaScript qui permet aux développeurs de créer des applications web serverless, c’est-à-dire sans avoir besoin d’un backend ou d’une clé API. C’est une solution très intéressante pour les développeurs web qui souhaitent intégrer des fonctionnalités avancées directement côté client.

Puter.js est propulsé par Puter, un « système d’exploitation Internet » open-source. Il offre un éventail de services cloud et d’IA que vous pouvez utiliser en ajoutant simplement une balise <script> à votre code HTML.

• IA Intégrée : Puter.js vous permet d’accéder à des modèles d’IA tels que GPT, Claude et Gemini directement depuis le navigateur. Vous pouvez l’utiliser pour des fonctionnalités de chat, de génération d’images, et plus encore.
• Modèle « User Pays » : C’est un concept novateur. Le développeur ne paie aucun coût d’infrastructure. Les coûts sont transférés à l’utilisateur final qui est facturé pour sa propre consommation de ressources (stockage, requêtes AI, etc.) si elle dépasse un certain seuil gratuit.
• Services Cloud : La bibliothèque intègre des fonctionnalités de stockage de fichiers et une base de données NoSQL. Vous pouvez créer, lire, mettre à jour et supprimer des fichiers et des données directement depuis le frontend.
• Authentification sans serveur : Puter.js gère l’authentification et les autorisations, vous n’avez pas à vous soucier de la configuration du backend ou de la gestion des API.

Comment cela fonctionne pour l’IA ?

Puter.js fonctionne comme un proxy entre votre application et les services d’IA. Au lieu que votre code envoie une requête à l’API d’OpenAI avec votre clé, Puter.js s’occupe de la communication et gère l’authentification et les quotas d’utilisation de manière transparente. Cela est particulièrement intéressant pour la création d’un chatbot, car cela simplifie considérablement l’architecture et les besoins en backend.

L’erreur que vous pourriez avoir eue avec l’API d’OpenAI, « You exceeded your current quota, » est exactement le genre de problème que Puter.js vise à résoudre pour le développeur.

Plutôt que d’être responsable de la consommation des utilisateurs, le modèle de Puter.js fait en sorte que chaque utilisateur soit responsable de sa propre utilisation, éliminant ainsi les coûts d’infrastructure pour le développeur.

Adapter son script à Puter.js

Pour adapter votre code pour Puter.js, vous n’aurez plus besoin du fichier PHP (bot_response.php) ni de la requête fetch. Puter.js vous permet de gérer toute la logique directement en JavaScript, côté client, en utilisant ses services intégrés pour l’IA.

Voici le code HTML et JavaScript modifié pour fonctionner avec Puter.js.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Chatbot Puter.js</title>
  <style>
    /* === NOUVEAU DESIGN DU CHATBOT === */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background-color: #f0f2f5;
        margin: 0;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        box-sizing: border-box;
    }
    #chatbox {
        width: 100%;
        max-width: 600px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        height: 85vh;
        max-height: 700px;
        overflow: hidden; /* Pour contenir les coins arrondis */
    }
    .chat-header {
        background-color: #007bff;
        color: #fff;
        padding: 15px;
        text-align: center;
        font-size: 1.2em;
        font-weight: bold;
        flex-shrink: 0; /* Empêche le header de se réduire */
    }
    #messages {
        flex-grow: 1;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px; /* Espace entre les messages */
    }
    .msg {
        padding: 10px 16px;
        border-radius: 20px;
        max-width: 75%;
        line-height: 1.5;
        word-wrap: break-word;
    }
    .msg.user {
        background-color: #007bff;
        color: #fff;
        align-self: flex-end;
        border-bottom-right-radius: 5px; /* Effet de "queue" de bulle */
    }
    .msg.bot {
        background-color: #e9e9eb;
        color: #000;
        align-self: flex-start;
        border-bottom-left-radius: 5px; /* Effet de "queue" de bulle */
    }
    #inputArea {
        display: flex;
        padding: 15px;
        border-top: 1px solid #e0e0e0;
        background-color: #f9f9f9;
        align-items: center;
    }
    #input {
        flex-grow: 1;
        padding: 12px 18px;
        border: 1px solid #ccc;
        border-radius: 24px;
        margin-right: 10px;
        font-size: 16px;
        outline: none;
        transition: border-color 0.2s;
    }
    #input:focus {
        border-color: #007bff;
    }
    #send {
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 24px;
        padding: 12px 20px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        transition: background-color 0.2s;
    }
    #send:hover {
        background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div id="chatbox">
    <div class="chat-header">
      Mon Chatbot
    </div>
    <div id="messages">
      <div class="msg bot">Bonjour ! Comment puis-je vous aider ?</div>
    </div>
    <div id="inputArea">
      <input id="input" type="text" placeholder="Écris un message..." />
      <button id="send">Envoyer</button>
    </div>
  </div>

  <!-- Import de Puter.js -->
  <script src="https://js.puter.com/v2/"></script>
  <script>
    const messagesElem = document.getElementById("messages");
    const input = document.getElementById("input");
    const sendBtn = document.getElementById("send");

    // Historique de conversation = tableau
    const convo = [
      { role: "system", content: "Tu es un assistant utile, poli et concis." }
    ];

    function appendMsg(who, text) {
      const div = document.createElement("div");
      div.className = "msg " + who;
      div.textContent = text;
      messagesElem.appendChild(div);
      messagesElem.scrollTop = messagesElem.scrollHeight;
    }

    async function sendMessage(text) {
      if (!text.trim()) return;

      appendMsg("user", text);
      convo.push({ role: "user", content: text });
      input.value = "";

      try {
        // On passe le tableau 'convo' en premier, et les options dans un second objet.
        const res = await puter.ai.chat(convo, { model: "gpt-4.1-mini" });

        const answer = res?.message?.content || "Pas de réponse";
        appendMsg("bot", answer);
        convo.push({ role: "assistant", content: answer });

      } catch (err) {
        console.error("Erreur Puter.ai.chat:", err);
        appendMsg("bot", "Erreur de communication avec le chatbot.");
      }
    }

    sendBtn.addEventListener("click", () => {
      sendMessage(input.value);
    });

    input.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        sendMessage(input.value);
      }
    });
  </script>
</body>
</html>

Le script JavaScript gère tout le fonctionnement du chatbot. D’abord, il sélectionne les éléments du DOM qui vont servir : la zone des messages, l’input de saisie et le bouton d’envoi. Ensuite, un tableau nommé convo stocke l’historique de la conversation, en commençant par un message système qui définit le comportement du bot.

La fonction appendMsg ajoute dynamiquement un message dans le chat. Elle crée un élément div, lui donne une classe en fonction de l’expéditeur (user ou bot), insère le texte et le colle dans la zone des messages. Elle force aussi le scroll en bas pour que le dernier message soit visible.

La fonction asynchrone sendMessage est le cœur du chatbot. Elle vérifie que le texte n’est pas vide, affiche le message de l’utilisateur, puis l’ajoute à l’historique. Ensuite, elle appelle puter.ai.chat en lui passant l’historique et le modèle choisi. La réponse de l’IA est récupérée, affichée dans le chat et ajoutée à son tour à l’historique.

Si une erreur survient, elle est loggée dans la console et un message d’avertissement est affiché au lieu de la réponse.

Enfin, deux écouteurs d’événements gèrent les interactions : un clic sur le bouton « Envoyer » déclenche sendMessage, et une pression sur la touche Entrée fait la même chose. Cela rend le chatbot utilisable à la fois à la souris et au clavier.

Ajuster le chatbot au contexte du site sur lequel il est

Pour que notre chatbot soit contexte-dépendant, il faut que l’IA reçoive, dès le début, des informations sur le site et sa thématique. Dans le code actuel ci-dessus, nous avons déjà un message système dans le tableau convo :

const convo = [
  { role: "system", content: "Tu es un assistant utile, poli et concis." }
];

C’est exactement l’endroit où l’on peut ajouter le contexte du site. Par exemple, si votre site parle de cours de développement web, vous pouvez écrire :

const convo = [
  {
    role: "system",
    content: "Tu es un assistant utile et poli. Tu connais le site https://blog.crea-troyes.fr et tu peux répondre aux questions des utilisateurs sur les langages HTML, CSS, JS, PHP et au développement web. Réponds de façon claire et adaptée aux débutants."
  }
];

Ainsi, à chaque appel à puter.ai.chat, l’IA aura ce contexte en mémoire et pourra adapter ses réponses au contenu du site.

Vous pouvez aller plus loin en ajoutant dynamiquement des informations spécifiques selon la page visitée. Par exemple :

const pageTitle = document.title; 
const pageUrl = window.location.href;

const convo = [
  {
    role: "system",
    content: `Tu es un assistant utile et poli. L'utilisateur se trouve sur la page "${pageTitle}" (${pageUrl}). Fournis des réponses adaptées au contenu et à la thématique de cette page.`
  }
];

Créer un chatbot avec PHP pour votre site web est une excellente manière d’améliorer l’expérience utilisateur, d’automatiser les réponses et de rendre votre site plus interactif.

Dans ce tutoriel, nous avons vu ce qu’est un chatbot, ses avantages, son fonctionnement et comment l’installer sur votre site web.

L’intégration d’un chatbot ne nécessite pas de compétences avancées en intelligence artificielle, surtout grâce aux API disponibles. Avec quelques connaissances en PHP et HTML, vous pouvez offrir à vos visiteurs un assistant intelligent qui améliorera votre site et votre relation client.

En suivant ce tutoriel, vous avez toutes les clés pour créer un chatbot efficace, convivial et moderne. Il ne vous reste plus qu’à expérimenter, adapter et enrichir les fonctionnalités pour proposer une expérience unique à vos utilisateurs.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr