{"id":1561,"date":"2022-10-28T14:15:57","date_gmt":"2022-10-28T13:15:57","guid":{"rendered":"https:\/\/botnation.ai\/?p=1561"},"modified":"2026-01-02T16:34:07","modified_gmt":"2026-01-02T15:34:07","slug":"ajouter-des-boutons-chatbot-web","status":"publish","type":"support","link":"https:\/\/botnation.ai\/fr\/support\/ajouter-des-boutons-chatbot-web\/","title":{"rendered":"Ajouter des boutons (Chatbot Web)"},"content":{"rendered":"<p>Ajoutez des boutons d\u2019action dans votre chatbot web<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"415\" height=\"576\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/image-56.png.webp\" alt=\"\" class=\"wp-image-1562\" srcset=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/image-56.png 415w, https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/image-56-216x300.png 216w\" sizes=\"(max-width: 415px) 100vw, 415px\" \/><\/figure>\n<\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\">1. Utilisation<\/h2>\n\n\n\n<p>Il y a deux mani\u00e8res diff\u00e9rentes de cr\u00e9er un bouton.<\/p>\n\n\n\n<p>La premi\u00e8re consiste \u00e0 ajouter directement cette fonctionnalit\u00e9 en cliquant sur l\u2019ic\u00f4ne \u00ab\u00a0bouton\u00a0\u00bb qui se trouve parmi les autres fonctionnalit\u00e9s. (Voir ci-dessous).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_00_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1564\"><\/figure>\n\n\n\n<p>La seconde mani\u00e8re consiste \u00e0 cr\u00e9er un<a href=\"https:\/\/botnation.ai\/ajouter-un-texte-a-votre-chatbot\/\"> texte<\/a> puis transformer ce texte en un bouton.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_00_FR_bis-1024x604.png.webp\" alt=\"\" class=\"wp-image-1566\"><\/figure>\n\n\n\n<p>Au final vous aurez le m\u00eame r\u00e9sultat:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/image-57.png.webp\" alt=\"\" class=\"wp-image-1569\" width=\"314\" height=\"299\" srcset=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/image-57.png 511w, https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/image-57-300x285.png 300w\" sizes=\"(max-width: 314px) 100vw, 314px\" \/><\/figure>\n<\/div>\n\n\n<p>La fonctionnalit\u00e9 Bouton est toujours constitu\u00e9e d\u2019un texte (limit\u00e9 \u00e0 640 charact\u00e8res) et d\u2019un maximum de trois boutons.<\/p>\n\n\n\n<p>Pour param\u00e9trer un bouton, cliquez sur \u00ab\u00a0<strong>+ Ajouter un bouton<\/strong>\u00ab\u00a0.<br><br>Vous pourrez alors nommer le bouton (25 charact\u00e8res max).<br><br>Puis, vous aurez la possibilit\u00e9 de choisir le type d\u2019action que le chatbot effectuera quand l\u2019utilisateur clique le bouton.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">A. Redirection<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_01_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1571\"><\/figure>\n\n\n\n<p>Cela redirigera vos utilisateurs vers une autre s\u00e9quence.\u00a0<br>Voir l\u2019article : <a href=\"https:\/\/botnation.ai\/ajouter-une-redirection\/\">Ajouter une redirection<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">B. Internet<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_02_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1573\"><\/figure>\n\n\n\n<p>Votre chatbot bot redirigera vos utilisateur vers un site web.<\/p>\n\n\n\n<p><strong>Vous avez plusieurs options pour l\u2019ouverture du site :  <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nouvel onglet<\/li>\n\n\n\n<li>Onglet courant<\/li>\n\n\n\n<li>Petite popup<\/li>\n\n\n\n<li>Grande popup<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>ASTUCE<\/strong><br><em>Pensez \u00e0 bien mettre le http:\/\/ ou https:\/\/ devant l\u2019adresse sinon cela ne marchera pas.\u00a0<\/em><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">C. Appel t\u00e9l\u00e9phonique<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_03_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1575\"><\/figure>\n\n\n\n<p>Vos utilisateurs pourront t\u00e9l\u00e9phoner directement dans le bouton. C\u2019est \u00e0 dire que si une application d\u2019appel t\u00e9l\u00e9phonique est disponible, celle-ci lancera automatiquement l\u2019appel.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>ASTUCE<\/strong><br><em>Pensez \u00e0 mettre l\u2019indicatif du pays devant le num\u00e9ro. Exemple pour la France +33 donc le num\u00e9ro sera +33162635447 et pas 0162635447.\u00a0<\/em><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">D. E-mail<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_04_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1578\"><\/figure>\n\n\n\n<p>Vos utilisateurs pourront initier un e-mail directement dans le bouton. C\u2019est \u00e0 dire que si une application d\u2019emailing est disponible, celle-ci cr\u00e9era un nouvel e-mail avec pour destinataire l\u2019e-mail configur\u00e9 dans le bouton.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">E. Entr\u00e9e utilisateur<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_05_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1580\"><\/figure>\n\n\n\n<p>Cette action permet au chatbot d\u2019enregistrer une valeur pour une variable donn\u00e9e lorsque l\u2019utilisateur clique le bouton.<br>C\u2019est tr\u00e8s pratique pour garder en m\u00e9moire les choix de vos utilisateurs.<br>Voir l\u2019article suivant : <a href=\"https:\/\/botnation.ai\/tout-savoir-sur-les-variables\/\">Tout savoir sur les variables {{\u2026}}<\/a><br><br><strong>Les param\u00e8tres de cette action sont :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nom de la variable<\/li>\n\n\n\n<li>Valeur de la variable<\/li>\n\n\n\n<li>S\u00e9quence de redirection<\/li>\n<\/ul>\n\n\n\n<p>Voir l\u2019article : <a href=\"https:\/\/botnation.ai\/entree-utilisateur\/\">Entr\u00e9e Utilisateur<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">F. Stripe<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_06_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1584\"><\/figure>\n\n\n\n<p>Vous pouvez facturer des biens digitaux (contenu, formation en ligne, ticketing,etc..) ou physiques en utilisant votre compte Stripe reli\u00e9 nativement \u00e0 votre chatbot Botnation.<br><br>Lorsque vous aurez configur\u00e9 le plugin Stripe dans les param\u00e8tres du chatbot vous aurez la possibilit\u00e9 de <strong>param\u00e9trer un bouton d\u2019achat Stripe<\/strong>.<\/p>\n\n\n\n<p><strong>Pour le param\u00e9trer, il y a plusieurs champs \u00e0 renseigner :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Le nom du produit \u00e0 vendre<\/li>\n\n\n\n<li>Le prix du produit<\/li>\n\n\n\n<li>La devise du produit<\/li>\n\n\n\n<li>La s\u00e9quence de redirection en cas d\u2019achat r\u00e9ussi<\/li>\n\n\n\n<li>La s\u00e9quence de redirection en cas d\u2019\u00e9chec lors de l\u2019achat<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">G. GPS<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_07_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1586\"><\/figure>\n\n\n\n<p>Au clic du bouton, une fen\u00eatre popup s\u2019ouvrira avec un plan et l\u2019utilisateur pourra choisir sa localisation et la valider.<br><br><strong>Les param\u00e8tres de cette action sont :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Couleur des boutons<\/li>\n\n\n\n<li>S\u00e9quence de redirection apr\u00e8s validation<\/li>\n\n\n\n<li>Type de popup : petite, grande ou plein \u00e9cran<\/li>\n<\/ul>\n\n\n\n<p><strong>Les variables suivantes seront ainsi mise \u00e0 jour avec les coordonn\u00e9es de l\u2019utilisateur :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>{{GPS_CITY}} : la ville<\/li>\n\n\n\n<li>{{GPS_COUNTRY}} : le pays<\/li>\n\n\n\n<li>{{GPS_ADDRESS}} : l\u2019adresse<\/li>\n\n\n\n<li>{{GPS_REGION}} : la r\u00e9gion<\/li>\n\n\n\n<li>{{GPS_LAT}} : la latitude<\/li>\n\n\n\n<li>{{GPS_LONG}} : la longitude<\/li>\n<\/ul>\n\n\n\n<p>Voir l\u2019article : <a href=\"https:\/\/botnation.ai\/fonctionnalite-gps-chatbot-web\/\">Fonctionnalit\u00e9 GPS (Chatbot Web)<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">H. Liste de choix<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_08_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1589\"><\/figure>\n\n\n\n<p>Au clic du bouton, une fen\u00eatre popup s\u2019ouvrira et affichera les diff\u00e9rents choix sous forme de boutons.<\/p>\n\n\n\n<p>Il n\u2019y a pas de limite au nombre de choix ni du nombre de charact\u00e8re des choix.<br>Cela peut \u00eatre utile pour afficher une grande liste de pays ou une liste de questions pour une FAQ.<br><br>Les choix s\u2019affichent les uns au dessous des autres.<\/p>\n\n\n\n<p><strong>Les param\u00e8tres de cette action sont :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Texte qui s\u2019affiche au dessus de la liste<\/li>\n\n\n\n<li>Couleur des boutons<\/li>\n\n\n\n<li>Nom de la variables<\/li>\n\n\n\n<li>Liste des choix (par d\u00e9faut la variable prendra le nom du choix comme valeur)<\/li>\n\n\n\n<li>Possibilit\u00e9 de saisir des valeurs diff\u00e9rentes du nom du choix<\/li>\n\n\n\n<li>S\u00e9quence de redirection<\/li>\n\n\n\n<li>Type de popup : petite, grande ou plein \u00e9cran<\/li>\n<\/ul>\n\n\n\n<p>Voir l\u2019article : <a href=\"https:\/\/botnation.ai\/la-liste-de-choix-chatbot-web\/\">La liste de choix (Chatbot Web)<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">I. Date et Heure<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_09_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1592\"><\/figure>\n\n\n\n<p>Au clic du bouton, une fen\u00eatre popup s\u2019ouvrira et affichera un calendrier et\/ou une horloge qui permettront \u00e0 l\u2019utilisateur de choisir une date et\/ou un horaire.<\/p>\n\n\n\n<p>Les donn\u00e9es seront enregistr\u00e9es dans le format choisi dans la variable {{CALENDAR_CUSTOM_FORMAT}}<\/p>\n\n\n\n<p><strong>Les param\u00e8tres de cette action sont :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Texte qui s\u2019affiche en titre de la popup<\/li>\n\n\n\n<li>Couleur des boutons<\/li>\n\n\n\n<li>Possibilit\u00e9 de demander la date et\/ou l\u2019heure<\/li>\n\n\n\n<li>Possibilit\u00e9 de d\u00e9terminer une Date\/Heure minimum<\/li>\n\n\n\n<li>Possibilit\u00e9 de d\u00e9terminer une Date\/Heure maximum<\/li>\n\n\n\n<li>Possibilit\u00e9 de choisir une Date\/Heure par d\u00e9faut<\/li>\n\n\n\n<li>Choix des paliers pour l\u2019heure : libre, 5, 15 ou 30 minutes<\/li>\n\n\n\n<li>Personnalisation du format de la date\/Heure<\/li>\n\n\n\n<li>S\u00e9quence de redirection<\/li>\n\n\n\n<li>Type de popup : petite, grande ou plein \u00e9cran<\/li>\n<\/ul>\n\n\n\n<p>Voir l\u2019article : <a href=\"https:\/\/botnation.ai\/capturer-une-date\/\">Capturer une date<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">J. Choix multiple<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2022\/10\/B_W_10_FR-1024x604.png.webp\" alt=\"\" class=\"wp-image-1594\"><\/figure>\n\n\n\n<p>Au clic du bouton, une fen\u00eatre popup s\u2019ouvrira et affichera les diff\u00e9rents choix \u00e0 cocher ainsi qu\u2019un bouton de Validation.<\/p>\n\n\n\n<p>Il n\u2019y a pas de limite au nombre de choix ni du nombre de charact\u00e8re des choix.<\/p>\n\n\n\n<p>Chaque choix est associ\u00e9 \u00e0 une variable diff\u00e9rente qui prendra la valeur 1 s\u2019il est coch\u00e9 ou 0 s\u2019il ne l\u2019est pas.<\/p>\n\n\n\n<p><strong>Les param\u00e8tres de cette action sont :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Texte qui s\u2019affiche en titre de la popup<\/li>\n\n\n\n<li>Couleur des boutons<\/li>\n\n\n\n<li>Nombre minimum de choix que l\u2019utilisateur aura \u00e0 faire<\/li>\n\n\n\n<li>Nombre maximum de choix que l\u2019utilisateur aura \u00e0 faire<\/li>\n\n\n\n<li>Les choix et leurs variables<\/li>\n\n\n\n<li>S\u00e9quence de redirection<\/li>\n\n\n\n<li>Type de popup : petite, grande ou plein \u00e9cran<\/li>\n<\/ul>\n\n\n\n<p>Voir l\u2019article : <a href=\"https:\/\/botnation.ai\/la-liste-de-choix-multiple-chatbot-web\/\">La liste de choix multiple (Chatbot Web)<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Options<\/h2>\n\n\n\n\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"categorie-support":[183,185,171],"class_list":["post-1561","support","type-support","status-publish","hentry","categorie-support-chatbot-web","categorie-support-fonctionnalites","categorie-support-variables"],"acf":[],"_links":{"self":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/support\/1561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/support"}],"about":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/types\/support"}],"wp:attachment":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/media?parent=1561"}],"wp:term":[{"taxonomy":"categorie-support","embeddable":true,"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/categorie-support?post=1561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}