CINXE.COM
Install ChatBot using Chat Widget
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Install ChatBot using Chat Widget</title> <meta name="description" content="Learn how to install a chatbot on your website."> <link rel="canonical" href="https://www.chatbot.com/help/install-chatbot/widget-installation/"> <script type="application/ld+json"> { "@context": "https://schema.org", "@graph": [{"@context":"https://schema.org","@type":"Organization","address":[{"@type":"PostalAddress","addressCountry":"US","addressLocality":"Boston","addressRegion":"Massachusetts","postalCode":"02110","streetAddress":"101 Arch Street, 8th Floor"},{"@type":"PostalAddress","addressCountry":"PL","addressLocality":"Wrocław","addressRegion":"dolnośląskie","postalCode":"53-033","streetAddress":"Zwycięska 47"}],"brand":"ChatBot","contactPoint":{"@type":"ContactPoint","areaServed":"Worldwide","availableLanguage":"English","contactType":"Customer Support"},"name":"Text, Inc.","sameAs":["https://www.facebook.com/livechat","https://www.instagram.com/livechat/","https://www.linkedin.com/company/livechat/","https://www.pinterest.com/livechat/","https://x.com/TextPlatform","https://www.wikidata.org/wiki/Q6658155","https://en.wikipedia.org/wiki/Text_(company)","https://www.youtube.com/@text_official"],"subOrganization":{"name":"ChatBot","sameAs":["https://www.facebook.com/chatbotcom","https://www.linkedin.com/showcase/chatbotcom/","https://www.producthunt.com/posts/chatbot-2","https://twitter.com/ChatBotCom","https://www.wikidata.org/wiki/Q113127602","https://en.wikipedia.org/wiki/ChatBot","https://www.youtube.com/@chatbotcom"],"url":"https://www.chatbot.com"},"url":"https://www.chatbot.com/"}] } </script> <link rel="icon" href="/favicon.ico"> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Install ChatBot using Chat Widget" /> <meta property="og:description" content="Learn how to install a chatbot on your website." /> <meta property="og:url" content="https://www.chatbot.com/help/install-chatbot/widget-installation/" /> <meta property="og:site_name" content="ChatBot" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="Learn how to install a chatbot on your website." /> <meta name="twitter:title" content="Install ChatBot using Chat Widget" /> <meta name="twitter:site" content="@Chatbotcom" /> <script src="https://cdn.livechatinc.com/partners/tracking/track.js" async></script> <script> scrollOffsetFunction = function() { var navElements = document.getElementsByClassName("c-navbar"); var offset = 0; if (typeof navElements[0] !== "undefined") { var navRect = navElements[0].getBoundingClientRect(); var navStyle = getComputedStyle(navElements[0]); if (navStyle.position === "sticky" || navStyle.position === "fixed") { offset += navRect.bottom - navRect.top + 30; } } let toc = document.getElementById("hc-toc-heading"); let viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); if (toc && viewportWidth < 992) { let tocRect = toc.getBoundingClientRect(); offset += tocRect.bottom - tocRect.top + 30; } return offset; } </script> <script> dataLayer = [{ 'contentAuthor': 'Sylwia Kocur', 'contentTTR': 9 , 'contentCategory': '🔌 Connect your chatbot', 'contentSubcategory': 'Install ChatBot', 'contentDate': '2024-09-30' }]; </script> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NQCSXSR');</script> <link rel="preload" as="style" href="/dist/css/main.c27902b1e794c8227e23bde554511512a9aab1d65e6b82063e2d173be1649ce9.css"> <link rel="stylesheet" href="/dist/css/main.c27902b1e794c8227e23bde554511512a9aab1d65e6b82063e2d173be1649ce9.css"> </head> <body class=""><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NQCSXSR" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <div class="c-navbar v--set-on-mobile u-border-b u-border-gray-900" data-controller="show mobile-search" id="main-header"> <div class="c-navbar__content"> <div class="u-basis-9 lg:u-basis-3 xl:u-basis-4 u-flex u-items-center u-justify-start"> <a href="/" class="c-navbar__logo"> <img src="/chatbot-logo.svg" alt="ChatBot logo" width="90" class="u-block u-m-0"> </a><a href="/help/" class="sm:u-hidden u-ml-sm u-pl-sm u-text-p8-bold u-text-black v--no-underline u-border-l u-border-gray-700">Help</a> <a href="/help/" class="u-hidden sm:u-inline u-ml-md u-pl-md u-text-p7-bold u-text-black v--no-underline u-border-l u-border-gray-700" style="white-space: nowrap;">Help Center</a></div><form action="/help/search/" method="GET" class="lg:u-basis-4 lg:u-block c-search c-navbar__search c-compact-form v--overlay" data-controller="algolia-search" autocomplete="off" data-app-id="QWAPZX0OJM" data-search-key="2062a0be5e3f72c03387888d0dcb8830" data-search-index="chatbot-help"> <div class="u-maxw-5 u-mx-auto lg:u-flex u-flex-col sm:u-flex-row"> <input type="search" name="query" class="u-mb-xs sm:u-mb-0 c-compact-form__input c-navbar__search__input" placeholder="Search the Help Center" required="required" data-target="algolia-search.search mobile-search.input"> <button type="submit" class="c-btn v--primary c-compact-form__button c-search-button u-hidden lg:u-inline-block" title="Search" data-target="algolia-search.submit"></button> </div> <div data-target="algolia-search.results" class="c-search__results c-search__results--absolute v--independent u-shadow-lg"></div> </form> <script id="search-results-item" type="template"> <a href="{{ relpermalink }}" class="c-search__result u-px-xl u-py-sm u-text-left v--no-underline"> <h2 class="c-link u-text-p6-bold"> {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}} </h2> <p class="u-text-black">{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p> <ul class="c-list u-pl-0 u-text-left"> <li class="u-inline-block u-text-p8-bold u-mr-md u-inline-flex u-items-center"> <span class="u-text-gray-600 u-mr-md">Help Center</span> <svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 15 48" class="u-inline-block"> <g fill="#1B1B20"> <path d="M13.75 23.698L-1.06 8.887 0 7.827l15.872 15.871L0 39.57l-1.06-1.06z"/> </g> </svg> </li> {{#main_cat}} <li class="u-inline-block u-text-p8-bold u-mr-md u-inline-flex u-items-center"> <span class="u-text-gray-600 u-mr-md">{{ main_cat }}</span> <svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 15 48" class="u-inline-block"> <g fill="#1B1B20"> <path d="M13.75 23.698L-1.06 8.887 0 7.827l15.872 15.871L0 39.57l-1.06-1.06z"/> </g> </svg> </li> {{/main_cat}} </ul> </a> </script> <script id="search-results-empty" type="template"> <span class="c-search__result u-text-center">No results</span> </script> <button class="c-navbar__button" aria-expanded="false" data-action="show#toggle" data-target="mobile-search.close"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17 16" width="20" class=""> <g fill="none" stroke="#1b1b20" stroke-linecap="square"> <path d="M1 3.5h15" class="c-navbar__button__bar"/> <path d="M1 8h15" class="c-navbar__button__bar"/> <path d="M1 12.5h15" class="c-navbar__button__bar"/> </g> </svg> </button> <div class="c-navbar__menu" hidden="hidden" data-target="show.content"> <div class="c-navbar__mobile-actions"> <a href="https://accounts.livechat.com/signin?client_id=92418ea187dd3c572383cbf56f015b6c&response_type=token&redirect_uri=https%3A%2F%2Fapp.chatbot.com%2Fstories" class="c-btn v--secondary v--sm" data-controller="track utm-tracking" data-target="utm-tracking.element" data-track-category="Log In Button" data-track-action="Top Nav Help Center" data-track-label="Redirect to Accounts" data-action="track#send">Log in</a> <a href="https://accounts.livechat.com/signup?client_id=92418ea187dd3c572383cbf56f015b6c&response_type=token&redirect_uri=https%3A%2F%2Fapp.chatbot.com%2Fstories?source_id=mobile_menu&source_url=https%3a%2f%2fwww.chatbot.com%2fhelp%2finstall-chatbot%2fwidget-installation%2f&source_type=website" class="c-btn v--signup v--sm" data-controller="track utm-tracking" data-target="utm-tracking.element" data-track-category="Sign Up Button" data-track-action="Top Nav Help Center" data-track-label="Redirect to Accounts" data-action="track#send">Sign up free</a> </div> </div> <div class="c-navbar__actions u-basis-4 u-items-center u-justify-end"> <a href="https://accounts.livechat.com/signin?client_id=92418ea187dd3c572383cbf56f015b6c&response_type=token&redirect_uri=https%3A%2F%2Fapp.chatbot.com%2Fstories" class="c-btn v--secondary v--sm" data-controller="track utm-tracking" data-target="utm-tracking.element" data-track-category="Log In Button" data-track-action="Top Nav Help Center" data-track-label="Redirect to Accounts" data-action="track#send">Log in</a> <a href="https://accounts.livechat.com/signup?client_id=92418ea187dd3c572383cbf56f015b6c&response_type=token&redirect_uri=https%3A%2F%2Fapp.chatbot.com%2Fstories?source_id=header_cta&source_url=https%3a%2f%2fwww.chatbot.com%2fhelp%2finstall-chatbot%2fwidget-installation%2f&source_type=website" class="c-btn v--signup v--sm" data-controller="track utm-tracking" data-target="utm-tracking.element" data-track-category="Signup" data-track-action="Signup Redirect" data-track-label="Sign up free - Top Nav" data-action="track#send">Sign up free</a> </div> </div> </div> <ul class="c-navbar__list u-hidden lg:u-flex u-justify-center u-flex-wrap u-maxw-14 u-mx-auto u-py-md u-border-b u-border-gray-900 u-Mb-lg"><li class="c-navbar__item"> <a href="/help/get-started/" class="c-navbar__link v--has-dropdown">🚀 Get started</a><ul class="c-navbar__sublist"><li><a href="/help/get-started/#overview" class="c-navbar__sublink">Overview</a></li><li><a href="/help/get-started/#stories" class="c-navbar__sublink">Stories</a></li><li><a href="/help/get-started/#templates" class="c-navbar__sublink">Templates</a></li><li><a href="/help/get-started/#artificial-intelligence" class="c-navbar__sublink">Artificial intelligence</a></li></ul></li><li class="c-navbar__item"> <a href="/help/build-your-chatbot/" class="c-navbar__link v--has-dropdown">⚒️ Build your chatbot</a><ul class="c-navbar__sublist"><li><a href="/help/build-your-chatbot/#build-your-chatbot" class="c-navbar__sublink">Build your chatbot</a></li><li><a href="/help/build-your-chatbot/#bot-responses" class="c-navbar__sublink">Bot responses</a></li><li><a href="/help/build-your-chatbot/#interactions" class="c-navbar__sublink">Interactions</a></li><li><a href="/help/build-your-chatbot/#actions" class="c-navbar__sublink">Actions</a></li><li><a href="/help/build-your-chatbot/#attributes" class="c-navbar__sublink">Attributes</a></li><li><a href="/help/build-your-chatbot/#system-entities" class="c-navbar__sublink">System entities</a></li><li><a href="/help/build-your-chatbot/#user-entities" class="c-navbar__sublink">User entities</a></li><li><a href="/help/build-your-chatbot/#moments" class="c-navbar__sublink">Moments</a></li></ul></li><li class="c-navbar__item"> <a href="/help/connect-your-chatbot/" class="c-navbar__link v--has-dropdown">🔌 Connect your chatbot</a><ul class="c-navbar__sublist"><li><a href="/help/connect-your-chatbot/#install-chatbot" class="c-navbar__sublink">Install ChatBot</a></li><li><a href="/help/connect-your-chatbot/#chat-widget" class="c-navbar__sublink">Chat Widget</a></li><li><a href="/help/connect-your-chatbot/#integrations" class="c-navbar__sublink">Integrations</a></li><li><a href="/help/connect-your-chatbot/#livechat-integration" class="c-navbar__sublink">LiveChat integration</a></li><li><a href="/help/connect-your-chatbot/#shopify-integration" class="c-navbar__sublink">Shopify integration</a></li></ul></li><li class="c-navbar__item"> <a href="/help/manage-data/" class="c-navbar__link v--has-dropdown">📈 Manage data</a><ul class="c-navbar__sublist"><li><a href="/help/manage-data/#users" class="c-navbar__sublink">Users</a></li><li><a href="/help/manage-data/#reports" class="c-navbar__sublink">Reports</a></li><li><a href="/help/manage-data/#train-your-chatbot" class="c-navbar__sublink">Training section</a></li></ul></li><li class="c-navbar__item"> <a href="/help/manage-your-account/" class="c-navbar__link v--has-dropdown">🔑 Manage your account</a><ul class="c-navbar__sublist"><li><a href="/help/manage-your-account/#settings" class="c-navbar__sublink">Settings</a></li><li><a href="/help/manage-your-account/#teams" class="c-navbar__sublink">Team</a></li><li><a href="/help/manage-your-account/#subscription" class="c-navbar__sublink">Subscription</a></li></ul></li><li class="c-navbar__item"> <a href="/help/advanced-use/" class="c-navbar__link v--has-dropdown">⚙️ Advanced use</a><ul class="c-navbar__sublist"><li><a href="/help/advanced-use/#webhooks" class="c-navbar__sublink">Webhooks</a></li></ul></li></ul> <div class="o-container"> <div class="u-flex u-justify-between u-Mt-xs u-Mb-md"><ul class="u-hidden sm:u-block c-list u-pl-0"> <li class="u-inline-block u-text-p8-bold u-mr-md u-inline-flex u-items-center"> <a href="/help/" class="u-text-gray-600 u-mr-md">Help Center</a> <svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 15 48" class="u-inline-block"> <g fill="#1B1B20"> <path d="M13.75 23.698L-1.06 8.887 0 7.827l15.872 15.871L0 39.57l-1.06-1.06z"/> </g> </svg> </li><li class="u-inline-block u-text-p8-bold u-mr-md u-inline-flex u-items-center"> <a href="/help/connect-your-chatbot/" class="u-text-gray-600 u-mr-md">🔌 Connect your chatbot</a><svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 15 48" class="u-inline-block"> <g fill="#1B1B20"> <path d="M13.75 23.698L-1.06 8.887 0 7.827l15.872 15.871L0 39.57l-1.06-1.06z"/> </g> </svg></li><li class="u-inline-block u-text-p8-bold u-mr-md"> <a href="/help/connect-your-chatbot/#install-chatbot" class="u-text-black">Install ChatBot</a> </li></ul><div class="sm:u-hidden u-pl-0"> <a href="/help/connect-your-chatbot/#install-chatbot" class="u-text-p7 u-text-primary">« Install ChatBot</a> </div><div class="c-share u-inline-block" tabindex="-1" data-target="helpcenter-hero"> <svg class="c-share__trigger" xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20"> <g fill="none" fill-rule="evenodd"> <path fill="#1b1b20" fill-rule="nonzero" d="M15.3 13.5c-.8 0-1.57.3-2.16.83L6.89 10.7a3.15 3.15 0 0 0 0-1.38l6.25-3.65a3.25 3.25 0 1 0-1.02-1.72L5.87 7.6a3.25 3.25 0 1 0 0 4.83l6.25 3.64a3.25 3.25 0 1 0 3.17-2.56z"/> </g> </svg> <div class="c-share__buttons-wrapper"> <div class="c-share__buttons u-shadow-lg u-text-left"> <p class="u-text-p8 u-px-lg">Share this article on:</p> <button class="c-share__button" data-title="Install ChatBot using Chat Widget" data-sharer="facebook" data-url="https://www.chatbot.com/help/install-chatbot/widget-installation/" title="Share on Facebook"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="#1B1B20" fill-rule="evenodd" d="M15.12 0H.88A.88.88 0 0 0 0 .88v14.24c0 .49.4.88.88.88h7.67V9.81H6.47V7.4h2.08V5.61c0-2.07 1.26-3.2 3.1-3.2a17.71 17.71 0 0 1 1.87.1v2.16h-1.27c-1 0-1.2.47-1.2 1.18v1.54h2.4l-.31 2.42h-2.1V16h4.08a.88.88 0 0 0 .88-.88V.88a.88.88 0 0 0-.88-.88z"/> </svg> <span>Facebook</span> </button> <button class="c-share__button" data-sharer="twitter" data-title="Install ChatBot using Chat Widget" data-url="https://www.chatbot.com/help/install-chatbot/widget-installation/"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <g fill="none" fill-rule="evenodd"> <path d="M5.03 15.01c6.03 0 9.34-5 9.34-9.34v-.42A6.69 6.69 0 0 0 16 3.55a6.65 6.65 0 0 1-1.89.51 3.3 3.3 0 0 0 1.45-1.82 6.53 6.53 0 0 1-2.09.8A3.28 3.28 0 0 0 11.07 2 3.29 3.29 0 0 0 7.8 5.29c0 .25.03.5.09.74A9.32 9.32 0 0 1 1.1 2.6 3.3 3.3 0 0 0 2.13 7a3.32 3.32 0 0 1-1.49-.41v.04a3.29 3.29 0 0 0 2.63 3.22 3.2 3.2 0 0 1-.86.12c-.21 0-.42-.02-.62-.06a3.28 3.28 0 0 0 3.07 2.28 6.58 6.58 0 0 1-4.08 1.4c-.26 0-.52 0-.78-.04a9.34 9.34 0 0 0 5.03 1.47" fill="#1B1B20"/> </g> </svg> <span>Twitter</span> </button> <button class="c-share__button" data-sharer="linkedin" data-title="Install ChatBot using Chat Widget" data-url="https://www.chatbot.com/help/install-chatbot/widget-installation/"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="#1B1B20" fill-rule="evenodd" d="M13.63 13.63h-2.37V9.92c0-.89-.01-2.02-1.23-2.02-1.24 0-1.42.96-1.42 1.96v3.77H6.24V6H8.5v1.04h.03a2.5 2.5 0 0 1 2.25-1.23c2.4 0 2.84 1.58 2.84 3.64v4.18zM3.56 4.96a1.38 1.38 0 1 1 0-2.76 1.38 1.38 0 0 1 0 2.76zm-1.2 8.67h2.39V6H2.37v7.63zM14.83 0H1.18C.53 0 0 .52 0 1.15v13.7C0 15.48.53 16 1.18 16h13.64c.65 0 1.18-.52 1.18-1.16V1.16C16 .52 15.47 0 14.82 0z"/> </svg> <span>LinkedIn</span> </button> <button class="c-share__button" data-sharer="email" data-title="Install ChatBot using Chat Widget" data-url="https://www.chatbot.com/help/install-chatbot/widget-installation/" data-to=""> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <g fill="none" fill-rule="evenodd"> <path d="M0 1.7v1.06l1.6.98L8 7.65l6.4-3.89L16 2.8V1.7H0zm0 2.9v9.6h16V4.63l-8 4.8L0 4.6z" fill="#1B1B20"/> </g> </svg> <span>Mail</span> </button> <div class="u-pt-md u-border-t c-copy-button" data-controller="copy-button"> <a href="#" class="c-share__button u-pl-xl u-text-black v--no-underline" data-action="click->copy-button#copy"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="#1B1B20" fill-rule="evenodd" d="M12.13 0c-1.02.05-2 .5-2.75 1.25L6.42 4.2c.47-.47 2.2-.15 2.61.27l1.8-1.8c.39-.39.88-.63 1.4-.65a1.63 1.63 0 0 1 1.26.48c.4.4.49.87.49 1.2 0 .52-.25 1.05-.67 1.47L10.2 8.3c-.78.78-1.98.85-2.67.16a1.02 1.02 0 0 0-1.44 0 1.02 1.02 0 0 0 0 1.44 3.66 3.66 0 0 0 2.61 1.07c1.04 0 2.1-.43 2.92-1.25l3.13-3.11c.8-.8 1.25-1.85 1.25-2.92a3.7 3.7 0 0 0-1.07-2.63A3.68 3.68 0 0 0 12.13 0zM7.3 5.02a4.2 4.2 0 0 0-2.94 1.25L1.25 9.38C.45 10.18 0 11.23 0 12.3c0 .99.38 1.93 1.07 2.63A3.68 3.68 0 0 0 3.87 16a4.18 4.18 0 0 0 2.75-1.25l2.96-2.96c-.47.47-2.2.15-2.61-.27l-1.8 1.8c-.39.39-.89.63-1.4.65a1.63 1.63 0 0 1-1.26-.48 1.65 1.65 0 0 1-.49-1.19c0-.53.25-1.06.67-1.48L5.8 7.7c.78-.78 1.98-.85 2.67-.16a1.02 1.02 0 0 0 1.44 0 1.02 1.02 0 0 0 0-1.44A3.66 3.66 0 0 0 7.3 5.02z"/> </svg> <span>Copy link</span> </a> <span class="c-copy-button__success u-text-p8" data-target="copy-button.success">Link copied to the clipboard</span> <textarea data-target="copy-button.text" readonly class="c-copy-button__textarea">https://www.chatbot.com/help/install-chatbot/widget-installation/</textarea> </div> </div> </div> </div> </div> </div> <div class="o-wrapper" > <article class="o-container u-Pb-lg" data-controller="sticky-aside"> <div class="lg:u-flex u-content-between u-flex-wrap u-Mb-md lg:u-mb-0 " data-target="sticky-aside.flex"> <div class="lg:u-basis-8 u-Pr-2xs"> <h1 class="u-Mb-sm u-text-p2" >Install ChatBot using Chat Widget</h1> <div class="u-flex u-flex-wrap u-Pb-xs md:u-Pb-lg"><div class="u-flex u-items-center u-basis-12 md:u-basis-auto u-mr-lg u-mb-xs md:u-mb-0"><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_48,h_48,c_fill/cms/sylwia-kocur.jpeg" srcset="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_96,h_96,c_fill/cms/sylwia-kocur.jpeg 2x" alt="Image of an author" class="u-w-fit u-mr-md u-ml-0 u-round" width="48"><div class="u-text-p7-bold">Sylwia Kocur</div> </div><div class="u-flex u-items-center u-flex-wrap u-text-p7" style="min-height: 48px;"> <div class="u-flex u-items-center u-mr-lg"> <img src="/icons/time.svg" class="u-w-fit u-mr-xs u-ml-0 u--mt-3xs" alt="" width="20"> <span>9 min read</span> </div> <div class="u-flex u-items-center"> <img src="/icons/update.svg" class="u-w-fit u-mr-xs u-ml-0 u--mt-3xs" alt="" width="20"> <span>updated: Sep 30, 2024</span> </div> </div> </div> </div><aside class="lg:u-basis-4 lg:u-pl-lg u-Mb-md md:u-m-0 c-toc" data-target="sticky-aside.aside" data-action="mouseover->sticky-aside#open mouseout->sticky-aside#close click->sticky-aside#toggle" > <div class="c-toc__wrapper lg:u-py-xl lg:u--my-xl u-bg-white u-border-gray-900" data-target="sticky-aside.wrapper" > <div class="xl:u-pr-xl"> <div class="c-toc__open u-text-p8-bold u-py-xs u-px-sm u-mr-lg u-bg-gray-900">« CONTENTS</div> <h3 class="u-text-p6-bold lg:u-pl-lg u-mb-0 u-text-gray-300 u-py-md c-toc__title u-border-t u-border-b u-border-gray-800" id="hc-toc-heading">CONTENTS</h3> <nav id="TableOfContents"> <ul> <li><a href="#how-to-enable-chat-widget-integration">How to enable Chat Widget integration</a></li> <li><a href="#general-section">General section</a> <ul> <li><a href="#configure-the-welcome-screen">Configure the Welcome screen</a></li> </ul> </li> <li><a href="#appearance-section">Appearance section</a></li> <li><a href="#position-section">Position section</a></li> <li><a href="#mobile-devices-section">Mobile devices section</a></li> <li><a href="#greetings-section">Greetings section</a></li> <li><a href="#publish-section">Publish section</a> <ul> <li><a href="#install-the-bot-on-your-site">Install the bot on your site</a></li> </ul> </li> <li><a href="#preview-your-chat-widget-section">Preview your Chat Widget section</a></li> <li><a href="#how-to-disable-chat-widget-on-your-site">How to disable Chat Widget on your site</a></li> <li><a href="#how-to-delete-chat-widget-from-your-site">How to delete Chat Widget from your site</a></li> </ul> </nav> </div> </div> </aside><div class="c-hc-article-content u-text-p6 c-hc-article-content--first c-toc__parent-content u-maxw-8 lg:u-basis-8" data-target="sticky-aside.content"> <p>With Chat Widget, you can easily install the chatbot widget on your website, <strong>adjust the <a href="https://www.chatbot.com/help/install-chatbot/widget-installation/#appearance-section" target="_blank">appearance of your chat window</a></strong> to match your website design, and <a href="https://www.chatbot.com/help/chat-widget/widget-greetings/" target="_blank">set greetings</a> to ensure a <strong>consistent brand experience</strong>.</p> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-blue-500 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/tip.svg" alt="" width="90" class="u-w-auto u-maxw-1 u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12"><p><strong>This article concerns our new ChatBot Chat Widget, released on September 30, 2024.</strong><br> If you already have a <a href="https://www.chatbot.com/help/install-chatbot/widget-legacy-installation/" target="_blank">bot installed with Chat Widget (legacy)</a> and want to switch to a new chat window version, remove the old code and <strong>paste the new code available in the Publish section</strong> after adjusting the new Chat Widget.</p> </div> <div class="md:u-hidden"><p><strong>This article concerns our new ChatBot Chat Widget, released on September 30, 2024.</strong><br> If you already have a <a href="https://www.chatbot.com/help/install-chatbot/widget-legacy-installation/" target="_blank">bot installed with Chat Widget (legacy)</a> and want to switch to a new chat window version, remove the old code and <strong>paste the new code available in the Publish section</strong> after adjusting the new Chat Widget.</p> </div> </div> <p>You can <strong>make all the necessary adjustments in one place</strong> to ensure every aspect of the chat window matches your brand. With Chat Widget, you can:</p> <ul><li> <p>change the chat window color and the window background. </p> </li><li> <p>adjust the window alignment and set greetings to increase engagement.</p> </li><li> <p>change the bot’s default name and add an avatar. </p> </li><li> <p>add the bot description and links you’d like to display in the chat window.</p> </li><li> <p>enable white label.</p> </li><li> <p>disable the text field to push using buttons during chat.</p> </li></ul> <h2 id="how-to-enable-chat-widget-integration">How to enable Chat Widget integration<a href="#how-to-enable-chat-widget-integration" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#how-to-enable-chat-widget-integration" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-yellow-300 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/attention.svg" alt="" width="90" class="u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12"><p><strong>Enabling Chat Widget will not automatically install the bot on your site.</strong> </p> <p>Go to the <a href="https://www.chatbot.com/help/install-chatbot/widget-installation/#publish-section" target="_blank"><strong>Publish section</strong></a> to install the bot on your site. For more information, watch our <a href="https://youtu.be/8o3jHhutcQM" target="_blank">video tutorial</a>.</p> </div> <div class="md:u-hidden"><p><strong>Enabling Chat Widget will not automatically install the bot on your site.</strong> </p> <p>Go to the <a href="https://www.chatbot.com/help/install-chatbot/widget-installation/#publish-section" target="_blank"><strong>Publish section</strong></a> to install the bot on your site. For more information, watch our <a href="https://youtu.be/8o3jHhutcQM" target="_blank">video tutorial</a>.</p> </div> </div> <p>To start the configuration, <strong>go to your bot and enter the Integrations panel.</strong> Then, choose <strong>Chat Widget</strong> from the list by clicking the <strong>Connect button</strong>.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-1-new.png" alt="">You will see a page where you can do all the adjustments. On the left side of the screen, you can see all the <strong>sections you can edit</strong> — <strong>General, Appearance, Position, Mobile devices, Greetings,</strong> and <strong>Publish.</strong> Below the menu, you can visit the <a href="https://www.chatbot.com/help/chat-widget/sample-page/"><strong>Preview page</strong></a>.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-2-spotlight.png" alt="">All changes made in the settings will be instantly reflected in the widget on the right side.</p> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-blue-500 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/tip.svg" alt="" width="90" class="u-w-auto u-maxw-1 u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12"><strong>Save all the changes</strong> made to Chat Widget. When you exit the page, the <strong>enabled chat widget will be displayed on the integrations list</strong>.</div> <div class="md:u-hidden"><strong>Save all the changes</strong> made to Chat Widget. When you exit the page, the <strong>enabled chat widget will be displayed on the integrations list</strong>.</div> </div> <h2 id="general-section">General section<a href="#general-section" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#general-section" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <p>In this section, you can change all the bot’s default settings - <strong>change its name</strong>, <strong>add a description</strong> that the user will see under the bot’s name, <strong>change avatar</strong> displayed next to every message the bot sends <strong>and choose the chat widget language</strong>.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-3-new.png" alt=""></p> <h3 id="configure-the-welcome-screen">Configure the Welcome screen<a href="#configure-the-welcome-screen" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#configure-the-welcome-screen" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h3> <p>The Welcome screen is the first view of the chat window that users see when they click the chat bubble. </p> <p><strong>Add your logo</strong> and <strong>welcome text,</strong> which the user will see at the top when they open the window. You can also <strong>add custom links</strong> the user can click directly in the chat window.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-4-new.png" alt="">You can also <strong>white-label</strong> the bot and <strong>disable the text field</strong> in this section to push your users to use buttons. The text field will be enabled only when the bot uses the <a href="https://www.chatbot.com/help/actions/ask-a-question/">Question action</a> during the conversation.</p> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-blue-500 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/tip.svg" alt="" width="90" class="u-w-auto u-maxw-1 u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12"><p>The <strong>white label</strong> option is available only in <strong>Business and Enterprise plans</strong>. </p> <p>When the <a href="https://www.chatbot.com/help/livechat-integration/livechat-installation/">bot is integrated with LiveChat</a>, all <a href="https://www.chatbot.com/help/livechat-integration/youve-connected-livechat-to-chatbot-whats-next/#customizations-and-greetings-need-to-be-applied-to-the-livechat-widget">changes should occur in the LiveChat Chat Widget configurator</a>. </p> <p>If you have the <a href="https://www.chatbot.com/help/integrations/how-to-make-messenger-chatbot/">bot integrated with Facebook Messenger</a> or <a href="https://www.chatbot.com/help/integrations/slack-integration/">with Slack</a>, you cannot adjust the chat window.</p> </div> <div class="md:u-hidden"><p>The <strong>white label</strong> option is available only in <strong>Business and Enterprise plans</strong>. </p> <p>When the <a href="https://www.chatbot.com/help/livechat-integration/livechat-installation/">bot is integrated with LiveChat</a>, all <a href="https://www.chatbot.com/help/livechat-integration/youve-connected-livechat-to-chatbot-whats-next/#customizations-and-greetings-need-to-be-applied-to-the-livechat-widget">changes should occur in the LiveChat Chat Widget configurator</a>. </p> <p>If you have the <a href="https://www.chatbot.com/help/integrations/how-to-make-messenger-chatbot/">bot integrated with Facebook Messenger</a> or <a href="https://www.chatbot.com/help/integrations/slack-integration/">with Slack</a>, you cannot adjust the chat window.</p> </div> </div> <h2 id="appearance-section">Appearance section<a href="#appearance-section" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#appearance-section" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <p>Ensure the chat window matches your brand’s colors and style. Choose the window <strong>theme and color</strong>. You can <strong>choose from the ready-to-use presets or adjust every aspect</strong> with the advanced options.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-5-new.png" alt="">You can also choose the <strong>window background</strong> from a <strong>color</strong> or <strong>gradient</strong> or <strong>upload your background picture</strong>.</p> <h2 id="position-section">Position section<a href="#position-section" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#position-section" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <p>Decide <strong>where to place the chat widget</strong> on your site to benefit your users most. Choose whether you want the <strong>window on the left or right side</strong> of the screen and <strong>how far from the side and bottom</strong> it should be.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-6-new.png" alt="">You can also use the <strong>default launch</strong> type and load the chat window automatically or use the <strong>custom launch</strong> and show the window only when you want it.</p> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-blue-500 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/tip.svg" alt="" width="90" class="u-w-auto u-maxw-1 u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12"><p>With the <strong>Default launch, the chat window will be displayed based on the Position and the Mobile devices section settings</strong> after the site finishes loading. If you set any greetings in the Greetings section, the message will be displayed alongside the minimized chat window based on your settings. </p> <p>With the <strong>Custom launch, you set the rules for when the window will appear on your site.</strong> For example, you can customize the launch with coding to open the window only after the user clicks a button on your site.</p> </div> <div class="md:u-hidden"><p>With the <strong>Default launch, the chat window will be displayed based on the Position and the Mobile devices section settings</strong> after the site finishes loading. If you set any greetings in the Greetings section, the message will be displayed alongside the minimized chat window based on your settings. </p> <p>With the <strong>Custom launch, you set the rules for when the window will appear on your site.</strong> For example, you can customize the launch with coding to open the window only after the user clicks a button on your site.</p> </div> </div> <h2 id="mobile-devices-section">Mobile devices section<a href="#mobile-devices-section" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#mobile-devices-section" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <p>Decide if you want to keep <strong>chat widget enabled for users entering your site on mobile devices</strong>. You can also <strong>disable this option</strong> in this section. </p> <p>You can choose to <strong>keep the same position as on the desktop</strong> (you can adjust the position in the Position section) or <strong>customize it.</strong></p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-7-new.png" alt="">Decide if the chat widget should be <strong>displayed on the left or right side</strong> of the screen and <strong>how far from the side and bottom</strong> it should be.</p> <h2 id="greetings-section">Greetings section<a href="#greetings-section" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#greetings-section" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <p>Configure a <a href="https://www.chatbot.com/help/chat-widget/widget-greetings/"><strong>greeting</strong></a> to capture your users’ attention and encourage them to chat — display a <strong>pop-up message above your website’s minimized Chat Widget icon</strong>.</p> <p>Enter the greeting configurator by clicking the <strong>+Add greeting button. Add the name</strong> to recognize the greeting (it will not be displayed to the users) and <strong>the greeting message.</strong> Then, <strong>choose the conditions</strong> under which the message will be displayed.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-8-new.png" alt="">You can see how the message will look on your site on the right side of the window. Save the changes with the <strong>Confirm button</strong>.</p> <h2 id="publish-section">Publish section<a href="#publish-section" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#publish-section" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <p>In this section, you will find the tracking code needed to install the bot on your site and the integrations list.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-9-new.png" alt=""></p> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-blue-500 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/tip.svg" alt="" width="90" class="u-w-auto u-maxw-1 u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12"><p>To integrate the bot with any of the integrations we offer, <strong>click on the integration box</strong> to see instructions or <strong>follow the instructions here</strong>:</p> <p><a href="https://www.chatbot.com/help/integrations/wordpress-integration/">WordPress</a>, <a href="https://www.chatbot.com/help/install-chatbot/google-tag-manager/">Google Tag Manager</a>, <a href="https://www.chatbot.com/help/integrations/wix-integration/">Wix</a>, <a href="https://www.chatbot.com/help/shopify-integration/how-to-integrate-chatbot-with-shopify/">Shopify</a>, <a href="https://www.chatbot.com/help/integrations/squarespace/">Squarespace</a>, <a href="https://www.chatbot.com/help/integrations/bigcommerce-integration/">BigCommerce</a>, <a href="https://www.chatbot.com/help/integrations/webflow-integration/" target="_blank">Webflow</a></p> </div> <div class="md:u-hidden"><p>To integrate the bot with any of the integrations we offer, <strong>click on the integration box</strong> to see instructions or <strong>follow the instructions here</strong>:</p> <p><a href="https://www.chatbot.com/help/integrations/wordpress-integration/">WordPress</a>, <a href="https://www.chatbot.com/help/install-chatbot/google-tag-manager/">Google Tag Manager</a>, <a href="https://www.chatbot.com/help/integrations/wix-integration/">Wix</a>, <a href="https://www.chatbot.com/help/shopify-integration/how-to-integrate-chatbot-with-shopify/">Shopify</a>, <a href="https://www.chatbot.com/help/integrations/squarespace/">Squarespace</a>, <a href="https://www.chatbot.com/help/integrations/bigcommerce-integration/">BigCommerce</a>, <a href="https://www.chatbot.com/help/integrations/webflow-integration/" target="_blank">Webflow</a></p> </div> </div> <h3 id="install-the-bot-on-your-site">Install the bot on your site<a href="#install-the-bot-on-your-site" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#install-the-bot-on-your-site" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h3> <p>To install the bot on your site, copy the code using the <strong>Copy code button</strong>. You should <strong>paste it into your site’s source code before the < / body > closing tag.</strong></p> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-blue-500 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/tip.svg" alt="" width="90" class="u-w-auto u-maxw-1 u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12"><p>The Chat Widget can also be embedded as an element of the page. You can see how it looks <a href="https://www.chatbot.com/preview-embedded/" target="_blank"><strong>here</strong></a>. The example code is available in our <a href="https://gist.github.com/humannus/ad5c4f407a81cbe6f0a5a8014c7315a9" target="_blank"><strong>GitHub repository</strong></a>. </p> <p>The repository contains an <strong>example code.</strong> To make it work on your site, you must <strong>change the widget code</strong> in the file. You can find it in the <strong>Publish</strong> section of the integration window.</p> </div> <div class="md:u-hidden"><p>The Chat Widget can also be embedded as an element of the page. You can see how it looks <a href="https://www.chatbot.com/preview-embedded/" target="_blank"><strong>here</strong></a>. The example code is available in our <a href="https://gist.github.com/humannus/ad5c4f407a81cbe6f0a5a8014c7315a9" target="_blank"><strong>GitHub repository</strong></a>. </p> <p>The repository contains an <strong>example code.</strong> To make it work on your site, you must <strong>change the widget code</strong> in the file. You can find it in the <strong>Publish</strong> section of the integration window.</p> </div> </div> <h2 id="preview-your-chat-widget-section">Preview your Chat Widget section<a href="#preview-your-chat-widget-section" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#preview-your-chat-widget-section" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <p>Testing is crucial for chatbot development. It lets you <strong>check your bot’s accuracy, speed, and usefulness</strong>. It also <strong>helps uncover issues</strong> like incomplete paths or bad user experience, which can negatively impact your bot’s adoption. </p> <p>You can test the bot on the <a href="https://www.chatbot.com/help/chat-widget/sample-page/" target="_blank"><strong>Preview page</strong></a> when all the changes are complete. This page allows you to chat with the bot and see all changes made to the chat widget.</p> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-blue-500 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/tip.svg" alt="" width="90" class="u-w-auto u-maxw-1 u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12">Click the <strong>Publish button</strong> in the bot builder to ensure that all the latest changes to the bot flow are applied on the Preview page.</div> <div class="md:u-hidden">Click the <strong>Publish button</strong> in the bot builder to ensure that all the latest changes to the bot flow are applied on the Preview page.</div> </div> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-10-spotlight-customize-frame.png" alt=""></p> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-yellow-300 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/attention.svg" alt="" width="90" class="u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12">The preview page lets you <strong>test only the ChatBot Chat Widget</strong>. You must <a href="https://www.livechat.com/help/direct-chat-link/#chat-page">test your bot using the LiveChat Chat Widget</a> if you use LiveChat.</div> <div class="md:u-hidden">The preview page lets you <strong>test only the ChatBot Chat Widget</strong>. You must <a href="https://www.livechat.com/help/direct-chat-link/#chat-page">test your bot using the LiveChat Chat Widget</a> if you use LiveChat.</div> </div> <p>With the preview page, you can <strong>see how it will perform live on the page before you install the bot on your site</strong>. You can also see all the changes and adjust settings if needed.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-11-new.png" alt=""></p> <h2 id="how-to-disable-chat-widget-on-your-site">How to disable Chat Widget on your site<a href="#how-to-disable-chat-widget-on-your-site" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#how-to-disable-chat-widget-on-your-site" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <p>To disable the bot (without removing the Chat Widget code from your site), <strong>go to the Chat Widget</strong> integration and <strong>switch the integration toggle</strong> to the off position.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-12-new.png" alt="">Switch the toggle back to the on position to enable the bot on your site again.</p> <h2 id="how-to-delete-chat-widget-from-your-site">How to delete Chat Widget from your site<a href="#how-to-delete-chat-widget-from-your-site" class="c-link v--reset t-help__anchor-link" ariaLabel="Anchor" data-controller="clipboard" data-action="clipboard#copy"><img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTEwIDE0YTMuNSAzLjUgMCAwMDUgMGw0LTRhMy41MzYgMy41MzYgMCAwMC01LTVsLS41LjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAwLTUgMGwtNCA0YTMuNTM1IDMuNTM1IDAgMTA1IDVsLjUtLjUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="Link icon" /><input type="text" value="https://www.chatbot.com/help/install-chatbot/widget-installation/#how-to-delete-chat-widget-from-your-site" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-target="clipboard.source" tabindex="-1" /></a></h2> <p>To delete the integration from your site, <strong>delete the tracking code from the site’s source code</strong> or <strong>go to the Integrations tab</strong> from the side menu and <strong>choose Chat Widget</strong> from the list. Then, <strong>click the 3-dot symbol</strong>, and <strong>select the Delete integration</strong> option. <strong>Confirm</strong>.</p> <p><img src="https://cdn.livechatinc.com/cms/help/chatbot/install-chatbot-using-chat-widget/new-chat-widget-open-widget/open-widget-13-new.png" alt=""></p> <div class="u-py-2xl u-px-xl u-Mt-sm u-Mb-md u-border-2 u-rounded b--u-border-red-500 u-flex u-flex-col md:u-flex-row md:u-items-center"> <div class="u-Mb-sm md:u-mb-0 u-basis-2"><img src="/help/icons/warning.svg" alt="" width="90" class="u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12"><p><strong>Deleting the integration erases all the changes</strong> made to the Chat Widget and the widget itself from the site. You’ll need to configure it from scratch when you decide to enable the Chat Widget again on your site.</p> <p><strong>Disabling the bot turns it off on the site but leaves all the settings</strong> intact in the ChatBot app.</p> </div> <div class="md:u-hidden"><p><strong>Deleting the integration erases all the changes</strong> made to the Chat Widget and the widget itself from the site. You’ll need to configure it from scratch when you decide to enable the Chat Widget again on your site.</p> <p><strong>Disabling the bot turns it off on the site but leaves all the settings</strong> intact in the ChatBot app.</p> </div> </div> <p><strong>Read more:</strong></p> <ul><li> <p><a href="https://www.chatbot.com/help/overview/testing-tool/">How to test the bot in the Testing tool</a> </p> </li><li> <p><a href="https://www.chatbot.com/help/build-your-chatbot/how-to-build-your-chatbot/">How to create your first AI chatbot</a></p> </li><li> <p><a href="https://www.chatbot.com/help/train-your-chatbot/train-your-chatbot/">How to train the bot</a></p> </li></ul> </div> </div> <form action="" name="hc_rating" class="u-My-xs md:u-My-xl" data-id="00278d1a41a4a723d45b84f2ce78db85" data-controller="rating-form"> <section class="u-text-center u-Mb-xs lg:u-Mb-md u-bg-gray-900 o-container v--big u-Py-lg"> <h2 class="u-text-p5-bold u-mb-xl">Was this article helpful?</h2> <button type="button" data-vote="1" data-action="click->rating-form#ratePositive" data-target="rating-form.positiveButton" title="yes" class="c-btn u-inline-flex u-items-center u-mx-lg u-px-lg ub v--transparent u-mb-lg md:u-mb-0" > <svg xmlns="http://www.w3.org/2000/svg" class="u-mr-sm" width="24" height="24" viewBox="0 0 24 24"> <g fill="none" fill-rule="evenodd"> <path fill="currentColor" fill-rule="nonzero" d="M2.315 11.685h4v10h-4zM17.114 21.685h-8.8v-10l5.456-8.444a2.418 2.418 0 0 1 2.63-.813l-.694 8.163h3.876a2.1 2.1 0 0 1 2.059 2.5c-.274 1.4-.6 3.068-.809 4.117-.841 4.271-3.718 4.477-3.718 4.477z"/> <path d="M0 0h24v24H0z"/> </g> </svg> <span class="u-text-p7">Yes</span> </button> <button type="button" data-vote="0" data-action="click->rating-form#revealNegativeCommentBox" data-target="rating-form.negativeButton" title="no" class="c-btn u-inline-flex u-items-center u-mx-lg u-px-lg ub v--transparent" > <svg xmlns="http://www.w3.org/2000/svg" class="u-mr-sm" width="24" height="24" viewBox="0 0 24 24"> <g fill="none" fill-rule="evenodd"> <path fill="currentColor" fill-rule="nonzero" d="M21.685 12.315h-4v-10h4zM6.886 2.315h8.8v10l-5.456 8.444a2.418 2.418 0 0 1-2.634.813l.694-8.163H4.414a2.1 2.1 0 0 1-2.059-2.5c.273-1.4.6-3.068.808-4.117.846-4.271 3.723-4.477 3.723-4.477z"/> <path d="M0 0h24v24H0z"/> </g> </svg> <span class="u-text-p7">No</span> </button> </section> <div class="u-text-center o-container u-maxw-6 c-rating-form__feedback" data-target="rating-form.feedback"> <label for="hc_rating_message" class="u-text-p6 u-inline-block u-mb-md">How can we make it better?</label> <br> <textarea name="message" id="hc_rating_message" maxlength="100" class="u-border u-border-black u-rounded-sm u-px-lg u-py-md u-mb-lg c-rating-form__message u-text-left" data-target="rating-form.message" data-action="keyup->rating-form#validateMessage change->rating-form#validateMessage" required ></textarea> <div class="u-text-right"> <button type="button" data-vote="0" data-action="click->rating-form#rateNegative" title="no" class="c-btn u-px-lg ub v--transparent" data-target="rating-form.submit" disabled > Submit your feedback </button> </div> </div> <div class="u-text-center o-container u-hidden" data-target="rating-form.confirmation0"> <img src="/help/images/ok.gif" alt="" class="u-maxw-1 u-mb-md" width="100"> <h3 class="u-text-p5-bold u-mb-lg">Got it!</h3> <p class="u-text-p6">Thanks for your feedback.</p> </div> <div class="u-text-center o-container u-hidden" data-target="rating-form.confirmation1"> <img src="/help/images/thanks.gif" alt="" class="u-maxw-1 u-mb-md" width="100"> <h3 class="u-text-p5-bold u-mb-lg">Thank you!</h3> <p class="u-text-p6">We’re happy to help.</p> </div> </form> </article> </div> <section data-target="helpcenter-footer-cta" class="b--u-bg-black-900 u-text-white u-text-center"> <div class="o-container u-Py-xl u-relative"> <img src="/elements/cursor-hand-blue.svg" class="u-hidden md:u-block t-cursor-hand"> <h2 class="u-text-p3">Start a free ChatBot trial<br/> and build your first chatbot today!</h2> <form action="https://accounts.livechat.com/signup?client_id=92418ea187dd3c572383cbf56f015b6c&response_type=token&redirect_uri=https%3A%2F%2Fapp.chatbot.com%2Fstories" method="GET" data-controller="signup utm-tracking" data-target="utm-tracking.element" data-action="signup#submit"> <div class="u-maxw-7 u-mx-auto u-flex u-flex-col sm:u-flex-row"> <input type="hidden" name="source_id" value="footer_form"> <input type="hidden" name="source_url" value="https://www.chatbot.com/help/install-chatbot/widget-installation/"> <input type="hidden" name="source_type" value="website"> <input type="email" name="email" class="u-mr-xs u-mb-xs sm:u-mb-0" data-target="signup.email" placeholder="Enter your business email" required="required"> <button type="submit" class="c-btn v--signup">Sign up free</button> </div> </form> <p class="u-text-p6 u-Mt-2xs"> <span class="u-mr-xs"> <svg xmlns="http://www.w3.org/2000/svg" width="11" height="10"> <path d="M9.1.3L4 5.4l-2-2c-.3-.3-.7-.4-1-.3S0 3.5 0 4c0 .4 0 .8.3 1l2.8 2.8c.2.2.5.3.8.3s.6-.1.8-.3l6-5.9c.3-.2.4-.6.3-1a1 1 0 0 0-.8-.8c-.4 0-.8 0-1 .3z" fill="#FFFFFF"></path> </svg> </span> <span>Free 14-day trial</span> <span class="u-ml-md u-mr-xs"> <svg xmlns="http://www.w3.org/2000/svg" width="11" height="10"> <path d="M9.1.3L4 5.4l-2-2c-.3-.3-.7-.4-1-.3S0 3.5 0 4c0 .4 0 .8.3 1l2.8 2.8c.2.2.5.3.8.3s.6-.1.8-.3l6-5.9c.3-.2.4-.6.3-1a1 1 0 0 0-.8-.8c-.4 0-.8 0-1 .3z" fill="#FFFFFF"></path> </svg> </span> <span>No credit card required</span> </p> </div> </section> <section data-target="helpcenter-footer" class="u-bg-gray-900 b--u-py-10 b--md:u-py-12"> <div class="o-container-xl"> <h2 class="b--u-text-lg u-text-center b--u-text-black-900 b--u-mb-6">Discover our <span class="b--u-text-bold">text|</span> products</h2> <div class="o-columns v--four v--responsive"> <a href="https://www.livechat.com/?utm_source=chatbot.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank" rel="noopener" class="u-flex u-items-center c-link v--reset" data-controller="track" data-track-category="Interactions" data-track-action="Link click" data-track-label="LiveChat" data-action="track#send"> <div class="u-Mr-xs"> <svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_dd)"><rect x="4" y="3" width="64" height="64" rx="10" fill="#fff"/></g><path d="M51.8 39a7.6 7.6 0 01-7.6 6.8H40L32 51v-5.2l8-5.2h4.2a2.3 2.3 0 002.4-2c.2-4 .2-8 0-12a2.2 2.2 0 00-2.2-2.1 138.7 138.7 0 00-16.9 0 2.2 2.2 0 00-2 2c-.4 4-.4 8-.2 12a2.4 2.4 0 002.5 2.1H32v5.2h-4.2a7.5 7.5 0 01-7.6-6.9c-.3-4.2-.3-8.5 0-12.8a7.4 7.4 0 017-6.8 124.8 124.8 0 0117.6 0 7.4 7.4 0 017 6.8c.2 4.3.2 8.6 0 12.8z" fill="#FF5100"/> <defs> <filter id="filter0_dd" x="0" y="0" width="72" height="72" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fegaussianblur stddeviation="2"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><fecolormatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset/><fegaussianblur stddeviation="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="effect1_dropShadow" result="effect2_dropShadow"/><feblend in="SourceGraphic" in2="effect2_dropShadow" result="shape"/></filter> </defs> </svg> </div> <p class="b--u-text-sm u-mb-0 b--u-text-black-600 b--md:u-pr-1"> <span class="b--u-text-base b--u-text-bold b--u-text-black-900">LiveChat</span> <br>Connect with customers</p> </a> <a href="https://www.helpdesk.com/?utm_source=chatbot.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank" rel="noopener" class="u-flex u-items-center c-link v--reset" data-controller="track" data-track-category="Interactions" data-track-action="Link click" data-track-label="HelpDesk" data-action="track#send"> <div class="u-Mr-xs"> <svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_dd2)"><rect x="4" y="3" width="64" height="64" rx="10" fill="#fff"/></g><path d="M36 33.3l8.1-7.1H36c-2.9 0-5.8.1-8.5.3a2.2 2.2 0 00-2 2c-.2 1.7-.3 3.8-.3 6v1c0 2.2 0 4.3.2 6a2.2 2.2 0 002.1 2c5.7.4 11.3.4 17 0a2.2 2.2 0 002-2c.2-1.6.3-3.6.3-5.6l5.2-4.5v4.5l-.2 6a7.4 7.4 0 01-7 6.8 118.6 118.6 0 01-17.7 0 7.4 7.4 0 01-6.9-6.8 83 83 0 01-.2-6.3v-1.2l.2-6.3a7.4 7.4 0 017-6.8C30 21.1 33 21 36 21h16v5.2L36 40.1l-7.5-6.5 4-3.4 3.5 3z" fill="#2FC774"/> <defs> <filter id="filter0_dd2" x="0" y="0" width="72" height="72" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fegaussianblur stddeviation="2"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><fecolormatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset/><fegaussianblur stddeviation="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="effect1_dropShadow" result="effect2_dropShadow"/><feblend in="SourceGraphic" in2="effect2_dropShadow" result="shape"/></filter> </defs> </svg> </div> <p class="b--u-text-sm u-mb-0 b--u-text-black-600 b--md:u-pr-1"> <span class="b--u-text-base b--u-text-bold b--u-text-black-900">HelpDesk</span> <br>Support customers with tickets</p> </a> <a href="https://www.knowledgebase.com/?utm_source=chatbot.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank" rel="noopener" class="u-flex u-items-center c-link v--reset" data-controller="track" data-track-category="Interactions" data-track-action="Link click" data-track-label="KnowledgeBase" data-action="track#send"> <div class="u-Mr-xs"> <svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_dd)"><rect x="4" y="3" width="64" height="64" rx="10" fill="#fff"/></g><path d="M46.8 26.4V21h-.3c-4.4.2-8.1 3-10.4 5.4H36c-2.3-2.3-6-5.2-10.4-5.4h-.3v5.4H20v9.2l.2 6.3a7.4 7.4 0 007 6.8 125.1 125.1 0 0017.7 0 7.4 7.4 0 006.9-6.8l.2-6.3v-9.2h-5.2zm0 9.2c0 2 0 4.2-.2 5.9a2.2 2.2 0 01-2.1 2c-5.7.4-11.3.4-17 0a2.2 2.2 0 01-2-2 76 76 0 01-.3-6v-9.1c3.8.1 7.5 4.1 8.6 5.7l2.2 3 2.2-3c1.1-1.6 4.8-5.6 8.6-5.7v9.2z" fill="#9146FF"/> <defs> <filter id="filter0_dd" x="0" y="0" width="72" height="72" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fegaussianblur stddeviation="2"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><fecolormatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset/><fegaussianblur stddeviation="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="effect1_dropShadow" result="effect2_dropShadow"/><feblend in="SourceGraphic" in2="effect2_dropShadow" result="shape"/></filter> </defs> </svg> </div> <p class="b--u-text-sm u-mb-0 b--u-text-black-600"> <span class="b--u-text-base b--u-text-bold b--u-text-black-900">KnowledgeBase</span> <br>Guide and educate customers</p> </a> <a href="https://openwidget.com/?utm_source=livechat.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank" rel="noopener" class="u-flex u-items-center c-link v--reset"> <div class="b--u-mr-3"> <svg width="76" height="76" viewbox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_ddd_1770_3180)"> <g clip-path="url(#clip0_1770_3180)"><rect x="6" y="6" width="64" height="64" rx="8" fill="#333333"/><rect x="6" y="6" width="64" height="64" fill="white"/> <g clip-path="url(#clip1_1770_3180)"> <mask id="mask0_1770_3180" style="mask-type:alpha" maskunits="userSpaceOnUse" x="20" y="22" width="37" height="32"><path d="M38.0931 22.1982C41.4514 22.1982 44.9297 22.3204 48.0482 22.565C52.1262 22.9318 55.4845 26.1111 55.8444 30.3909L55.8865 31.1297L55.9301 32.0677C55.9732 33.0966 56.0166 35.4319 56.0602 39.0736L56.0377 40.2545C55.9933 42.3179 55.9257 44.1669 55.8444 45.4529C55.4845 49.7327 52.1262 52.9119 48.0482 53.2788C45.2132 53.5011 42.0809 53.6224 39.0116 53.6426L38.0855 53.6453C34.7272 53.6453 31.2489 53.523 28.1304 53.2784C24.0524 52.9116 20.6941 49.7323 20.3343 45.4526L20.2922 44.7137L20.262 44.0862C20.2036 42.7792 20.1562 41.1715 20.125 39.4513V36.3925L20.1491 35.2212C20.1935 33.3067 20.2578 31.6002 20.3343 30.3912C20.6941 26.1114 24.0524 22.9321 28.1304 22.5653C30.9654 22.343 34.0977 22.2217 37.167 22.2015L38.0931 22.1982ZM38.0893 28.191L36.9913 28.1959L35.93 28.2103C33.4557 28.2542 30.9978 28.3698 28.6102 28.557C27.2908 28.6793 26.3313 29.6575 26.2114 30.8803L26.1708 31.3192C26.0605 32.6261 25.9888 34.4595 25.9471 36.4738V39.3699L25.9736 40.4745C26.0231 42.2766 26.1 43.866 26.2114 44.9634C26.3313 46.1862 27.2908 47.1645 28.6102 47.2867C30.9978 47.474 33.4557 47.5895 35.93 47.6334L36.9913 47.6479L38.162 47.6528L39.1873 47.6482C42.0193 47.6214 44.8398 47.501 47.5684 47.2871C48.8878 47.1648 49.8473 46.1865 49.9673 44.9637L50.0078 44.5249C50.1429 42.925 50.22 40.5364 50.2552 37.9926L50.2316 36.4735L50.2051 35.3689C50.1555 33.5668 50.0786 31.9775 49.9673 30.88C49.8473 29.6572 48.8878 28.679 47.5684 28.5567C45.1809 28.3695 42.723 28.2539 40.2486 28.21L39.1873 28.1956L38.0893 28.191Z" fill="white"/></mask> <g mask="url(#mask0_1770_3180)"><path fill-rule="evenodd" clip-rule="evenodd" d="M38.0889 15.4592C44.0661 15.4592 49.952 18.2295 53.9876 22.0383C54.0673 22.1135 53.9991 21.7143 54.5387 22.5107L38.0889 37.9217V15.4592Z" fill="url(#paint0_linear_1770_3180)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M53.9876 22.0384C58.2258 26.2725 60.4205 32.0816 60.5674 37.6397C60.5699 37.7338 60.5718 38.8333 60.5731 38.9273L38.0889 37.9218L53.9876 22.0384Z" fill="url(#paint1_linear_1770_3180)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M60.5731 37.9217C60.5731 43.8289 58.2906 49.2035 54.5587 53.2134C54.4436 53.337 53.9461 53.684 53.8283 53.805L38.0889 37.9217H60.5731Z" fill="url(#paint2_linear_1770_3180)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M54.21 53.5803C49.9787 57.8075 43.9624 60.2164 38.3994 60.3775C38.2959 60.3805 36.7047 60.376 36.6016 60.3775L38.0895 37.9217L54.21 53.5803Z" fill="url(#paint3_linear_1770_3180)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M38.0889 60.3841C32.0806 60.3841 26.4042 57.8144 22.3645 53.9726C22.306 53.917 21.4435 52.9528 21.3857 52.8966L38.0889 37.9217V60.3841Z" fill="url(#paint4_linear_1770_3180)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22.191 53.8051C17.9938 49.6119 15.8008 43.8741 15.6161 38.3651C15.6111 38.2171 15.6181 37.0106 15.6161 36.863L38.0897 37.9217L22.191 53.8051Z" fill="url(#paint5_linear_1770_3180)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.6055 37.9218C15.6055 31.9661 17.9255 26.5518 21.712 22.5316C21.797 22.4414 22.6457 21.8183 22.7322 21.7295L38.0897 37.9218H15.6055Z" fill="url(#paint6_linear_1770_3180)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.9688 22.263C26.1334 18.1024 32.0273 15.7033 37.5161 15.4751C37.7077 15.4672 38.3088 15.4619 38.4993 15.4592L38.0893 37.9217L21.9688 22.263Z" fill="url(#paint7_linear_1770_3180)"/></g> </g> </g> </g> <defs> <filter id="filter0_ddd_1770_3180" x="0" y="0" width="76" height="76" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feoffset dy="1"/><fegaussianblur stddeviation="1"/><fecolormatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feblend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1770_3180"/><fecolormatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feoffset dy="1"/><fegaussianblur stddeviation="1.5"/><fecolormatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend mode="normal" in2="effect1_dropShadow_1770_3180" result="effect2_dropShadow_1770_3180"/><fecolormatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feoffset/><fegaussianblur stddeviation="3"/><fecolormatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/><feblend mode="normal" in2="effect2_dropShadow_1770_3180" result="effect3_dropShadow_1770_3180"/><feblend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1770_3180" result="shape"/></filter> <lineargradient id="paint0_linear_1770_3180" x1="38.4724" y1="25.9331" x2="47.5683" y2="26.4078" gradientunits="userSpaceOnUse"><stop stop-color="#B349D9"/><stop offset="1" stop-color="#F53547"/></lineargradient> <lineargradient id="paint1_linear_1770_3180" x1="49.4051" y1="25.838" x2="49.9508" y2="37.0956" gradientunits="userSpaceOnUse"><stop stop-color="#F13354"/><stop offset="1" stop-color="#FF4200"/></lineargradient> <lineargradient id="paint2_linear_1770_3180" x1="53.493" y1="38.672" x2="51.5341" y2="47.9153" gradientunits="userSpaceOnUse"><stop stop-color="#FF4200"/><stop offset="1" stop-color="#FFD000"/></lineargradient> <lineargradient id="paint3_linear_1770_3180" x1="47.6944" y1="48.4639" x2="38.8971" y2="48.191" gradientunits="userSpaceOnUse"><stop stop-color="#FFD000"/><stop offset="1" stop-color="#72CE3A"/></lineargradient> <lineargradient id="paint4_linear_1770_3180" x1="28.1102" y1="49.2244" x2="38.0171" y2="49.4373" gradientunits="userSpaceOnUse"><stop stop-color="#02B296"/><stop offset="1" stop-color="#72CE3A"/></lineargradient> <lineargradient id="paint5_linear_1770_3180" x1="22.7873" y1="38.0065" x2="25.5249" y2="48.2296" gradientunits="userSpaceOnUse"><stop stop-color="#2173DA"/><stop offset="1" stop-color="#02B195"/></lineargradient> <lineargradient id="paint6_linear_1770_3180" x1="28.4199" y1="29.8256" x2="25.1975" y2="34.5073" gradientunits="userSpaceOnUse"><stop stop-color="#3750FF"/><stop offset="1" stop-color="#2172D9"/></lineargradient> <lineargradient id="paint7_linear_1770_3180" x1="37.237" y1="25.2676" x2="27.6519" y2="23.872" gradientunits="userSpaceOnUse"><stop stop-color="#B44ADA"/><stop offset="1" stop-color="#364FFE"/></lineargradient> <clippath id="clip0_1770_3180"><rect x="6" y="6" width="64" height="64" rx="8" fill="white"/></clippath> <clippath id="clip1_1770_3180"><rect width="36.2667" height="36.2667" fill="white" transform="translate(19.8662 19.8667)"/></clippath> </defs> </svg> </div> <p class="b--u-text-sm u-mb-0 sm:u-maxw-2 b--u-ml-0.5"> <span class="b--u-text-sm b--u-text-bold">OpenWidget</span> <br> <span style="opacity: .65;">Enhance websites with widgets</span></p> </a> </div> </div> </section> <footer data-target="helpcenter-footer" class="u-bg-gray-900 b--u-pt-6"> <div class="u-border-b"> <div class="o-container-xl"> <nav class="u-flex u-flex-wrap b--u-mb-8 b--md:u-mb-6 b--lg:u-mb-4"> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3 b--u-pr-1 b--sm:u-pr-0.25"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2 b--u-text-black-900">Product</p> <ul class="u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/pricing/" class="b--u-text-xs c-link v--reset" >Pricing</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/features/ai/" class="b--u-text-xs c-link v--reset" >Artificial Intelligence</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/benefits/" class="b--u-text-xs c-link v--reset" >Benefits</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/features/" class="b--u-text-xs c-link v--reset" >Features</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/chatbot-demo/" class="b--u-text-xs c-link v--reset" >Product Demo</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/features/visual-builder/" class="b--u-text-xs c-link v--reset" >Visual Builder</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/features/dynamic-responses/" class="b--u-text-xs c-link v--reset" >Dynamic Responses</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/features/analytics/" class="b--u-text-xs c-link v--reset" >Analytics</a> </li> </ul> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3 b--u-pr-1 b--sm:u-pr-0.25"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2 b--u-text-black-900">Solutions</p> <ul class="u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/solutions/chatbot-for-marketing/" class="b--u-text-xs c-link v--reset" >Marketing</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/solutions/chatbot-for-support/" class="b--u-text-xs c-link v--reset" >Customer Support</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/solutions/chatbot-for-sales/" class="b--u-text-xs c-link v--reset" >Sales</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/solutions/chatbot-for-education/" class="b--u-text-xs c-link v--reset" >Education</a> </li> </ul> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3 b--u-pr-1 b--sm:u-pr-0.25"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2 b--u-text-black-900">Integrations</p> <ul class="u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/integrations/chat-widget/" class="b--u-text-xs c-link v--reset" >Chat Widget</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/integrations/livechat/" class="b--u-text-xs c-link v--reset" >LiveChat</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/integrations/helpdesk/" class="b--u-text-xs c-link v--reset" >HelpDesk</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/integrations/facebook-messenger/" class="b--u-text-xs c-link v--reset" >Facebook Messenger</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/integrations/shopify/" class="b--u-text-xs c-link v--reset" >Shopify</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/integrations/slack/" class="b--u-text-xs c-link v--reset" >Slack</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/integrations/zapier/" class="b--u-text-xs c-link v--reset" >Zapier</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/integrations/wordpress/" class="b--u-text-xs c-link v--reset" >WordPress</a> </li> </ul> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3 b--u-pr-1 b--sm:u-pr-0.25"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2 b--u-text-black-900">ChatBot Templates</p> <ul class="u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/chatbot-templates/marketing/" class="b--u-text-xs c-link v--reset" >Marketing Templates</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/chatbot-templates/sales/" class="b--u-text-xs c-link v--reset" >Sales Templates</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/chatbot-templates/support/" class="b--u-text-xs c-link v--reset" >Support Templates</a> </li> </ul> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3 b--u-pr-1 b--sm:u-pr-0.25"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2 b--u-text-black-900">Resources</p> <ul class="u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/help/" class="b--u-text-xs c-link v--reset" >Help Center</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/docs/" class="b--u-text-xs c-link v--reset" >API & Developers</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/academy/" class="b--u-text-xs c-link v--reset" >ChatBot Academy</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/blog/" class="b--u-text-xs c-link v--reset" >Blog</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/chatbot-best-practices/" class="b--u-text-xs c-link v--reset" >Chatbot Best Practices</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://status.chatbot.com/" class="b--u-text-xs c-link v--reset" target="_blank" rel="noopener" >System Status</a> </li> </ul> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3 b--u-pr-1 b--sm:u-pr-0.25"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2 b--u-text-black-900">Company</p> <ul class="u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://text.com/" class="b--u-text-xs c-link v--reset" target="_blank" rel="noopener" >About <span class='b--u-text-bold'>text|</span></a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://partners.livechat.com/?utm_source=chatbot.com&utm_medium=referral&utm_content=footer" class="b--u-text-xs c-link v--reset" target="_blank" rel="noopener" >Partner Program</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://www.livechat.com/press/?utm_source=chatbot.com&utm_medium=referral&utm_campaign=footer" class="b--u-text-xs c-link v--reset" target="_blank" rel="noopener" >Press</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://www.livechat.com/careers/?utm_source=chatbot.com&utm_medium=referral&utm_campaign=footer" class="b--u-text-xs c-link v--reset" target="_blank" rel="noopener" >Careers</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://incubator.livechat.com/?utm_source=chatbot&utm_medium=referral&utm_content=footer" class="b--u-text-xs c-link v--reset" target="_blank" rel="noopener" >LiveChat Incubator</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/legal/" class="b--u-text-xs c-link v--reset" >Legal</a> </li> </ul> </div> </nav> <div class="u-flex sm:u-items-center lg:u-justify-between u-flex-col lg:u-flex-row b--u-mb-6 b--md:u-mb-12 b--lg:u-mb-8"> <div class="u-hidden md:u-flex u-items-center u-flex-col md:u-flex-row b--u-mb-4 b--lg:u-mb-0.25"> <p class="b--u-text-sm b--u-text-bold b--u-mb-3 b--md:u-mb-0.25 b--u-mr-4">Start your free trial</p> <a href="https://accounts.livechat.com/signup?client_id=92418ea187dd3c572383cbf56f015b6c&response_type=token&redirect_uri=https%3A%2F%2Fapp.chatbot.com%2Fstories?source_id=footer_cta&source_url=https%3a%2f%2fwww.chatbot.com%2fhelp%2finstall-chatbot%2fwidget-installation%2f&source_type=website" class="c-btn v--sm v--signup" data-controller="track utm-tracking" data-target="utm-tracking.element" data-track-category="Signup" data-track-action="Signup Redirect" data-track-label="Sign up free - Footer" data-action="track#send">Sign up free</a> </div> <div class="md:u-hidden u-flex u-items-center u-justify-center u-flex-col b--u-mb-6 b--md:u-mb-0.25"> <p class="b--u-text-sm b--u-text-bold b--u-mb-3 b--md:u-mb-0.25">Start your free trial</p> <a href="https://accounts.livechat.com/signup?client_id=92418ea187dd3c572383cbf56f015b6c&response_type=token&redirect_uri=https%3A%2F%2Fapp.chatbot.com%2Fstories?source_id=footer_cta&source_url=https%3a%2f%2fwww.chatbot.com%2fhelp%2finstall-chatbot%2fwidget-installation%2f&source_type=website" class="c-btn v--signup u-w-full u-maxw-3 u-mx-auto" data-controller="track utm-tracking" data-target="utm-tracking.element" data-track-category="Signup" data-track-action="Signup Redirect" data-track-label="Sign up free - Footer" data-action="track#send">Sign up free</a> </div> <div class="u-maxw-5 u-mx-auto lg:u-mr-0"> <div class="b--o-grid b--o-grid--gap-6 b--md:o-grid--gap-4 b--o-grid--3 b--sm:o-grid--6"> <a href="https://twitter.com/ChatBotCom" aria-label="Twitter icon" class="u-text-gray-100 hover:u-text-gray-300"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.2 5a5 5 0 0 0 2.1-2.6c-1 .5-2 1-3 1.2a5 5 0 0 0-8.6 3.3l.1 1.2A14 14 0 0 1 1.7 2.9a5 5 0 0 0 1.5 6.6c-.8 0-1.6-.3-2.2-.6a5 5 0 0 0 4 4.9 5 5 0 0 1-2.3 0 5 5 0 0 0 4.6 3.5 9.9 9.9 0 0 1-7.3 2A14 14 0 0 0 21.5 6.8 10 10 0 0 0 24 4.4c-.9.4-1.8.7-2.8.8Z" fill="currentColor"/></svg></a> <a href="https://www.linkedin.com/showcase/chatbotcom/" aria-label="LinkedIn icon" class="u-text-gray-100 hover:u-text-gray-300"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20.45 20.45H16.9v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.95v5.66H9.35V9h3.41v1.56h.05a3.74 3.74 0 0 1 3.37-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM3.55 20.45h3.57V9H3.55v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.8 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a> <a href="https://www.facebook.com/chatbotcom" aria-label="Facebook icon" class="u-text-gray-100 hover:u-text-gray-300"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 12a12 12 0 1 0-13.9 12v-8.5h-3v-3.4h3V9.4c0-3 1.8-4.6 4.6-4.6l2.6.2v3h-1.5c-1.5 0-2 .9-2 1.8v2.3h3.4l-.5 3.4h-2.8V24A12 12 0 0 0 24 12.1Z" fill="currentColor"/></svg></a> <a href="https://www.youtube.com/livechat?sub_confirmation=1" aria-label="YouTube icon" class="u-text-gray-100 hover:u-text-gray-300"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 15.6V8.8l6.5 3.4-6.5 3.4Zm14.3-8s-.3-1.6-1-2.3c-1-1-2-1-2.4-1C17 4 12 4 12 4s-5 0-8.4.2c-.5.1-1.5.1-2.4 1-.7.8-1 2.5-1 2.5L0 11.5v1.9c0 2 .2 3.9.2 3.9s.3 1.6 1 2.4c1 1 2.1.9 2.6 1 2 .2 8.2.2 8.2.2s5 0 8.4-.2c.5 0 1.5 0 2.4-1 .7-.8 1-2.4 1-2.4l.2-4v-1.8l-.2-3.8Z" fill="currentColor"/></svg></a> <a href="https://www.producthunt.com/posts/chatbot-2" aria-label="Product Hunt icon" class="u-text-gray-100 hover:u-text-gray-300"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13.6 8.4a1.8 1.8 0 1 1 0 3.6h-3.4V8.4h3.4zm0 6a4.2 4.2 0 1 0 0-8.4H7.8v12h2.4v-3.6h3.4zM12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24z" fill="currentColor" fill-rule="evenodd"/></svg> </a> <a href="https://github.com/ChatBotCom" aria-label="GitHub icon" class="u-text-gray-100 hover:u-text-gray-300"><svg width="25" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M23.2 6.1A12.3 12.3 0 0 0 12.4 0 12.3 12.3 0 0 0 1.7 6.1 12 12 0 0 0 0 12.3c0 2.7.8 5 2.4 7.2C4 21.7 6 23.2 8.5 24l.6-.1c.2-.2.3-.3.3-.5a365.7 365.7 0 0 0 0-2.3H9l-1 .1a7 7 0 0 1-1-.1c-.4 0-.8-.2-1.1-.5a2 2 0 0 1-.8-1l-.1-.3a4 4 0 0 0-.5-.8 2 2 0 0 0-.7-.7h-.1a1.2 1.2 0 0 1-.4-.5v-.1L4 17h.3l.8.4c.3.2.6.5.8.9.2.4.5.7.9 1 .3.2.7.3 1 .3h1l.7-.3c0-.7.3-1.3.8-1.7-.7 0-1.2-.1-1.7-.3-.5 0-1-.3-1.5-.6a4.3 4.3 0 0 1-2.2-2.7 8 8 0 0 1-.3-2.4c0-1.3.4-2.4 1.3-3.3-.4-1-.4-2.1 0-3.3.4-.1.9 0 1.5.2a9.8 9.8 0 0 1 2 1 11.6 11.6 0 0 1 6.2 0l.7-.3 1.4-.7c.6-.2 1-.3 1.4-.2.4 1.2.5 2.3 0 3.3 1 .9 1.4 2 1.4 3.3A8 8 0 0 1 20 14a5 5 0 0 1-.8 1.7l-1.3 1c-.6.3-1 .5-1.6.6-.5.2-1 .3-1.6.3.5.5.8 1.3.8 2.3v3.4c0 .2 0 .3.2.5h.7a12.2 12.2 0 0 0 8.5-11.6 12 12 0 0 0-1.7-6.2z" fill="currentColor" fill-rule="evenodd"/></svg> </a> </div> </div> </div> </div> </div> <div class="o-container-xl u-text-gray-400"> <div class="b--u-py-3"> <p class="u-text-p9 u-mb-0 u-pb-0" style="color: inherit;">Copyright © 2024 Text, Inc. All rights reserved</p> <div class="b--u-pt-3"> <p class="u-text-p9 u-mb-0 u-pb-0" style="color: inherit;"> We use cookies and similar technologies to enhance your interactions with our website and Services, including when you reach out to us on chat. This comprises traffic analysis, delivering personalized content, and supporting our marketing efforts. By accessing our website, interacting with our Services, you agree to let us and our partners employ cookies and related technologies on your computer or devices. Click the <a href="/legal/cookies-policy/" class="b--u-text-bold" style="color: inherit;">Cookies Policy</a> to check how you can control the use of cookies through your device. To understand how we process your data, including through cookies, and interactions with us, please read our <a href="/legal/privacy-policy/" class="b--u-text-bold" style="color: inherit;">Privacy Policy</a>. </p> </div> </div> </div> </footer> <script type="text/javascript"> window.process = { env: { DEBUG: undefined }, }; </script> <script src="/help/help.min.4ea877781a1bb2c245e8c5cd2ddd570175c80bb0bc8bf90a9bbbfd97d8ab5b00.js" defer></script> <script async defer src="/dist/js/main.95508e063be5f72a976915dc39ec716d484311c07a3701fab9b4f3789998b373.js"></script> <script> window.__ow = window.__ow || {}; window.__ow.organizationId = "b9c3b2e3-c30b-4ffd-9456-2ef926ae2abd"; window.__ow.template_id = "6039c5f3-63b8-4599-8f53-8253192eff7d"; window.__ow.integration_name = "manual_settings"; window.__ow.product_name = "chatbot"; ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[OpenWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.openwidget.com/staging/openwidget.js",t.head.appendChild(n)}};!n.__ow.asyncInit&&e.init(),n.OpenWidget=n.OpenWidget||e}(window,document,[].slice)) </script> <noscript>You need to <a href="https://www.chatbot.com/help/chat-widget/enable-javascript-in-your-browser/" rel="noopener nofollow">enable JavaScript</a> in order to use the AI chatbot tool powered by <a href="https://www.chatbot.com/" rel="noopener nofollow" target="_blank">ChatBot</a></noscript> </body> </html>