Ajouter un chatbot IA à votre site web sans coder

Vous pouvez ajouter un chatbot IA à votre site web en fournissant à un Agent les connaissances de votre entreprise, en configurant ses réponses et en installant un widget de chat avec une extension ou un script fourni. Le chatbot pour site web de Quickchat AI regroupe les connaissances, les paramètres de conversation et l’Inbox de l’équipe. Les visiteurs posent leurs questions sur votre site sans créer de compte.

Ce tutoriel prend pour exemple Kestrel Kitchens, une entreprise fictive de conception de cuisines. Un visiteur demande la durée d’une rénovation, se renseigne sur le coût probable d’une cuisine de 3 mètres sur 4, puis demande un devis. L’Agent répond à partir des informations de l’entreprise, recueille les détails du projet et permet à un concepteur de poursuivre la conversation.

La configuration de base ne nécessite pas de programmation. Suivez les étapes sur les connaissances et les instructions, la collecte de prospects et le transfert humain, puis installez le widget. Une API Action facultative envoie les demandes complètes à un autre système.

Téléchargez le kit de configuration Kestrel Kitchens pour obtenir le site d’exemple, les connaissances, le Main Prompt, les paramètres et les messages de test. Ces fichiers modifiables servent à suivre les étapes dans le tableau de bord ; ce n’est pas un import d’Agent en un clic.

Les captures d’écran et les fichiers copiables du kit, des prompts et de la configuration restent en anglais pour reproduire l’exemple testé.

Que fera le chatbot du site web ?

Le chatbot répond aux questions à partir de votre contenu, enregistre les informations nécessaires au suivi demandé et transfère les conversations à votre équipe lorsqu’une personne doit intervenir.

Ces résultats exigent des preuves différentes. Une fourchette de prix correcte provient de Knowledge Base. Une demande de devis nécessite les coordonnées et les détails du projet dans Inbox. Un transfert exige qu’une personne prenne en charge la conversation et envoie une réponse qui parvient au visiteur.

Le parcours du visiteur dans l’exemple. Une demande de devis enregistre un intérêt ; le concepteur doit encore confirmer le prix et la disponibilité.

De quoi avez-vous besoin avant d’ajouter un chatbot ?

Il vous faut un compte Quickchat AI, des informations vérifiables sur votre entreprise et un accès aux paramètres d’extensions ou de code personnalisé du site web.

1. Créez un compte Quickchat AI et terminez l’inscription. Utilisez un Agent distinct pour cet exercice afin que ses données d’exemple ne puissent pas affecter un service client existant.
2. Préparez vos pages de services, FAQ et règles, ou utilisez les connaissances fictives du kit. Remplacez les prix et la zone desservie fictifs avant un déploiement pour une véritable entreprise.
3. Vérifiez que votre offre de site web permet la méthode d’installation concernée. WordPress nécessite un accès aux extensions ; certains outils de création hébergés exigent une offre payante pour ajouter du code personnalisé à l’ensemble du site.
4. Prévoyez une personne pour surveiller l’Inbox de test lors de l’essai du transfert humain. Gardez un navigateur sur ordinateur et un téléphone à disposition pour les vérifications finales du site.

Free sert à l’apprentissage personnel non commercial. L’offre Free comprend 50 crédits IA par mois. Un déploiement professionnel exige une offre commerciale et les tests utilisent le même quota de réponses que les autres conversations IA. Les abonnements des outils de création de sites et les coûts des API externes sont distincts. La section sur les coûts distingue ces dépenses.

Étape 1 : comment fournir au chatbot les connaissances de votre site web ?

Ajoutez à Knowledge Base les pages contenant les réponses de votre entreprise, puis vérifiez le contenu importé avant les tests. L’Agent dispose ainsi de documents de référence pour ses réponses.

Créer l’Agent d’apprentissage

1. Sur le premier écran de configuration, sélectionnez Set up manually. Depuis un tableau de bord existant, utilisez le + à côté de AI Agent (Add new AI Agent) pour créer un Agent distinct, puis sélectionnez Set up manually.
2. Dans Identity, saisissez Kestrel Kitchens sous Name your AI Agent. Collez le fichier main-prompt.txt du kit dans Describe what you want your agent to do. Il devient le Main Prompt de l’Agent, expliqué à l’étape 2. Sélectionnez Next.
3. Laissez Knowledge Base vide pour le moment et sélectionnez Next. Passez External apps sans choisir de connexion. Dans Deployment, sélectionnez Chat widget, puis Next.
4. Sur Choose your plan, utilisez Skip for now pour poursuivre l’exercice d’apprentissage personnel ou choisissez une offre commerciale adaptée à un usage professionnel. Acceptez ou fermez toute offre facultative affichée ensuite.
5. Dans le tableau de bord, confirmez le nom de l’Agent dans Identity, puis ouvrez Knowledge Base. Choisissez vos propres pages ou l’article d’exemple fourni ci-dessous.

