{"id":3010,"date":"2023-01-23T16:56:36","date_gmt":"2023-01-23T15:56:36","guid":{"rendered":"https:\/\/botnation.ai\/?p=3010"},"modified":"2026-01-02T16:34:04","modified_gmt":"2026-01-02T15:34:04","slug":"votre-chatbot-en-plein-ecran-chatbot-web","status":"publish","type":"support","link":"https:\/\/botnation.ai\/fr\/support\/votre-chatbot-en-plein-ecran-chatbot-web\/","title":{"rendered":"Votre Chatbot en Plein \u00c9cran (Chatbot Web)"},"content":{"rendered":"<p>Int\u00e9grer son chatbot en plein \u00e9cran sur une page<\/p>\n\n\n\n\n\n<p>Les applications de messagerie poss\u00e8dent aujourd\u2019hui plus d\u2019utilisateurs uniques que le r\u00e9seaux-sociaux. <strong>Vos utilisateurs sont donc habitu\u00e9s \u00e0 utiliser quotidiennement une interface conversationnelle<\/strong> comme Facebook Messenger, Whatsapp, etc\u2026<\/p>\n\n\n\n<p>Si vos utilisateurs les appr\u00e9cient autant il est alors peut \u00eatre temps de donner un coup de jeune \u00e0 votre site web en le basculant \u00e9galement sur ce type d\u2019interface. <strong>Le mode \u00ab\u00a0plein \u00e9cran\u00a0\u00bb (fullscreen) est \u00e0 pr\u00e9sent disponible sur <a href=\"https:\/\/botnation.ai\/fr\" rel=\"noreferrer noopener\" target=\"_blank\">Botnation<\/a> pour les chatbots web !<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2023\/01\/image-216.png.webp\" alt=\"\" class=\"wp-image-6926\"><\/figure>\n\n\n\n<p><em>Le site web \u00ab\u00a0<a href=\"https:\/\/agence-chatbot.fr\/\" rel=\"noreferrer noopener\" target=\"_blank\">Agence Chatbot<\/a>\u00a0\u00bb utilise un chatbot plein \u00e9cran pour collecter des informations sur les projets de ses prospects.<\/em><\/p>\n\n\n\n<p><br>Vos prospects ou clients ne visiteront plus votre site comme on consulte un annuaire mais \u00e9changeront avec lui au travers d\u2019une discussion. Ainsi votre site n\u2019est plus un simple formulaire, un m\u00e9dia ou une boutique mais devient une v\u00e9ritable messagerie instantan\u00e9e qui collecte, diffuse ou vend. <strong>La conversation est alors au centre de l\u2019exp\u00e9rience utilisateur<\/strong>.<br><br>Sur <strong>Botnation<\/strong>, dans les param\u00e8tres de votre <strong>Chatbot Web<\/strong>, sur l\u2019onglet \u00ab\u00a0<strong>Apparence<\/strong>\u00a0\u00bb et \u00ab\u00a0Fen\u00eatre de discussion\u00a0\u00bb il vous suffit d\u2019activer le \u00ab\u00a0<strong>Mode plein \u00e9cran<\/strong>\u00ab\u00a0.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2023\/01\/image-217-1024x402.png.webp\" alt=\"\" class=\"wp-image-6929\"><\/figure>\n\n\n\n<p><br>Il vous sera \u00e9galement possible de communiquer une \u00ab\u00a0<strong>image de fond d\u2019\u00e9cran<\/strong>\u00a0\u00bb \u00e0 diffuser en arri\u00e8re plan de votre chatbot. Cela vous \u00e9vitera de devoir le g\u00e9rer au niveau de votre site et remplacera la couleur de fond param\u00e9tr\u00e9e lorsque la d\u00e9finition du p\u00e9riph\u00e9rique de l\u2019utilisateur le permet. Nous recommandons d\u2019utiliser une image haute d\u00e9finition, dimensions : 1980\u00d71080.<\/p>\n\n\n\n<p>Attention toutefois, cette image n\u2019appara\u00eetra pas sur mobile.<\/p>\n\n\n\n<p>N\u2019oubliez pas \u00a0\u00e9galement de <a href=\"https:\/\/botnation.ai\/comment-personnaliser-mon-chatbot-web\/\">personnaliser l\u2019avatar de votre chatbot<\/a>.<br>\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2023\/01\/image-220.png.webp\" alt=\"\" class=\"wp-image-6935\"><\/figure>\n\n\n\n<p>Il vous suffira alors de copier\/coller <a href=\"https:\/\/botnation.ai\/comment-installer-mon-chatbot-sur-mon-site-web\/\">le petit code javascript<\/a> \u00e0 installer sur la page concern\u00e9e de votre site web, et voil\u00e0 !\u00a0<\/p>\n\n\n\n<p><strong>Votre chatbot en plein \u00e9cran sera totalement \u00ab\u00a0responsive\u00a0\u00bb<\/strong> aussi bien sur ordinateur \u00ab\u00a0desktop\u00a0\u00bb que sur mobile \u00a0\u00ab\u00a0smartphone\u00a0\u00bb.<\/p>\n\n\n\n<p>Nous vous recommandons de bien indiquer la balise \u00ab\u00a0viewport\u00a0\u00bb \u00a0dans l\u2019ent\u00eate (header) HTML des pages concern\u00e9es de votre site afin que le chatbot ai bien l\u2019instruction de s\u2019adapter.<\/p>\n\n\n\n<p>Exemple :<br><em>&lt;head&gt;<\/em><br><em>&lt;meta name=\u00a0\u00bbviewport\u00a0\u00bb content=\u00a0\u00bbwidth=device-width, initial-scale=1.0\u2033&gt;<\/em><br><em>&lt;\/head&gt;<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2023\/01\/image-219.png.webp\" alt=\"\" class=\"wp-image-6933\"><\/figure>\n\n\n\n<p><br><strong>Votre chatbot devient alors totalement immersif<\/strong> et l\u2019utilisateur particuli\u00e8rement actif. En plus des boutons de choix, images et vid\u00e9os, les chatbots web supportent plusieurs options de <a href=\"https:\/\/botnation.ai\/mettre-du-texte-en-couleur-en-gras-italique-ou-souligne\/\">formatage des textes<\/a> pour les mettre en<strong> gras<\/strong>, <em>italique<\/em>, les colorer etc\u2026\u00a0<\/p>\n\n\n\n<p><br><strong>Voici une vid\u00e9o expliquant le processus de A \u00e0 Z\u00a0<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Cr\u00e9er un chatbot plein \u00e9cran sur mon site web\" width=\"780\" height=\"439\" src=\"https:\/\/www.youtube.com\/embed\/In2a97EB_vY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Vous pouvez \u00e9galement consulter les sites web <a href=\"https:\/\/agence-chatbot.fr\/\" rel=\"noreferrer noopener\" target=\"_blank\">Agence-Chatbot<\/a> qui utilise des chatbots plein \u00e9cran pour obtenir des exemples de r\u00e9alisation.<br>\u00a0<br>N\u2019h\u00e9sitez pas \u00e0 revenir vers l\u2019\u00e9quipe de <a href=\"https:\/\/botnation.ai\/fr\" rel=\"noreferrer noopener\" target=\"_blank\">Botnation<\/a> pour tout renseignement compl\u00e9mentaire ou suggestion, nous serons heureux de vous accompagner dans la mise en place de votre chatbot.<\/p>\n\n\n\n<p><strong>En plus :<\/strong><br>\u2013 <a href=\"https:\/\/botnation.ai\/comment-installer-mon-chatbot-sur-mon-site-web\/\">Installer mon Chatbot sur mon site web<\/a><br>\u2013 <a href=\"https:\/\/botnation.ai\/comment-personnaliser-mon-chatbot-web\/\">Personnaliser mon Chatbot Web<\/a><\/p>\n\n\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"categorie-support":[183,185,189],"class_list":["post-3010","support","type-support","status-publish","hentry","categorie-support-chatbot-web","categorie-support-fonctionnalites","categorie-support-tutoriels"],"acf":[],"_links":{"self":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/support\/3010","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=3010"}],"wp:term":[{"taxonomy":"categorie-support","embeddable":true,"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/categorie-support?post=3010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}