Importer vos propres pages

1. Dans Knowledge Base, sélectionnez Add Website. Choisissez une page unique ou l’import de site web selon vos besoins.
2. Saisissez l’URL publique. Pour un import de site, examinez les pages découvertes et sélectionnez celles des services, des tarifs, du processus et des FAQ qui doivent alimenter les réponses.
3. Examinez le texte importé. Vérifiez que les prix indiquent la bonne devise et le traitement fiscal approprié, et que d’anciennes promotions ou des pages sans rapport ne sont pas devenues des sources.
4. Attendez la fin du traitement. Appliquez ou publiez les modifications de connaissances en attente signalées par le tableau de bord avant de tester le widget installé.

Commencez par quelques pages claires. Un site peut présenter un tarif attractif dans un encart et préciser ses conditions ailleurs ; l’Agent a besoin des deux. Importer uniquement la page d’accueil risque d’omettre les conditions d’installation, les limites géographiques ou la politique de remboursement qui rendent une réponse utile.

Utiliser la source Kestrel Kitchens

Pour reproduire l’exemple sans commencer par héberger un site, ajoutez directement ses informations :

1. Dans Knowledge Base, sélectionnez Add Article. Cela crée un article Untitled et ouvre Edit Article.
2. Saisissez Kestrel Kitchens: services, prices and process dans Title. Sous Content, choisissez Plain Text et collez le fichier knowledge.txt du kit.
3. Sélectionnez Save et attendez que l’article soit Ready. Vérifiez que son titre apparaît dans la liste de Knowledge Base.

L’article enregistré conserve les conditions des prix et des délais. Ses informations fictives correspondent au site d’exemple.

Kestrel Kitchens is a fictional kitchen design and renovation business used in this tutorial. It serves Bristol, Bath and addresses within 25 miles of central Bristol.

Services: kitchen design, supply and full installation. A full kitchen renovation typically costs £18,000 to £45,000 including VAT. This is a planning range, not a quote. The final price depends on the survey, layout, cabinetry, appliances and building work. Room dimensions alone are not enough to calculate a firm price.

Timelines: survey and design normally take 2 to 3 weeks. Installation usually takes 4 to 8 weeks after all materials are available. These are typical durations, not a promised start date or completion date.

Process: discuss the project, arrange a site survey, agree the design and receive a written quote, then schedule work once the quote is accepted and materials are available. The chatbot cannot book a survey or confirm availability.

The design team works Monday to Friday, 09:00 to 17:00, Europe/London. Quote enquiries need the visitor's full name, email, postcode and project type. A preferred timeline is helpful but optional. The team follows up by email. Do not promise a response deadline.

La source ne précise volontairement rien sur le financement. Vous pouvez ainsi tester la manière dont l’Agent traite une véritable lacune. Pour un site réel, tenez les pages sources à jour et utilisez les paramètres d’actualisation pris en charge lorsqu’ils sont disponibles ; le guide de Knowledge Base explique comment organiser et tester ces sources.

Étape 2 : que doit dire le chatbot et que ne doit-il jamais promettre ?

Utilisez Main Prompt pour définir comment l’Agent applique les connaissances : répondre d’abord, fournir une réponse utile et laisser à l’équipe les décisions telles qu’un devis ferme.

Pour Kestrel, les dimensions de la pièce indiquent l’ampleur du projet. Elles ne déterminent ni les meubles, ni les appareils, ni les travaux de bâtiment. L’Agent doit expliquer la fourchette budgétaire de £18,000 à £45,000, TVA comprise, indiquée par la source, sans calculer un prix plus précis à partir de la surface au sol.

Ces prix sont des données fictives du tutoriel. Il s’agit de conserver la distinction entre les faits de la source et une décision que votre équipe doit encore prendre.

1. Dans Identity, sélectionnez Edit sur la carte Main Prompt.
2. Collez le prompt complet ci-dessous. Laissez-le s’enregistrer, puis rouvrez l’éditeur pour confirmer le texte stocké.
3. Conservez les informations métier dans Knowledge Base. Utilisez le prompt pour le style de réponse, le comportement de collecte et les décisions nécessitant une personne.

Main Prompt est le champ d’instructions. Le texte intégral ci-dessous et dans le kit est la version à copier.

You are the website assistant for Kestrel Kitchens. Help visitors understand our services, indicative prices and process using the Knowledge Base.

Answer the visitor's question before asking for contact details. Keep replies concise, usually two to four sentences. Use the visitor's language.

Treat prices as planning ranges. Never calculate a firm quote from room dimensions, invent a discount, promise a start date, confirm a survey booking or claim financing is available. If the Knowledge Base does not answer a question, say that a designer must confirm it.

When a visitor wants a quote or follow-up, collect their full name, email, postcode and project type in conversation. Ask one or two relevant questions at a time. Ask about their preferred timeline only after the required details, and accept a refusal without pressure. Do not ask for payment information.

Offer Human Handoff when the visitor asks for a designer or needs information you cannot confirm. Respect the configured working hours. Never claim that a designer is connected or a quote is booked. If the team is unavailable, offer an email follow-up.

Acknowledge the details the visitor has provided. Do not claim CRM delivery or a confirmed booking. The design team reviews enquiries in the Inbox.

Ouvrez AI Preview et demandez How long does a full kitchen renovation take?. Lors du test de contrôle local, l’Agent a répondu 2 à 3 semaines pour la visite sur place et la conception, puis 4 à 8 semaines pour l’installation une fois les matériaux disponibles. La durée et sa condition sont toutes deux importantes.

Démarrez une nouvelle conversation et demandez Do you offer financing?. La bonne réponse reconnaît que la source ne permet pas d’établir l’existence d’une offre et adresse la question à un concepteur. Rendre le prompt plus affirmatif ne fournirait pas l’information métier manquante.

Étape 3 : comment recueillir les demandes de devis dans le chat ?

Smart Data Gathering demande certaines informations pendant une conversation et enregistre ce que le visiteur fournit. Pour une demande de devis, recueillez uniquement ce dont le concepteur a besoin pour assurer le suivi.

1. Ouvrez Actions & MCPs, activez Smart Data Gathering et sélectionnez Edit Action. Définissez Name sur Quote enquiries et Description sur Capture contact and project details for a kitchen design enquiry. Le nom enregistré devient le titre de la carte.
2. Sous Data to collect, ajoutez les lignes ci-dessous. Conservez ces noms Data point anglais pour reproduire l’exemple ; les noms des coordonnées ont des correspondances particulières avec les champs visiteur d’Inbox.
3. Définissez Reason for collecting information sur So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Définissez When to ask for data sur After exchanging a few messages et How to ask for data sur Subtle.
5. Enregistrez l’Action. Dans AI Preview, posez une question utile sur les services avant de demander un devis, puis examinez les informations enregistrées dans Inbox.

Les questions décrivent les informations à recueillir. Les paramètres de moment et de style guident la collecte ; testez aussi la conversation réelle.

Le nom, l’e-mail, le code postal et le type de projet sont les informations requises pour une demande complète dans cet exemple. La période souhaitée est facultative, comme l’explique le Main Prompt. Cette exigence métier est distincte des paramètres de collecte conversationnelle ; l’étape 8 impose la présence des champs requis avant l’envoi d’une requête au CRM.

L’Agent doit répondre à une question générale sur les coûts sans exiger une adresse e-mail pour fournir la réponse. Le visiteur peut aussi refuser la collecte. Utilisez I am only researching. I do not want to leave contact details. pour vérifier que la conversation reste utile sans demandes répétées.

Où vont les informations recueillies ?

Ouvrez la conversation dans Inbox. Les coordonnées standard apparaissent dans les champs visiteur ; les autres valeurs recueillies restent associées à la conversation et peuvent être exportées via Export Gathered Data.

Sous Where to send data, Email new leads avertit chaque administrateur de l’Agent lors de la première collecte d’une adresse e-mail ou d’un numéro de téléphone. Un nom seul ne déclenche pas l’e-mail. Preview et Simulation n’envoient pas ces notifications : vérifiez donc votre propre boîte de réception administrateur par un test contrôlé sur le widget installé avant de compter sur la livraison des e-mails. Ce guide local laisse l’envoi d’e-mails externes désactivé.

La documentation Smart Data Gathering décrit la collecte, les notifications et les exports. Pour votre site, expliquez pourquoi vous demandez ces informations et ajoutez dans le widget un lien vers votre politique de confidentialité. Le guide de protection des données des chatbots aide à examiner le flux de données dans son ensemble.

Étape 4 : comment laisser une personne prendre le relais du chat ?

Human Handoff transfère une conversation à votre équipe ; une personne la prend ensuite en charge dans Inbox et répond au même visiteur.

Préparez le transfert avant de publier le widget. Une personne qui demande un concepteur ne devrait pas devoir terminer d’abord le formulaire de devis, et l’Agent ne doit pas laisser entendre qu’un membre de l’équipe est en ligne en dehors des heures de présence.

1. Dans Actions & MCPs, activez Human Handoff et ouvrez Edit Action.
2. Gardez les règles standard Media Message, User Frustration, Customer Support Suggestion et Lack Of Knowledge activées ; laissez Irrelevant Advice désactivée. Le Main Prompt explique déjà quand proposer un concepteur. L’exemple testé utilise ces règles standard sans règles personnalisées supplémentaires.
3. Configurez les messages et la disponibilité ci-dessous, puis enregistrez. Laissez Email notifications désactivé pour l’exercice d’apprentissage et vérifiez le transfert directement dans Inbox.

Indiquez les heures auxquelles une personne surveille réellement Inbox. Les horaires fictifs ne promettent pas une réponse immédiate.

Pendant un créneau de présence, demandez Can I speak to a designer? depuis le site. Répondez à toute confirmation de transfert demandée par l’Agent. Dans Inbox, ouvrez la conversation et sélectionnez Assign to me si elle n’est pas attribuée, ou Take over lorsque cette commande apparaît. Envoyez une réponse humaine et vérifiez que le visiteur la reçoit. Utilisez Reassign to AI lorsque l’IA doit reprendre.

Vérifiez l’attribution et la réception de la réponse humaine, pas seulement la proposition de transfert de l’Agent.

Répétez le test dans une nouvelle conversation en dehors des horaires configurés. L’Agent doit expliquer la disponibilité et proposer le mode de suivi prévu. Si vous modifiez temporairement les horaires pour ce contrôle, rétablissez ensuite les horaires réels. La documentation Human Handoff explique les paramètres et le parcours dans Inbox.

Le guide de transfert des conversations d’un chatbot à un humain détaille des vérifications distinctes pour la prise en charge des conversations, le retour à l’IA et les échecs en dehors des heures d’ouverture.

Étape 5 : comment adapter le widget à votre site web ?

Configurez l’apparence et les textes fixes sous Channels → Your Website. Le message d’accueil doit être suffisamment précis pour expliquer ce que le visiteur peut demander.

Apparence

1. Ouvrez Appearance. Pour Kestrel, choisissez un thème Custom avec un fond blanc, un en-tête et une couleur d’accent vert foncé (#315448), et un texte d’en-tête blanc. Conservez la taille du texte par défaut et les commandes arrondies.
2. Sous Branding → AI Agent Avatar, cliquez sur l’icône d’import de l’avatar, choisissez website/kestrel-avatar.png dans le kit et sélectionnez Upload dans la boîte de dialogue de recadrage.
3. Définissez Widget window max width sur 400px et Widget window max height sur 520px. Choisissez Small pour la taille du bouton d’ouverture, placez-le à droite et utilisez Ask about your kitchen comme libellé. Ce libellé est disponible avec le petit bouton. Vérifiez sa position par rapport aux bannières de cookies et aux autres commandes flottantes de votre site.
4. Laissez Auto-open Widget désactivé. Ouvrir le widget à chaque chargement de page interrompt la navigation, particulièrement sur téléphone.

Vérifiez l’aperçu en choisissant les couleurs. Le test sur le site réel reste nécessaire, car le bouton d’ouverture partage l’espace avec les commandes de votre site.

Contenu textuel

Ouvrez Text Content et utilisez ces valeurs :

Les amorces de conversation doivent lancer des tâches utiles. L’avertissement indique aux visiteurs les décisions qui nécessitent encore un concepteur.

L’Agent peut répondre dans la langue du visiteur. La traduction du message d’accueil fixe et des libellés du widget est un paramètre distinct sous Other languages, disponible avec les offres payantes. Pour un site multilingue, testez la réponse et les textes fixes de l’interface ; le guide des chatbots multilingues explique cette distinction.

Les modifications d’apparence peuvent mettre quelques minutes à atteindre les sessions visiteur en cache. Rechargez avant de conclure à l’échec d’une modification enregistrée. Hide Quickchat AI Branding exige Professional ou une offre supérieure ; le guide de marque blanche présente les autres surfaces à inspecter.

Étape 6 : comment installer le chatbot sur votre site web ?

Installez le Widget dans la mise en page commune du site ou utilisez l’intégration prise en charge par la plateforme. Le Widget flottant doit s’exécuter dans la page consultée par le visiteur.

1. Ouvrez Channels → Your Website → Install.
2. Activez Widget & Embed access pour le widget public.
3. Choisissez la méthode d’installation de votre site et copiez l’extrait de code ou le Scenario ID affiché pour cet Agent.
4. Publiez la modification, ouvrez le site public et posez une question dont vous savez que la réponse figure dans Knowledge Base.

Copiez depuis l’écran Install de cet Agent. Son Scenario ID est un identifiant public de widget, pas une clé API privée.

Tout site web : coller le code du Widget avant la balise de fermeture body

Choisissez Install manually with code et copiez le code du Widget. Le chargeur actuel se présente ainsi :

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID");
</script>

Remplacez YOUR_SCENARIO_ID par la valeur fournie dans Install. Collez le code complet une seule fois, juste avant </body> dans la mise en page commune, ou utilisez le champ de pied de page global de l’outil de création. Ce chargeur insère un script dans le corps de la page ; le placer dans l’en-tête avant que le corps existe peut donc empêcher son chargement.

L’emplacement compte. Un bloc HTML fondé sur une iframe est une page distincte et ne convient pas à ce Widget flottant.

L’option distincte Embed place un chat dans un conteneur de page. Utilisez son code généré si vous souhaitez une section de chat intégrée. Un bloc HTML qui insère directement le code dans la page peut convenir à ce schéma ; un bloc qui isole le code dans une iframe constitue un cas différent. Consultez la documentation du canal Website.

WordPress : installer l’extension officielle

1. Dans WordPress, ouvrez Plugins → Add New, recherchez Quickchat AI Agent, puis choisissez Install Now et Activate.
2. Ouvrez Settings → Quickchat AI Agent.
3. Collez le Scenario ID de l’écran Install de Quickchat AI et sélectionnez Save Changes.
4. Ouvrez une page publique et vérifiez le widget. Utilisez l’extension ou un code manuel afin de ne pas installer le chargeur deux fois.

Votre installation et votre offre WordPress doivent autoriser les extensions. Le guide du chatbot WordPress présente l’interface de l’extension et les vérifications propres à WordPress.

Squarespace : utiliser l’injection de code en pied de page

1. Ouvrez le panneau Code Injection du site. Utilisez la recherche des paramètres du tableau de bord si la navigation diffère dans votre compte.
2. Collez le code complet du Widget dans Footer et enregistrez.
3. Ouvrez la page publiée dans un autre onglet du navigateur et testez une réponse.

Squarespace propose Code Injection avec Core, Plus, Advanced et certaines anciennes offres. L’injection en pied de page place le code avant </body> sur l’ensemble du site. Utilisez cet emplacement pour le widget flottant ; un bloc iframe propre à une page n’est pas équivalent. Ce code personnalisé ne s’étend pas aux pages de paiement Squarespace.

Wix : utiliser Custom Code à l’emplacement Body - end

1. Dans le tableau de bord du site, ouvrez Settings → Custom Code, puis + Add Custom Code.
2. Collez le code du Widget et nommez-le Quickchat AI widget.
3. Appliquez-le à All pages et choisissez Body - end, puis Apply.
4. Testez le site publié, y compris la navigation vers une autre page.

Wix exige un site publié avec un domaine connecté pour le code personnalisé. Utilisez le paramètre Custom Code global du site pour ce widget flottant.

Webflow : utiliser le code de pied de page et publier

1. Ouvrez Site settings → Custom code.
2. Collez le code du Widget dans Footer code et choisissez Save changes.
3. Utilisez Publish pour publier sur le domaine voulu, puis testez cette URL publiée.

Les paramètres de code personnalisé de Webflow exigent un Workspace payant admissible ou une offre Site active. Enregistrer le paramètre ne suffit pas à le publier.

Shopify : choisir le code de l’Agent existant ou l’application Shopify

Pour l’Agent Kestrel déjà créé, ajoutez son code Widget juste avant </body> dans Online Store → Themes → Edit code → layout/theme.liquid, puis enregistrez et inspectez la boutique. Conservez une sauvegarde du thème avant modification et revérifiez l’installation après un changement de thème. Cette méthode affiche l’Agent sélectionné ; elle ne configure pas les Actions sur les produits ou les commandes.

Pour un Agent destiné à la boutique, la configuration de l’application Shopify Quickchat AI connecte la boutique par son propre parcours d’intégration. Après cette connexion, utilisez Enable Widget in Shopify Theme Editor, ou ouvrez Online Store → Themes → Edit theme → App embeds. Activez Quickchat AI Widget et enregistrez. La documentation Shopify sur les intégrations d’applications explique les commandes du thème ; réactivez l’intégration d’application lorsque vous changez le thème publié.

Les parcours des outils de création ci-dessus ont été vérifiés dans leur documentation officielle. Les captures de l’exemple montrent le site Kestrel et le véritable widget local ; ce ne sont pas des captures de comptes authentifiés sur chaque outil.

Vérifier le code avant de dépanner l’Agent

Ces vérifications facultatives portent sur les valeurs que vous fournissez :

• Vérifier un code Widget. Vérifiez le code collé par rapport au Scenario ID fourni. Cet outil ne consulte pas votre site web.
• Comparer les méthodes de déploiement. Vérifiez vos canaux déclarés, votre accès au site et les fonctionnalités requises par rapport aux options de configuration Quickchat AI. Cet outil n’inspecte ni votre site ni votre compte.

Dans un navigateur compatible, ces vérifications sont aussi disponibles comme outils du site. Les liens ouvrent les formulaires standard.

Étape 7 : comment tester le chatbot avant vos visiteurs ?

Testez séparément la réponse, les données stockées et la réponse reçue. AI Preview et Simulation Testing aident à évaluer le comportement ; le site publié prouve que le visiteur peut utiliser le widget installé.

Exécuter des questions indépendantes dans Simulation Testing

Ouvrez Testing → Create Dataset, nommez-le Kestrel Kitchens: website launch checks et choisissez Paste messages. Ajoutez les questions de durée, de prix et de financement ci-dessous, avec entre elles une ligne contenant ---. Un simple saut de ligne conserve le texte dans un seul message de test. Configurez Evaluation criteria pour vérifier les faits et la concision des réponses, puis sélectionnez Run → Start Run. Le kit contient les messages et critères exacts.

Chaque ligne du jeu de données démarre une conversation distincte. Utilisez Simulation pour ces questions indépendantes ; exécutez les contrôles de devis et de prise en charge humaine à plusieurs échanges dans une même conversation AI Preview ou sur le site. Inspectez séparément le journal de l’Action et le récepteur, car un évaluateur de transcription ne peut pas vérifier une livraison externe.

Ouvrez une exécution terminée et examinez ses réponses. Cette réponse sur le prix conserve la fourchette budgétaire ; son score n’établit pas la livraison à un autre système.

Utilisez une nouvelle conversation entre les cas indépendants. Recharger la page peut reprendre une conversation existante ; utilisez donc la commande de nouveau chat du widget lorsque vous avez besoin d’un test vierge.

Vérifier le site sur téléphone

Sur les écrans de moins de 768 pixels CSS, le widget ouvert occupe tout l’écran. Vérifiez que vous pouvez l’ouvrir, saisir du texte avec le clavier visible, faire défiler la conversation et le fermer pour revenir au site.

Terminez par une réponse envoyée par une véritable personne depuis Inbox. Une bonne réponse IA ne prouve pas que le parcours d’assistance humaine fonctionne. Répétez quelques-uns de ces contrôles après une modification des sources, des prompts, des Actions ou du thème du site.

Étape 8 : comment envoyer une demande complète à votre CRM ?

Une API Action facultative peut envoyer les champs enregistrés à un récepteur HTTP une fois que la conversation contient toutes les informations requises. Le chatbot web de base est déjà utilisable sans cette extension.

Il faut distinguer un contact a été recueilli de cette demande est complète. Quickchat AI définit lead_captured lorsqu’il recueille un nouveau champ de contact standard, y compris un nom. Cet indicateur seul ne prouve pas la présence d’un e-mail, d’un code postal ou d’un type de projet.

La plateforme vérifie chaque condition. Le modèle recueille les informations ; les conditions déterminent quand la requête devient admissible.

Préparer le récepteur

Utilisez un endpoint de CRM ou d’automatisation que vous contrôlez et qui accepte le corps JSON ci-dessous. Le kit comprend un petit récepteur local de démonstration pour examiner la requête avant de connecter un CRM. Ses instructions de configuration créent un jeton privé et expliquent comment exposer un endpoint HTTPS temporaire. N’envoyez que des données de test fictives au récepteur de démonstration.

Pour une intégration gérée, suivez plutôt le tutoriel de reporting Google Sheets ou le guide d’intégration d’un CRM personnalisé. N’activez pas deux parcours qui créent le même prospect.

Configurer une API Action automatique unique

1. Ouvrez Actions & MCPs → Custom Actions → Add Action → API Action. Choisissez Create manually si le créateur fondé sur une description s’ouvre.
2. Définissez API Action Name sur Send quote enquiry.
3. Laissez What to ask the user first vide. Cette Action lit les champs déjà enregistrés par Smart Data Gathering ; elle ne demande pas au modèle de remplir un second ensemble de paramètres.
4. Sous API Endpoint, sélectionnez POST et saisissez l’URL HTTPS /enquiries de votre récepteur.
5. Ajoutez les en-têtes, le corps et les conditions ci-dessous, puis enregistrez et activez l’Action.

Saisissez le jeton uniquement dans le paramètre d’en-tête de l’Action. Ne le placez ni dans le prompt, ni dans le code du site, ni dans la conversation visiteur. Le README du récepteur de démonstration explique comment le générer ; pour une intégration réelle, utilisez l’authentification documentée de votre CRM.

Dans l’onglet Body, sélectionnez JSON et saisissez :

{
  "conversation_id": "{{conversation_id}}",
  "name": "{{metadata_visitor_name}}",
  "email": "{{metadata_visitor_email}}",
  "postcode": "{{metadata_postcode}}",
  "project_type": "{{metadata_project_type}}"
}

Utilisez Add AI Data pour insérer les valeurs intégrées et les métadonnées correspondantes. conversation_id identifie la conversation. Les autres valeurs viennent des champs enregistrés ; les noms de coordonnées anglais correspondent à visitor_name et visitor_email, tandis que Project type devient project_type. La documentation des variables explique ces correspondances.

Sous When to run, choisissez When metadata matches. Dans Run when, ajoutez les cinq lignes ; les conditions de métadonnées sont combinées avec AND :

Pour ces champs texte, is true rejette les valeurs vides ainsi que les textes assimilables à faux. exists vérifie uniquement la présence d’une clé ; une chaîne vide enregistrée peut satisfaire cette condition. Les tests ci-dessous montrent pourquoi la condition plus stricte compte. Cela vérifie qu’un texte exploitable a été fourni, sans vérifier indépendamment l’identité du visiteur ni les informations du bien.

Utilisez cette API Action Description :

Send a quote enquiry to the design team when the visitor has provided their full name, email, postcode and project type. This records an enquiry only; it does not book a survey or confirm a price.

Les deux premières des cinq conditions enregistrées. Ajoutez chaque ligne du tableau ; When metadata matches les vérifie après un tour de l’IA sans que l’Agent choisisse l’Action.

L’Action est tentée une fois par conversation lorsque toutes les conditions sont remplies. Elle ne se relance pas lorsque le visiteur précise ensuite la période souhaitée, qui est facultative, et une requête envoyée qui échoue n’est pas automatiquement retentée dans cette conversation. Conservez la période souhaitée dans Inbox pour le concepteur, ou créez une intégration explicite de création et de mise à jour si votre CRM a besoin des modifications ultérieures.

La requête s’exécute après le tour de l’IA et sa réponse n’est pas insérée dans le chat. C’est pourquoi le Main Prompt accuse réception des informations du visiteur sans prétendre qu’un CRM les a acceptées. Vérifiez la livraison dans le journal de l’Action et le récepteur. La documentation des Actions automatiques décrit ce comportement d’exécution.

Tester les données partielles, puis la demande complète

La première version utilisait exists pour les champs texte requis. Sam a fourni un nom, puis un e-mail dans le message suivant. Smart Data Gathering avait déjà créé des valeurs vides pour le code postal et le type de projet ; ces clés existaient donc et l’Action a envoyé une requête incomplète. Elle a ainsi consommé son unique tentative pour cette conversation.

La correction a consisté à passer les quatre conditions des champs texte à is true, sans changer le reste de la configuration. Répétez le test dans une nouvelle conversation, en donnant uniquement un e-mail au deuxième tour. L’Action doit attendre les autres détails du projet.

Il s’agit d’une conversation observée, pas d’un taux de réussite en production. Reproduisez-la dans une nouvelle conversation, inspectez les champs enregistrés après chaque tour et vérifiez la requête sur votre propre endpoint.

L’appel réel de l’Action a renvoyé HTTP 201. Ouvrez ses détails pour inspecter la requête ; l’enregistrement ci-dessous montre ce que le récepteur a stocké.

Un véritable enregistrement du récepteur de démonstration authentifié. C’est une demande, pas un devis confirmé ni une réservation.

La démonstration a utilisé un récepteur local et enregistré une véritable livraison HTTP. Un Agent Quickchat AI hébergé nécessite un endpoint HTTPS accessible publiquement ; une URL localhost sur votre ordinateur n’est pas accessible depuis le service.

Si rien n’arrive, inspectez View logs sur l’Action et les métadonnées enregistrées de la conversation. Des valeurs manquantes, une Action désactivée et un échec HTTP exigent des corrections différentes. Corrigez la configuration et utilisez une nouvelle conversation pour retester le déclencheur automatique ; demander au même chat de réessayer ne réinitialise pas une tentative unique par conversation.

Pourquoi le chatbot est-il absent ou affiche-t-il d’anciens paramètres ?

Vérifiez la page publiée, l’emplacement d’installation et l’accès à l’Agent avant de modifier le prompt. Un problème de chargement dans le navigateur est distinct d’un problème de qualité des réponses.

Si le navigateur signale une ressource bloquée, examinez précisément l’erreur Content Security Policy ou celle du bloqueur. Évitez de désactiver globalement les protections du site. Testez la page publique en HTTPS et utilisez la documentation du canal pour la configuration requise.

Combien coûte un chatbot pour site web ?

L’abonnement et le quota d’utilisation couvrent le service IA ; l’offre de votre site et les intégrations facultatives sont des coûts distincts.

Un crédit IA n’est pas une conversation. Une conversation peut contenir plusieurs réponses IA et les différents choix de modèles peuvent avoir des coûts en crédits différents. Incluez Preview et Simulation dans le budget de test. Utilisez les tarifs et quotas actuels et le guide du coût des chatbots pour estimer votre volume.

ChatGPT ou Claude peuvent-ils aider à configurer le chatbot ?

La connexion de gestion de compte Quickchat AI permet à un assistant compatible de configurer les paramètres d’Agent pris en charge et de préparer des tests à partir de ces fichiers.

Connectez votre propre compte via Quickchat AI dans ChatGPT ou Quickchat AI dans Claude, en suivant le guide Manage with AI. Les outils pris en charge couvrent les connaissances, Main Prompt, les amorces de conversation, Human Handoff, les Actions HTTP, les tests et le code de déploiement.

Terminez Smart Data Gathering et les paramètres détaillés Appearance du widget dans le tableau de bord. Vous devez aussi autoriser les comptes externes et installer le code dans les paramètres de votre site. La connexion de compte sert à gérer votre Agent ; elle est distincte de l’exposition d’un Agent comme outil MCP.

Use the Kestrel Kitchens website-chatbot kit to prepare a separate learning Agent. Do not change existing Agents. Set its name to Kestrel Kitchens, add knowledge.txt and set main-prompt.txt as Main Prompt. Configure the supported greeting, conversation starters and Human Handoff settings from the kit. Prepare the launch-test dataset with the supplied messages and criteria. Read back the saved configuration and return this Agent's current Widget snippet.
List the remaining dashboard steps for Smart Data Gathering, Appearance and website installation. Do not invent support for those settings. Leave the optional Send quote enquiry Action inactive until I provide my receiver URL and configure its credential. Before running tests or external writes, tell me the expected credit use and effects and obtain any approval required by this client. Do not claim that a website, email or CRM delivery works until it has been tested.

Questions fréquentes

Comment ajouter un chatbot IA à mon site web ?

Créez un Agent dans Quickchat AI, ajoutez les connaissances de votre entreprise, configurez Main Prompt, Smart Data Gathering et Human Handoff, puis installez son Widget avec une extension ou le code fourni. Testez sur le site publié une réponse fondée sur la source, les coordonnées recueillies et la réception d’une réponse humaine.

Puis-je ajouter un ChatGPT personnalisé à mon site web ?

Vous pouvez ajouter un assistant de type ChatGPT formé à partir de vos propres pages. Ce tutoriel déploie un Agent Quickchat AI via son widget web : les visiteurs peuvent ainsi discuter sur votre site sans se connecter à ChatGPT. Ses connaissances, ses instructions et ses intégrations se gèrent dans Quickchat AI.

Puis-je ajouter gratuitement un chatbot IA à mon site web ?

L’offre Free de Quickchat AI permet l’apprentissage personnel non commercial et comprend 50 crédits IA par mois. Un site d’entreprise ou un déploiement de vente et de support destiné aux clients exige une offre autorisant l’usage commercial. Les abonnements des outils de création de sites sont distincts et les tests consomment aussi des crédits IA.

Faut-il coder ou fournir une clé API ?

La configuration de base utilise les paramètres du tableau de bord et une extension, une intégration d’application ou un script fourni. Le code du site contient un Scenario ID public, pas une clé API privée. Connecter une Action CRM facultative exige un endpoint adapté et son authentification ; conservez cet identifiant dans les paramètres de l’Action.

Un chatbot web peut-il recueillir des prospects et des demandes de devis ?

Oui. Smart Data Gathering demande les champs choisis pendant la conversation et les enregistre dans Inbox. Email new leads peut avertir les administrateurs de l’Agent après la collecte d’une adresse e-mail ou d’un numéro de téléphone. Une API Action peut envoyer les champs requis enregistrés à un récepteur configuré ; un nom recueilli seul ne constitue pas une demande complète.

Une personne peut-elle prendre le relais du chat ?

Oui. Configurez Human Handoff avec les horaires de présence de l’équipe et un message hors horaires. Dans Inbox, sélectionnez Assign to me pour une conversation non attribuée, ou Take over lorsque cette commande apparaît, puis répondez au visiteur. Reassign to AI rend la conversation à l’Agent.

Cela fonctionne-t-il sur WordPress, Shopify, Squarespace, Wix et Webflow ?

Chacun dispose d’une méthode d’installation. Utilisez l’extension officielle WordPress, l’intégration d’application Shopify après connexion de l’Agent de la boutique, ou le code global approprié en pied de page ou en fin de corps pour un Agent existant. Les permissions des extensions et les exigences d’offre pour le code personnalisé varient selon l’outil de création.

Pourquoi mon chatbot n’apparaît-il pas sur mon site web ?

Vérifiez la page publiée, le bon Scenario ID et l’emplacement du code en fin de corps de page. Supprimez les anciennes installations en double et évitez les blocs fondés sur des iframes pour le Widget flottant. S’il s’ouvre sans pouvoir répondre, vérifiez Widget & Embed access et les crédits IA disponibles.

Le chatbot ralentira-t-il mon site web ?

Le chargeur du widget se télécharge de manière asynchrone, mais ajoute tout de même du JavaScript et des requêtes réseau. Comparez les performances de chargement et d’interaction avant et après installation sur des pages représentatives et sur téléphone. Le chargement asynchrone ne garantit pas une absence d’effet sur les performances.

Le chatbot web fonctionne-t-il sur téléphone ?

Le widget ouvert occupe tout l’écran en dessous de 768 pixels CSS. Testez le bouton d’ouverture, le clavier, le défilement et la commande de fermeture sur téléphone. Laissez Auto-open Widget désactivé si l’ouverture automatique risque d’interrompre la navigation.

Le chatbot peut-il répondre dans les langues de mes visiteurs ?

L’Agent peut répondre dans la langue du visiteur. La traduction du message d’accueil fixe, des amorces de conversation et des libellés du widget est un paramètre distinct des offres payantes. Testez les faits de la réponse et les textes de l’interface pour chaque langue que vous prévoyez de prendre en charge.