CINXE.COM

<!DOCTYPE html> <html lang="en-us" dir="ltr"><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>Customize your chat widget | LiveChat Help Center</title> <meta name="description" content="See how easy it is to customize your chat widget with LiveChat, maintaining the awareness of your brand among your website visitors!"> <link rel="canonical" href="https://www.livechat.com/help/customize-your-chat/"> <link rel="alternate" hreflang="en-us" href="https://www.livechat.com/help/customize-your-chat/" /> <link rel="alternate" hreflang="x-default" href="https://www.livechat.com/help/customize-your-chat/" /> <script type="application/ld+json"> { "@context": "https://schema.org", "@graph":[{"@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":{"description":"Secure \u0026 user-friendly web communication app. Join over 37,000+ companies from 150 countries that use LiveChat. Try now, chat for free!","name":"LiveChat","url":"https://www.livechat.com"},"contactPoint":{"@type":"ContactPoint","areaServed":"Worldwide","availableLanguage":"English","contactType":"Customer Support"},"description":"AI-powered technology for customer service software","logo":"https://www.livechat.com/icon-512.png","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":{"@type":"Product","aggregateRating":{"@type":"AggregateRating","bestRating":"5","ratingCount":"1675","ratingValue":"4.6","reviewCount":"1675","worstRating":"1"},"name":"LiveChat","offers":{"@type":"AggregateOffer","highPrice":"59","lowPrice":"0","offerCount":"8","priceCurrency":"USD"},"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/livechat","https://www.wikidata.org/wiki/Q1763653","https://en.wikipedia.org/wiki/LiveChat","https://www.youtube.com/livechat"],"url":"https://www.livechat.com"},"url":"https://text.com"},{"@type":"WebPage","description":"See how easy it is to customize your chat widget with LiveChat, maintaining the awareness of your brand among your website visitors!","name":"Customize your chat widget","url":"https://www.livechat.com/help/customize-your-chat/"},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","item":"https://www.livechat.com","name":"Home","position":1},{"@type":"ListItem","item":"https://www.livechat.com/help/","name":"Help Center | LiveChat Support","position":2},{"@type":"ListItem","item":"https://www.livechat.com/help/customize-your-chat/","name":"Customize your chat widget","position":3}]}]} </script> <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml"> <link rel="icon" href="/favicon.ico"> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Customize your chat widget | LiveChat Help Center" /> <meta property="og:description" content="See how easy it is to customize your chat widget with LiveChat, maintaining the awareness of your brand among your website visitors!" /> <meta property="og:url" content="https://www.livechat.com/help/customize-your-chat/" /> <meta property="og:site_name" content="LiveChat" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="See how easy it is to customize your chat widget with LiveChat, maintaining the awareness of your brand among your website visitors!" /> <meta name="twitter:title" content="Customize your chat widget | LiveChat Help Center" /> <meta name="twitter:site" content="@LiveChat" /> <meta property="og:image" content="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-overview.png" /> <meta name="twitter:image" content="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-overview.png" /> <script src="https://cdn.livechatinc.com/partners/tracking/track.js" async></script> <script> dataLayer = [{ 'contentAuthor': 'Krzysztof Kraus', 'contentTTR': 8 , 'contentCategory': 'Use LiveChat', 'contentSubcategory': 'Settings', 'contentDate': '2024-07-10' }]; </script> <script> if ( typeof window.__PRERENDER_INJECTED === "undefined" ) { (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-M6FDC2X'); } </script> <link rel="preload" as="style" href="/dist/css/main.b4f80e70ab5ca9a9e57682a8eaeafd5e93415ac40bd54cb28090368c4a0e4bd6.css"> <link rel="stylesheet" href="/dist/css/main.b4f80e70ab5ca9a9e57682a8eaeafd5e93415ac40bd54cb28090368c4a0e4bd6.css"> <script src="https://tag.clearbitscripts.com/v1/pk_f4416cc27c888d4829d81383402d5730/tags.js" async></script> <script>!function(e){var n="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,n="https://s2.go-mpulse.net/boomerang/";if(window.BOOMR_API_key="8L66E-G78CE-AA2C4-Y3KRA-CM3E6",function(){function e(){if(!o){var e=document.createElement("script");e.id="boomr-scr-as",e.src=window.BOOMR.url,e.async=!0,i.parentNode.appendChild(e),o=!0}}function t(e){o=!0;var n,t,a,r,d=document,O=window;if(window.BOOMR.snippetMethod=e?"if":"i",t=function(e,n){var t=d.createElement("script");t.id=n||"boomr-if-as",t.src=window.BOOMR.url,BOOMR_lstart=(new Date).getTime(),e=e||d.body,e.appendChild(t)},!window.addEventListener&&window.attachEvent&&navigator.userAgent.match(/MSIE [67]\./))return window.BOOMR.snippetMethod="s",void t(i.parentNode,"boomr-async");a=document.createElement("IFRAME"),a.src="about:blank",a.title="",a.role="presentation",a.loading="eager",r=(a.frameElement||a).style,r.width=0,r.height=0,r.border=0,r.display="none",i.parentNode.appendChild(a);try{O=a.contentWindow,d=O.document.open()}catch(_){n=document.domain,a.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",O=a.contentWindow,d=O.document.open()}if(n)d._boomrl=function(){this.domain=n,t()},d.write("<bo"+"dy onload='document._boomrl();'>");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"8L66E-G78CE-AA2C4-Y3KRA-CM3E6";var i=document.currentScript||document.getElementsByTagName("script")[0],o=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!o)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),i.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="bdpnbetilbdjuz2gn37q-f-574758a19-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,o={"ak.v":"39","ak.cp":"940527","ak.ai":parseInt("603696",10),"ak.ol":"0","ak.cr":0,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"4456941","ak.r":40747,"ak.a2":n,"ak.m":"","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":59568,"ak.gh":"104.88.70.111","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732669183","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==9pjNvlOgc2h97yIrzMRK5YZgWbB17K8Q2Ec+NIn+l+/i7Dc0agEd1pCkTQWL6Ep1r9Crb0rKObBpZbBI5ciV3V9HMqQqQ+V4J/tVXQO8i0+fYk6rUSIZDwVsUufVk+7ins7Aq8IRarjTqY/SHgREz3Sg3vNh2d+hURYed7cDl8/0cxX6Zzo475kaNKf8Uuon7DIa0iodK6q0IfqLB2W7EjRvLi6ATctkb0aePFedqrTXCmMAqrzIBtV2HmzS6XV5syk+J8QYstn1F1V1/D6bQkDvBczGoxtPffn09ZZKDYfRPo1sY9J5AbUMylQzQxothHdFV86qxHaWAQ7G3kbDoV+Y3RD+Jq7hj0srTGzclBzsEbjNszs0qzD5NfROuteXNcCYnlBujOeAC6S3Z7hT/hLR5WvAHbwde4ZQN+YoMKY=","ak.pv":"43","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head> <body> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M6FDC2X" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <div class="b--u-py-1 u-bg-accent c-announcement u-hidden" data-controller="announcement" data-namespace="website-livechat"> <div class="o-container u-relative"> <p class="b--u-text-2xs u-text-black u-maxw-6 u-flex u-items-center u-justify-center u-mx-auto u-mb-0 u-relative"> <svg class="u-basis-1 sm:u-basis-auto" width="21" height="21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 2l2.3 2.4c.2.2.3.4.3.7v3c0 .5-.5 1-1 1H5a1 1 0 01-.7-.3L2 6.5a5 5 0 007 5.2 1 1 0 011.2.2l6 6a1.1 1.1 0 001.6-1.6l-6-6a1 1 0 01-.2-1.1A5 5 0 006.5 2zM4.2.8a7 7 0 019.6 8.7l5.5 5.5a3.1 3.1 0 11-4.4 4.4l-5.5-5.5A7 7 0 01.7 4.2a1 1 0 011.6-.3L5.5 7h1.6V5.5L3.9 2.3A1 1 0 014.2.7z" fill="#1B1B20"/></svg> <span class="b--u-ml-1 u-basis-11 sm:u-basis-auto" data-announcement-target="message"></span> </p> </div> </div> <div class="c-navbar v--set-on-mobile u-border-b u-border-gray-900" data-controller="attribute mobile-search" id="main-header"> <div class="c-navbar__content"> <div class="u-basis-10 lg:u-basis-4 xl:u-basis-4 u-flex u-items-center u-justify-start"> <a href="/" class="c-navbar__logo"> <img src="/lc-powered-by-logo.svg" alt="LiveChat logo" class="u-block u-m-0" height="40" width="132"> </a><a href="/help/" class="md:u-hidden b--u-ml-2 b--md:u-ml-4 b--u-text-xs b--u-text-bold u-text-black v--no-underline">Help Center</a> <a href="/help/" class="u-hidden md:u-inline b--u-ml-2 b--md:u-ml-4 b--u-text-sm b--u-text-bold u-text-black v--no-underline">Help Center</a></div><div class="u-hidden lg:u-block u-text-center lg:u-basis-4" data-controller="algolia-search" data-app-id="QWAPZX0OJM" data-search-key="d0a79f4667652e72f2bdf662daa174f6" data-search-index="dev_kb" > <div data-algolia-search-target="search" class="u-maxw-6 u-mx-auto"> <form class="c-search c-compact-form" action="/help/search/" autocomplete="off"> <div class="u-maxw-6 u-mx-auto u-flex"> <input data-algolia-search-target="input" class="c-compact-form__input" placeholder="Search the Help Center" required type="search" name="query"> <button class="c-btn v--primary c-compact-form__button c-search-button" type="submit"></button> </div> </form> </div> <div data-algolia-search-target="results" class="c-search__results c-search__results--absolute v--independent u-shadow-lg u-rounded"></div> </div> <script id="search-results-item" type="template"> <a href="{{ relpermalink }}" class="c-search__result b--u-px-4 b--u-m-0.5 b--u-py-1.5 u-text-left v--no-underline"> <h2 class="c-link b--u-text-base b--u-text-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 b--u-text-xs b--u-text-bold b--u-mr-2 u-inline-flex u-items-center"> <span class="u-text-gray-600 b--u-mr-2">Live Chat</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 b--u-text-xs b--u-text-bold b--u-mr-2 u-inline-flex u-items-center"> <span class="u-text-gray-600 b--u-mr-2">{{ 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">No results</span> </script> <form action="/help/search/" method="GET" class="lg:u-hidden c-search c-navbar__search c-compact-form v--overlay" autocomplete="off" > <div class="u-maxw-5 u-mx-auto lg:u-flex u-flex-col sm:u-flex-row"> <input type="search" name="query" class="b--u-mb-1 sm:u-mb-0 c-compact-form__input c-navbar__search__input c-navbar-search-button" placeholder="Search the Help Center" required data-mobile-search-target="input"> <button type="submit" class="c-btn v--primary c-compact-form__button c-navbar-search-button u-hidden lg:u-inline-block" title="Search"></button> </div> </form><button class="c-navbar__button" aria-expanded="false" data-action="attribute#toggleHidden" data-mobile-search-target="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 data-attribute-target="element"> <ul class="c-navbar__list lg:u-hidden"><li class="c-navbar__item"> <a href="/help/install-livechat/" class="c-navbar__link v--has-dropdown">Install LiveChat</a><ul class="c-navbar__sublist"><li><a href="/help/install-livechat/#install-livechat-using-the-code-snippet" class="c-navbar__sublink">Install LiveChat with code</a></li><li><a href="/help/install-livechat/#install-livechat-using-integrations" class="c-navbar__sublink">Install LiveChat with integrations</a></li></ul></li><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/#livechat-basics" class="c-navbar__sublink">LiveChat basics</a></li><li><a href="/help/get-started/#manage-billing-payments-and-plans" class="c-navbar__sublink">Manage billing, payments, and plans</a></li><li><a href="/help/get-started/#web-desktop-and-mobile-applications" class="c-navbar__sublink">Web, desktop, and mobile applications</a></li></ul></li><li class="c-navbar__item"> <a href="/help/use-livechat/" class="c-navbar__link v--has-dropdown">Use LiveChat</a><ul class="c-navbar__sublist"><li><a href="/help/use-livechat/#agents-and-groups" class="c-navbar__sublink">Agents</a></li><li><a href="/help/use-livechat/#chats-and-archives" class="c-navbar__sublink">Chats and Archives</a></li><li><a href="/help/use-livechat/#customers" class="c-navbar__sublink">Customers</a></li><li><a href="/help/use-livechat/#reports" class="c-navbar__sublink">Reports </a></li><li><a href="/help/use-livechat/#settings" class="c-navbar__sublink">Settings</a></li><li><a href="/help/use-livechat/#tickets" class="c-navbar__sublink">Tickets</a></li></ul></li><li class="c-navbar__item"> <a href="/help/apps-and-integrations/" class="c-navbar__link v--has-dropdown">Apps and integrations</a><ul class="c-navbar__sublist"><li><a href="/help/apps-and-integrations/#chatbot" class="c-navbar__sublink">ChatBot</a></li><li><a href="/help/apps-and-integrations/#integrations" class="c-navbar__sublink">Integrations</a></li><li><a href="/help/apps-and-integrations/#knowledgebase" class="c-navbar__sublink">KnowledgeBase</a></li><li><a href="/help/apps-and-integrations/#social-media-and-messaging" class="c-navbar__sublink">Social media and messaging</a></li></ul></li><li class="c-navbar__item"> <a href="/help/best-practices/" class="c-navbar__link v--has-dropdown">Best practices</a><ul class="c-navbar__sublist"><li><a href="/help/best-practices/#faq-and-troubleshooting" class="c-navbar__sublink">FAQ and troubleshooting</a></li><li><a href="/help/best-practices/#tips-and-tricks" class="c-navbar__sublink">Tips and tricks</a></li><li><a href="/help/best-practices/#tools" class="c-navbar__sublink">Tools</a></li></ul></li><li class="c-navbar__item"> <a href="/help/privacy-and-security/" class="c-navbar__link v--has-dropdown">Privacy and security</a><ul class="c-navbar__sublist"><li><a href="/help/privacy-and-security/#privacy" class="c-navbar__sublink">Privacy</a></li><li><a href="/help/privacy-and-security/#security" class="c-navbar__sublink">Security</a></li></ul></li></ul> <div class="c-navbar__mobile-actions" data-controller="attribute logged-in" data-attribute-add-class="u-hidden" data-action="logged-in:loggedIn->attribute#addClass"> <a href="https://my.livechatinc.com" class="c-btn v--secondary v--sm" data-controller="track" 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?source_id=mobile_menu&source_url=&source_type=website" class="c-btn v--signup v--sm" data-controller="track" data-track-category="Signup" data-track-action="Signup Redirect" data-action="track#send">Sign up free</a> </div> <div class="c-navbar__mobile-actions u-hidden" data-controller="attribute logged-in" data-attribute-remove-class="u-hidden" data-action="logged-in:loggedIn->attribute#removeClass"> <a href="https://my.livechatinc.com" class="c-btn v--secondary v--sm">Go to app</a> <a href="https://accounts.livechat.com/signup?source_id=mobile_menu&source_url=&source_type=website" class="c-btn v--signup v--sm" data-controller="track" data-track-category="Personalised Web" data-track-action="Upgrade (Mobile header)" data-action="track#send">Upgrade</a> </div> <div class="lg:u-hidden u-text-center b--u-mb-3"> <a href="https://www.livechat.com/pricing/" class="b--u-text-sm b--u-text-bold b--u-mr-2 u-text-black v--no-underline">Pricing</a> </div> </div> <div class="c-navbar__actions u-basis-4 u-items-center u-justify-end" data-controller="attribute logged-in" data-attribute-add-class="u-hidden" data-action="logged-in:loggedIn->attribute#addClass"> <a href="https://www.livechat.com/pricing/" class="b--u-text-sm b--u-text-bold b--u-mr-2 u-text-black v--no-underline">Pricing</a> <a href="https://my.livechatinc.com" class="c-btn v--secondary v--sm" data-controller="track" 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?source_id=header_cta&source_url=&source_type=website" class="c-btn v--signup v--sm" data-controller="track" data-track-category="Signup" data-track-action="Signup Redirect" data-action="track#send">Sign up free</a> </div> <div class="c-navbar__actions u-items-center u-justify-end u-hidden" data-controller="attribute logged-in" data-attribute-remove-class="u-hidden" data-action="logged-in:loggedIn->attribute#removeClass"> <a href="https://www.livechat.com/pricing/" class="b--u-text-sm b--u-text-bold b--u-mr-2 u-text-black v--no-underline">Pricing</a> <div class="u-hidden lg:u-hidden lg:u-ml-auto" data-controller="attribute logged-in" data-attribute-remove-class="lg:u-hidden" data-attribute-add-class="lg:u-block" data-action="logged-in:loggedIn->attribute#removeClass logged-in:loggedIn->attribute#addClass"> <div class="u-hidden lg:u-flex u-flex-row u-items-center gap-1"> <a href="https://my.livechatinc.com" class="c-btn v--sm b--u-py-1.5 v--secondary " data-controller="track" data-track-category="Log In Button" data-track-action="Top Nav" data-track-label="Instant Login" data-action="track#send">Go to app</a> <div class="c-navbar__actions u-hidden" data-controller="attribute logged-in" data-attribute-remove-class="u-hidden" data-action="logged-in:loggedInWithUserData->attribute#removeClass"> <div class="t-homepage-menu" data-controller="click-focus"> <button data-action="click-focus#toggleFocusClass" class="t-homepage-menu-button c-btn u-p-1 u-rounded u-flex u-items-center v--transparent u-border-none hover:u-bg-gray-900 "> <img data-logged-in-target="avatar" src="/images/user-avatar.370edf4b344b55dcfcaea4f1f214d235b9bbfdea238dc609ef52d7b65c355d75.svg" alt="" class="t-homepage-user-icon u-round b--u-mr-1" style="width: 32px; height: 32px; object-fit: cover;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.6666 6L7.99992 10.6667L3.33325 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div class="t-homepage-menu-content b--u-bg-white u-shadow"> <div class="b--u-m-2 u-flex gap-1 u-items-center"> <div><img data-logged-in-target="avatar" src="/images/user-avatar.370edf4b344b55dcfcaea4f1f214d235b9bbfdea238dc609ef52d7b65c355d75.svg" alt="" class="t-homepage-user-icon u-round" style="width: 38px; height: 38px; object-fit: cover"></div> <div> <div data-logged-in-target="name" class="b--u-text-md b--u-text-bold">User Name</div> <div data-logged-in-target="email" class="b--u-text-xs"></div> </div> </div> <div style="width:100%; margin-top:10px; margin-bottom:4px; border-bottom:1px solid #eaeaec;"></div> <a href="https://my.livechatinc.com/subscription/?source_id=user_menu&source_url=https%3A%2F%2Fwww.livechat.com%2fhelp%2fcustomize-your-chat%2f&source_type=website" class="c-menu__item u-flex u-items-center b--u-bg-transparent u-w-full hover:u-bg-gray-900 "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="b--u-mr-1"> <g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#clip0_1731_971)"> <path d="M9 12H5.4a1 1 0 0 1-.7-1.7l6.6-6.6a1 1 0 0 1 1.4 0l6.6 6.6a1 1 0 0 1-.7 1.7H15v6H9v-6ZM9 21h6" /> </g> <defs> <clipPath id="clip0_1731_971"> <path fill="#fff" d="M0 0h24v24H0z" /> </clipPath> </defs> </svg> Upgrade</a> <a href="/help/" class="c-menu__item u-flex u-items-center b--u-bg-transparent u-w-full hover:u-bg-gray-900 "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="b--u-mr-1"> <g stroke="#1B1B20" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#clip0_2_3853)"> <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM12 17v0" /> <path d="M12 13.5a1.5 1.5 0 0 1 1-1.5 2.6 2.6 0 1 0-3-4" /> </g> <defs> <clipPath id="clip0_2_3853"> <path fill="#fff" d="M0 0h24v24H0z" /> </clipPath> </defs> </svg> Help Center</a> <button class="c-menu__item u-flex u-items-center b--u-bg-transparent u-w-full hover:u-bg-gray-900 " data-action="click-focus#removeFocusClass" onclick="LC_API.open_chat_window();return false;"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="b--u-mr-1"> <g clip-path="url(#clip0_2_4566)"> <path stroke="#1B1B20" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 20 1.3-3.9a7.3 7.3 0 0 1-1.1-5.5c.3-2 1.5-3.7 3.2-4.9a9.8 9.8 0 0 1 11.8.5 7.4 7.4 0 0 1 1 10.5 9.2 9.2 0 0 1-5.2 3 10 10 0 0 1-6.3-.7L3 20" /> <path fill="#1B1B20" fill-rule="evenodd" d="M12.3 11c.6 0 1.2.6 1.2 1.3a1.2 1.2 0 1 1-2.5 0c0-.7.6-1.3 1.3-1.3ZM7.7 11c.7 0 1.3.6 1.3 1.2a1.2 1.2 0 0 1-2.5 0c0-.6.6-1.2 1.2-1.2ZM16.8 11c.6 0 1.2.6 1.2 1.3a1.2 1.2 0 1 1-2.5 0c0-.7.6-1.3 1.3-1.3Z" clip-rule="evenodd" /> </g> <defs> <clipPath id="clip0_2_4566"> <path fill="#fff" d="M0 0h24v24H0z" /> </clipPath> </defs> </svg> Chat with us</button> <button class="c-menu__item u-flex u-items-center b--u-bg-transparent u-w-full hover:u-bg-gray-900 " data-controller="logged-in" data-action="logged-in#logout"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="b--u-mr-1"> <g stroke="#1B1B20" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#clip0_2_4402)"> <path d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2M7 12h14m0 0-3-3m3 3-3 3" /> </g> <defs> <clipPath id="clip0_2_4402"> <path fill="#fff" d="M0 0h24v24H0z" /> </clipPath> </defs> </svg> Logout</button> </div> </div> </div> </div> </div> </div> </div> </div> <ul class="c-navbar__list u-hidden lg:u-flex u-justify-center b--u-py-2 u-border-b u-border-gray-900 b--u-mb-8"><li class="c-navbar__item"> <a href="/help/install-livechat/" class="c-navbar__link v--has-dropdown">Install LiveChat</a><ul class="c-navbar__sublist"><li><a href="/help/install-livechat/#install-livechat-using-the-code-snippet" class="c-navbar__sublink">Install LiveChat with code</a></li><li><a href="/help/install-livechat/#install-livechat-using-integrations" class="c-navbar__sublink">Install LiveChat with integrations</a></li></ul></li><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/#livechat-basics" class="c-navbar__sublink">LiveChat basics</a></li><li><a href="/help/get-started/#web-desktop-and-mobile-applications" class="c-navbar__sublink">Web, desktop, and mobile applications</a></li><li><a href="/help/get-started/#manage-billing-payments-and-plans" class="c-navbar__sublink">Manage billing, payments, and plans</a></li></ul></li><li class="c-navbar__item"> <a href="/help/use-livechat/" class="c-navbar__link v--has-dropdown">Use LiveChat</a><ul class="c-navbar__sublist"><li><a href="/help/use-livechat/#chats-and-archives" class="c-navbar__sublink">Chats and Archives</a></li><li><a href="/help/use-livechat/#customers" class="c-navbar__sublink">Customers</a></li><li><a href="/help/use-livechat/#tickets" class="c-navbar__sublink">Tickets</a></li><li><a href="/help/use-livechat/#agents-and-groups" class="c-navbar__sublink">Agents</a></li><li><a href="/help/use-livechat/#reports" class="c-navbar__sublink">Reports </a></li><li><a href="/help/use-livechat/#settings" class="c-navbar__sublink">Settings</a></li></ul></li><li class="c-navbar__item"> <a href="/help/apps-and-integrations/" class="c-navbar__link v--has-dropdown">Apps and integrations</a><ul class="c-navbar__sublist"><li><a href="/help/apps-and-integrations/#social-media-and-messaging" class="c-navbar__sublink">Social media and messaging</a></li><li><a href="/help/apps-and-integrations/#chatbot" class="c-navbar__sublink">ChatBot</a></li><li><a href="/help/apps-and-integrations/#knowledgebase" class="c-navbar__sublink">KnowledgeBase</a></li><li><a href="/help/apps-and-integrations/#integrations" class="c-navbar__sublink">Integrations</a></li></ul></li><li class="c-navbar__item"> <a href="/help/best-practices/" class="c-navbar__link v--has-dropdown">Best practices</a><ul class="c-navbar__sublist"><li><a href="/help/best-practices/#tips-and-tricks" class="c-navbar__sublink">Tips and tricks</a></li><li><a href="/help/best-practices/#tools" class="c-navbar__sublink">Tools</a></li><li><a href="/help/best-practices/#faq-and-troubleshooting" class="c-navbar__sublink">FAQ and troubleshooting</a></li></ul></li><li class="c-navbar__item"> <a href="/help/privacy-and-security/" class="c-navbar__link v--has-dropdown">Privacy and security</a><ul class="c-navbar__sublist"><li><a href="/help/privacy-and-security/#privacy" class="c-navbar__sublink">Privacy</a></li><li><a href="/help/privacy-and-security/#security" class="c-navbar__sublink">Security</a></li></ul></li></ul> <div class="o-container"> <div class="u-flex u-justify-between b--u-my-3"><ul class="u-hidden sm:u-block c-list u-pl-0"> <li class="u-inline-block b--u-text-xs b--u-text-bold b--u-mr-2 u-inline-flex u-items-center"> <a href="/help/" class="u-text-gray-600 b--u-mr-2">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 b--u-text-xs b--u-text-bold b--u-mr-2 u-inline-flex u-items-center"> <a href="/help/use-livechat/" class="u-text-gray-600 b--u-mr-2">Use LiveChat</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 b--u-text-xs b--u-text-bold b--u-mr-2"> <a href="/help/use-livechat/#settings" class="u-text-black">Settings</a> </li></ul><div class="sm:u-hidden u-pl-0"> <a href="/help/use-livechat/#settings" class="b--u-text-sm u-text-primary">« Settings</a> </div><div class="c-share u-inline-block" tabindex="-1"> <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="b--u-text-xs b--u-px-3">Share this article on:</p> <button class="c-share__button" data-title="Customize your chat widget" data-sharer="facebook" data-url="https://www.livechat.com/help/customize-your-chat/" 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="Customize your chat widget" data-url="https://www.livechat.com/help/customize-your-chat/"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"> <g clip-path="url(#a)"> <path fill="#000" d="M16.27 16 9.872 6.675l.01.009L15.652 0h-1.927L9.025 5.44 5.295 0H.24l5.972 8.706H6.21L-.087 16H1.84l5.223-6.052L11.214 16h5.055ZM4.53 1.455l8.976 13.09h-1.528L2.996 1.456h1.535Z"/> </g> <defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs> </svg> <span>X (Twitter)</span> </button> <button class="c-share__button" data-sharer="linkedin" data-title="Customize your chat widget" data-url="https://www.livechat.com/help/customize-your-chat/"> <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="Customize your chat widget" data-url="https://www.livechat.com/help/customize-your-chat/" 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="b--u-pt-2 u-border-t c-copy-button" data-controller="copy-button"> <a href="#" class="c-share__button b--u-pl-4 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 b--u-text-xs" data-copy-button-target="success">Link copied to the clipboard</span> <textarea data-copy-button-target="text" readonly class="c-copy-button__textarea">https://www.livechat.com/help/customize-your-chat/</textarea> </div> </div> </div> </div> </div> </div> <span itemscope itemtype="https://schema.org/Article"> <meta itemprop="headline" content="Customize your chat widget"> <meta itemprop="datePublished" content='2018-07-23T09:12:34Z'> <meta itemprop="dateModified" content='2024-07-10T14:15:46+02:00'> <meta itemprop="author" content="Krzysztof Kraus"> <meta itemprop="articleSection" content="Use LiveChat"> <meta itemprop="articleSection" content="Settings"> <meta itemprop="articleBody" content="At LiveChat, we know how important it is to maintain the awareness of your brand among customers. That’s why each LiveChat account comes pre-equipped with a powerful yet easy to use chat widget configurator. With just a few easy steps, you can not only change the looks of your chat window but also tweak the behaviour of your widget, for example by disabling it for customers visiting your website from mobile devices. And all of that without using any additional CSS or JavaScript configuration! So, without further ado, let’s dive in and see how you can use the chat widget configurator to your advantage. Customize your chat widget: how to? - learn how to use the chat widget configurator; Customize your chat widget: available options - learn what customization options are available in chat widget configurator; Customize your chat widget: how to? To start customizing your chat, go to the Settings → Chat window → Customization. If you&rsquo;re using Groups at LiveChat, choose the group for which you&rsquo;d like to customize your chat widget. Now, choose which element of the chat widget you would like to customize. You can, for example, choose a Ready sets of colors for your chat window. When customizing your chat widget, take a look at the Preview section located on the right side of the screen. You can see all changes reflected in real-time, before applying them to your website. Preview feature provides separate views for both desktop and mobile devices. If you&rsquo;re done with your chat widget configuration, simply hit Save changes, available at the bottom of the configurator. This will apply all changes to your website. And that&rsquo;s it! So, now that you know how to use the chat widget configurator, let us review each option that it has to offer. Live Editor The live editor allows you to seamlessly match chat window looks and position with your website. You can use it to safely test your design on a live website without the need to save it and make it visible to the public. You can adjust: Light and dark mode Colors Chat widget theme for maximized and minimized states Position, including alignment and spacings How to use the configurator 1 Enter Settings -&gt; Chat widget -&gt; Customization. 2 Select Customize on website. 3 Enter URL address of the website you want to edit the widget on. If LiveChat is already installed on a website, its address will populate automatically. 4 Select Go to website to proceed. 5 Edit the chat widget looks using settings available on the Live Editor. Preview your modifications on the widget visible on the website. 6 If you want to keep your new setup select Save. Otherwise, select Undo changes. And that’s it! Go and experiment with your designs directly on your website! Customize your chat widget: available options Looking for a custom chat widget theme for your website? Our recommended partners can develop one for you. Looking for a custom chat widget theme for your website? Our recommended partners can develop one for you. Appearance Choose your minimized theme Chat window gives you the option to change the style of the minimized window. Choose between a simple yet functional Bar and a modern and minimalistic Bubble! Pick your color Select Theme color to use one of our predefined sets. If you want to edit the accent color, click on the first option on the right. A color picker will pop-up. We also realize that each website is different. That is why, in addition to the prefabricated sets of colors, you can choose any combination that suits you. Click on More color settings to create your own color scheme. You are able to change the color of both minimized and maximized widget elements, either by providing a hexadecimal representation or by using our built-in color picker! Dark mode The dark mode makes your widget display texts in white color on a dark background. It affects all of the widget elements, including rich messages and forms. Toggle the Dark mode switch to set the dark mode for your chat window. Position Widget position Decide where the chat widget should be placed on your website. You can choose between left and right. It is also possible to define the spacing between your chat widget and corresponding bottom and side edges. Visibility Control when to display the chat widget icon on your website. If you want to learn more about the differences between the options described below head to our article on Chat widget visibility. The chat widget is always visible. The widget icon on your site is always visible so your customers can start a chat by clicking on it. Our partners offer a wide range of services that can increase your chat widget engagement. Check out the engagement health check and other services you can benefit from. Our partners offer a wide range of services that can increase your chat widget engagement. Check out the engagement health check and other services you can benefit from. Hide widget until it gets activated This option allows you to keep your chat widget hidden until it gets activated via: a greeting, an interaction with a custom start chat button added to your website, or an open chat window API method. Once a chat starts, a customer can initiate a conversation by clicking on the chat widget icon as well. Always hide minimized widget icon The widget icon is never displayed, hence your visitor can’t initiate a chat by clicking on it. Chats can start when either a visitor interacts with a custom start chat button added to your website, or if you implemented an open chat window API method, that builds a custom mechanism responsible for opening a chat. Mobile chat widget In this section, you can control if you want to Show your chat widget on mobile (this option is turned on by default). Once you turn it off (the switch button will grey out) your mobile users won’t be able to chat with you. If you decide to have it displayed on mobile, you can choose to have it appear Same as on desktop. If you want your chat widget to be displayed differently on mobile devices (than on desktop) select Custom for mobile devices. You can customize Mobile widget type, position on screen and visibility (read more about Chat widget visibility). Additional tweaks With additional tweaks, we want to bring you the possibility to change the behaviour of your chat window, without modifying LiveChat script added to the source code of your website. And what exactly can you modify? As there are quite a few options, we will go through each of them below. Show logo - you can upload your own logo that will be displayed in the top right corner, next to agent’s details (note that it will only be visible in tickets if you use the Smooth theme). Tickets mentioned in this article refer to the old LiveChat ticketing system available to new customers until June 1, 2023. If you’re using HelpDesk tickets, please refer to the HelpDesk email template article. If you’re not, add the best ticketing system to your LiveChat! Tickets mentioned in this article refer to the old LiveChat ticketing system available to new customers until June 1, 2023. If you’re using HelpDesk tickets, please refer to the HelpDesk email template article. If you’re not, add the best ticketing system to your LiveChat! Show agent’s photo – decide whether you&rsquo;d like to display your agent&rsquo;s photo during a chat and in the chat bubble, after your customer will minimize the chat window or receive a greeting. Enable sound notifications for customers – by default, your customers will be notified about a new greeting and a new message received in a chat by a sound notification. This should get their attention whenever they, for example, minimized their browser while talking with your agents. However, if you&rsquo;d like to disable those sound notifications, simply switch this option off. Your customers can also mute the sounds of the chat widget themselves! They can do this by clicking on the Mute button, available under three little dots in the chat widget. Your customers can also mute the sounds of the chat widget themselves! They can do this by clicking on the Mute button, available under three little dots in the chat widget. Let customers rate agents – with this option, you can decide whether your customers can rate your agents during or after the chat. Let customers get chat transcripts – turn on this option to give your customers the possibility to request the transcript of their current chat. The chat transcript will be sent to their email. Your customers can receive the transcript by clicking on the Send transcript button, available under three little dots in the chat widget. Your customers can receive the transcript by clicking on the Send transcript button, available under three little dots in the chat widget. To make sure that the transcripts are sent only to the customers who want them, we send a verification email to customers requesting a transcript for the first time. Once their email address is verified, the requested transcripts are sent immediately. As to this tutorial, that&rsquo;s it for now! If you have any questions or feature requests, feel free to start a chat with us. Our Support Heroes are available 24/7/365! "> </span> <div data-controller="amplitude-scroll" style="overflow-x: clip;" itemscope itemtype="http://schema.org/HowTo"> <article data-controller="scroll-spy is-sticky-toc"> <div class="u-flex u-w-full b--u-mx-auto b--u-mb-6 lg:u-mb-0 u-justify-between" style="max-width: 72.5rem;"> <div data-scroll-spy-target="article" class="c-hc-article"> <div class="o-container"> <h1 class="b--u-mb-4 b--md:u-mb-8" itemprop="name"><span class="b--u-text-3xl">Customize your chat widget</span></h1> <div class="u-flex u-flex-wrap b--u-pb-6 b--md:u-pb-8 b--lg:u-pb-12"><div class="u-flex u-items-center u-basis-12 md:u-basis-auto b--u-mr-3 b--u-mb-3 md:u-mb-0"><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_48,h_48,c_fill/help/kraus.png" srcset="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_96,h_96,c_fill/help/kraus.png 2x" class="u-w-fit b--u-mr-2 u-ml-0 u-round" width="48"><div>Krzysztof Kraus</div> </div><div class="u-flex u-items-center b--u-mr-3 b--sm:u-mr-4"> <img src="/help/icons/time.svg" class="u-w-fit b--u-mr-1 u-ml-0 u--mt-3xs" alt="" width="20"> <span>8 min read</span> </div> <div class="u-flex u-items-center"> <img src="/help/icons/update.svg" class="u-w-fit b--u-mr-1 u-ml-0 u--mt-3xs" alt="" width="20"> <span>updated: Jul 10, 2024</span> </div> </div> </div> <aside data-is-sticky-toc-target="stickyElement" class="c-toc lg:u-basis-4 b--lg:u-pl-3 b--u-pb-3 lg:u-hidden" style="position: sticky; top: 0; z-index: 1; overflow-y: clip;"> <div class="b--lg:u-py-4 lg:u--my-xl u-border-gray-900"> <div data-controller="attribute" class="c-toc--mobile b--xl:u-pr-4"> <h3 id="hc-toc-heading" class="u-relative u-mb-0" style="z-index: 2;"><button data-action="click->attribute#toggleClass" class="b--u-text-base b--u-text-bold b--lg:u-pl-3 u-mb-0 u-text-gray-300 b--u-p-2 b--u-bg-white u-border-b u-border-gray-800 u-w-full u-text-left" style="cursor: pointer;">Table of contents</button></h3> <div data-scroll-spy-target="list" data-action="click->attribute#toggleClass" data-attribute-target="element" data-attribute-toggle-class="v--active" class="c-toc--mobile__wrap b--u-bg-white b--u-p-1 u-border-b v--active"> <nav id="TableOfContents"> <ul> <li><a href="#how-to-use">Customize your chat widget: how to?</a></li> <li><a href="#live-editor">Live Editor</a></li> <li><a href="#what-options">Customize your chat widget: available options</a></li> </ul> </nav> </div> </div> </div> </aside> <div class="c-hc-article-content o-container b--u-text-base c-hc-article-content--first"> <p>At LiveChat, we know how important it is to maintain the awareness of your brand among customers. That’s why each LiveChat account comes pre-equipped with a powerful yet easy to use chat widget configurator.</p> <div class="o-fluid-video b--u-mt-8 b--u-mb-12"> <iframe src="https://www.youtube.com/embed/srcAWHX8M9M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <p>With just a few easy steps, you can not only change the looks of your chat window but also tweak the behaviour of your widget, for example by disabling it for customers visiting your website from mobile devices. And all of that <strong>without using any additional CSS or JavaScript configuration!</strong> So, without further ado, let’s dive in and see how you can use the chat widget configurator to your advantage.</p> <ul> <li><strong><a href="#how-to-use">Customize your chat widget: how to?</a></strong> - learn how to use the chat widget configurator;</li> <li><strong><a href="#what-options">Customize your chat widget: available options</a></strong> - learn what customization options are available in chat widget configurator;</li> </ul> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-overview.png" alt="Chat widget configurator overview" title="Chat-widget-configurator-overview"></p> <h2 id="how-to-use">Customize your chat widget: how to?<a href="#how-to-use" 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.livechat.com/help/customize-your-chat/#how-to-use" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-clipboard-target="source" tabindex="-1" /></a></h2> <p>To start customizing your chat, go to the Settings → Chat window → <a href="https://my.livechatinc.com/settings/theme">Customization</a>.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-configurator-go-to-chat-widget-settings.png" alt="Chat widget configurator: go to chat widget settings" title="Chat-configurator-go-to-chat-widget-settings"></p> <ol start="2"> <li>If you’re using Groups at LiveChat, <strong>choose the group</strong> for which you’d like to customize your chat widget.</li> </ol> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-choose-a-group.png" alt="Chat widget configurator: choose a group" title="Chat-widget-configurator-choose-a-group"></p> <ol start="3"> <li>Now, <strong>choose which element of the chat widget</strong> you would like to customize. You can, for example, choose a <strong>Ready sets of colors</strong> for your chat window.</li> </ol> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-choose-what-you-want-to-edit.png" alt="Chat widget configurator: choose what you want to edit" title="Chat-widget-configurator-choose-what-you-want-to-edit"></p> <ol start="4"> <li>When customizing your chat widget, take a look at the <strong>Preview</strong> section located on the right side of the screen. You can see all changes reflected <strong>in real-time</strong>, before applying them to your website. Preview feature provides <strong>separate views for both desktop and mobile devices</strong>.</li> </ol> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-preview-changes.png" alt="Chat widget configurator: preview changes" title="Chat-widget-configurator-preview-changes"></p> <ol start="5"> <li>If you’re done with your chat widget configuration, simply hit <strong>Save changes</strong>, available at the bottom of the configurator. This will apply all changes to your website.</li> </ol> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-save-changes.png" alt="Chat widget configurator: save changes" title="Chat-widget-configurator-save-changes"></p> <p>And that’s it! So, now that you know how to use the chat widget configurator, <strong>let us review each option that it has to offer.</strong></p> <h2 id="live-editor">Live Editor<a href="#live-editor" 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.livechat.com/help/customize-your-chat/#live-editor" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-clipboard-target="source" tabindex="-1" /></a></h2> <p>The live editor allows you to seamlessly match chat window looks and position with your website. You can use it to safely test your design on a live website without the need to save it and make it visible to the public.</p> <p>You can adjust:</p> <ul> <li>Light and dark mode</li> <li>Colors</li> <li>Chat widget theme for maximized and minimized states</li> <li>Position, including alignment and spacings</li> </ul> <h3 id="how-to-use-the-configurator">How to use the configurator<a href="#how-to-use-the-configurator" 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.livechat.com/help/customize-your-chat/#how-to-use-the-configurator" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-clipboard-target="source" tabindex="-1" /></a></h3> </div><div class="c-hc-article-content o-container b--u-my-4 lg:u-basis-12 c-progress" data-controller="tour"><div class="c-tour b--u-mb-12"> <div class="c-progress__steps"><div class="u-flex u-items-stretch b--u-mb-3" itemprop="step" itemscope itemtype="http://schema.org/HowToStep" id="manual-%!s(int=5)-step-1"> <meta itemprop="url" content="https://www.livechat.com/help/customize-your-chat/#manual-%!s(int=5)-step-1"/> <meta itemprop="position" content="1"/><meta itemprop="image" content="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site1.png"> <span class="b--u-text-2xl u-font-normal u-text-center u-basis-1 b--u-mr-1.5">1</span> <div class="u-basis-11 u-w-full u-flex u-items-center u--mb-sm"> <div class="u-w-full" itemprop="text">Enter <strong>Settings</strong> -> <strong>Chat widget</strong> -> <strong>Customization</strong>.</div> </div> </div></div><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site1.png" srcset="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_1308,c_limit/help/On_site1.png 2x" alt="" class="c-progress__image u-border u-border-gray-800 u-rounded-sm"> </div><div class="c-tour b--u-mb-12"> <div class="c-progress__steps"><div class="u-flex u-items-stretch b--u-mb-3" itemprop="step" itemscope itemtype="http://schema.org/HowToStep" id="manual-%!s(int=5)-step-2"> <meta itemprop="url" content="https://www.livechat.com/help/customize-your-chat/#manual-%!s(int=5)-step-2"/> <meta itemprop="position" content="2"/><meta itemprop="image" content="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site2.png"> <span class="b--u-text-2xl u-font-normal u-text-center u-basis-1 b--u-mr-1.5">2</span> <div class="u-basis-11 u-w-full u-flex u-items-center u--mb-sm"> <div class="u-w-full" itemprop="text"><p>Select <strong>Customize on website</strong>.</p> </div> </div> </div></div><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site2.png" srcset="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_1308,c_limit/help/On_site2.png 2x" alt="" class="c-progress__image u-border u-border-gray-800 u-rounded-sm"> </div><div class="c-tour b--u-mb-12"> <div class="c-progress__steps"><div class="u-flex u-items-stretch b--u-mb-3" itemprop="step" itemscope itemtype="http://schema.org/HowToStep" id="manual-%!s(int=5)-step-3"> <meta itemprop="url" content="https://www.livechat.com/help/customize-your-chat/#manual-%!s(int=5)-step-3"/> <meta itemprop="position" content="3"/><meta itemprop="image" content="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site3.png"> <span class="b--u-text-2xl u-font-normal u-text-center u-basis-1 b--u-mr-1.5">3</span> <div class="u-basis-11 u-w-full u-flex u-items-center u--mb-sm"> <div class="u-w-full" itemprop="text">Enter URL address of the website you want to edit the widget on. If LiveChat is already installed on a website, its address will populate automatically.</div> </div> </div></div><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site3.png" srcset="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_1308,c_limit/help/On_site3.png 2x" alt="" class="c-progress__image u-border u-border-gray-800 u-rounded-sm"> </div><div class="c-tour b--u-mb-12"> <div class="c-progress__steps"><div class="u-flex u-items-stretch b--u-mb-3" itemprop="step" itemscope itemtype="http://schema.org/HowToStep" id="manual-%!s(int=5)-step-4"> <meta itemprop="url" content="https://www.livechat.com/help/customize-your-chat/#manual-%!s(int=5)-step-4"/> <meta itemprop="position" content="4"/><meta itemprop="image" content="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site4.png"> <span class="b--u-text-2xl u-font-normal u-text-center u-basis-1 b--u-mr-1.5">4</span> <div class="u-basis-11 u-w-full u-flex u-items-center u--mb-sm"> <div class="u-w-full" itemprop="text"><p>Select <strong>Go to website</strong> to proceed.</p> </div> </div> </div></div><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site4.png" srcset="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_1308,c_limit/help/On_site4.png 2x" alt="" class="c-progress__image u-border u-border-gray-800 u-rounded-sm"> </div><div class="c-tour b--u-mb-12"> <div class="c-progress__steps"><div class="u-flex u-items-stretch b--u-mb-3" itemprop="step" itemscope itemtype="http://schema.org/HowToStep" id="manual-%!s(int=5)-step-5"> <meta itemprop="url" content="https://www.livechat.com/help/customize-your-chat/#manual-%!s(int=5)-step-5"/> <meta itemprop="position" content="5"/><meta itemprop="image" content="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site5.png"> <span class="b--u-text-2xl u-font-normal u-text-center u-basis-1 b--u-mr-1.5">5</span> <div class="u-basis-11 u-w-full u-flex u-items-center u--mb-sm"> <div class="u-w-full" itemprop="text">Edit the chat widget looks using settings available on the Live Editor. Preview your modifications on the widget visible on the website.</div> </div> </div></div><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site5.png" srcset="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_1308,c_limit/help/On_site5.png 2x" alt="" class="c-progress__image u-border u-border-gray-800 u-rounded-sm"> </div><div class="c-tour b--u-mb-12"> <div class="c-progress__steps"><div class="u-flex u-items-stretch b--u-mb-3" itemprop="step" itemscope itemtype="http://schema.org/HowToStep" id="manual-%!s(int=5)-step-6"> <meta itemprop="url" content="https://www.livechat.com/help/customize-your-chat/#manual-%!s(int=5)-step-6"/> <meta itemprop="position" content="6"/><meta itemprop="image" content="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site6.png"> <span class="b--u-text-2xl u-font-normal u-text-center u-basis-1 b--u-mr-1.5">6</span> <div class="u-basis-11 u-w-full u-flex u-items-center u--mb-sm"> <div class="u-w-full" itemprop="text">If you want to keep your new setup select <strong>Save</strong>. Otherwise, select <strong>Undo changes</strong>.</div> </div> </div></div><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_654,c_limit/help/On_site6.png" srcset="https://res.cloudinary.com/dn1j6dpd7/image/upload/w_1308,c_limit/help/On_site6.png 2x" alt="" class="c-progress__image u-border u-border-gray-800 u-rounded-sm"> </div></div> <div class="c-hc-article-content o-container b--u-text-base b--u-mt-6 lg:u-mt-0 lg:u-basis-8"> <p>And that’s it! Go and experiment with your designs directly on your website!</p> <h2 id="what-options">Customize your chat widget: available options<a href="#what-options" 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.livechat.com/help/customize-your-chat/#what-options" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-clipboard-target="source" tabindex="-1" /></a></h2> <div class="b--u-py-5 b--u-px-4 b--u-mt-4 b--u-mb-6 u-border-2 u-rounded u-border-green u-text-center md:u-text-left u-flex u-flex-col md:u-flex-row u-items-center"> <div class="b--u-mb-3 md:u-mb-0 b--md:u-mr-4 md:u-basis-2"><img src="/help/icons/tip-1.svg" alt="" width="90" class="u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12 u-text-left">Looking for a custom chat widget theme for your website? Our <a href="https://www.livechat.com/marketplace/partners/recommended/">recommended partners</a> can develop one for you.</div> <div class="md:u-hidden">Looking for a custom chat widget theme for your website? Our <a href="https://www.livechat.com/marketplace/partners/recommended/">recommended partners</a> can develop one for you.</div> </div> <h3 id="appearance">Appearance<a href="#appearance" 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.livechat.com/help/customize-your-chat/#appearance" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-clipboard-target="source" tabindex="-1" /></a></h3> <ul> <li><strong>Choose your minimized theme</strong></li> </ul> <p>Chat window gives you the option to change the style of the <strong>minimized window.</strong> Choose between a simple yet functional <strong>Bar</strong> and a modern and minimalistic <strong>Bubble!</strong></p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734248/help/Customize%20your%20chat/Minimized_theme.png" alt="Chat widget configurator edit minimized widget icon style" title="Chat-widget-configurator-edit-minimized-widget-icon-style"></p> <ul> <li><strong>Pick your color</strong></li> </ul> <p>Select <strong>Theme color</strong> to use one of our predefined sets. If you want to edit the accent color, click on the first option on the right. A color picker will pop-up.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734337/help/Customize%20your%20chat/Pick_your_color.png" alt="Chat widget configurator: pick your theme color" title="Chat-widget-configurator-pick-your-theme-color"></p> <p>We also realize that each website is different. That is why, in addition to the prefabricated sets of colors, you can choose any combination that suits you. Click on <strong>More color settings</strong> to create your own color scheme.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734337/help/Customize%20your%20chat/More_color_settings.png" alt="Chat widget configurator: Set custom colors" title="Chat-widget-configurator-set-custom-colors"></p> <p>You are able to change the color of both minimized and maximized widget elements, either by providing a <strong>hexadecimal representation</strong> or by using our <strong>built-in color picker!</strong></p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734336/help/Customize%20your%20chat/More_collor_settings_hex.png" alt="Chat widget configurator: Choose any color you like" title="Chat-widget-configurator-choose-any-color-you-like"></p> <ul> <li> <h4 id="dark-mode">Dark mode<a href="#dark-mode" 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.livechat.com/help/customize-your-chat/#dark-mode" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-clipboard-target="source" tabindex="-1" /></a></h4> </li> </ul> <p>The dark mode makes your widget display texts in white color on a dark background. It affects all of the widget elements, including rich messages and forms.</p> <p>Toggle the <strong>Dark mode</strong> switch to set the dark mode for your chat window.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734336/help/Customize%20your%20chat/Dark_Mode.png" alt="Enable dark mode" title="Enable-dark-mode"></p> <h3 id="position">Position<a href="#position" 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.livechat.com/help/customize-your-chat/#position" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-clipboard-target="source" tabindex="-1" /></a></h3> <ul> <li><strong>Widget position</strong></li> </ul> <p>Decide where the chat widget should be placed on your website. You can choose between <strong>left and right</strong>. It is also possible to define the <strong>spacing between your chat widget and corresponding bottom and side edges</strong>.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734335/help/Customize%20your%20chat/Widget_position.png" alt="Chat widget configurator Set widgets position" title="Chat-widget-configurator-set-widget's-position"></p> <ul> <li><strong>Visibility</strong></li> </ul> <p>Control when to display the chat widget icon on your website. If you want to learn more about the differences between the options described below head to our article on <a href="https://www.livechat.com/help/chat-widget-visibility/">Chat widget visibility</a>.</p> <p><strong>The chat widget is always visible</strong>.</p> <p>The widget icon on your site is <strong>always visible</strong> so your customers can start a chat by clicking on it.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734295/help/Customize%20your%20chat/Visibility.png" alt="Chat widget configurator: set widget to always visible" title="Chat-widget-configurator-set-widget-to-always-visible"></p> <div class="b--u-py-5 b--u-px-4 b--u-mt-4 b--u-mb-6 u-border-2 u-rounded u-border-green u-text-center md:u-text-left u-flex u-flex-col md:u-flex-row u-items-center"> <div class="b--u-mb-3 md:u-mb-0 b--md:u-mr-4 md:u-basis-2"><img src="/help/icons/tip-1.svg" alt="" width="90" class="u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12 u-text-left">Our partners offer a wide range of services that can increase your chat widget engagement. Check out the engagement health check and other <a href="https://www.livechat.com/marketplace/services/">services</a> you can benefit from.</div> <div class="md:u-hidden">Our partners offer a wide range of services that can increase your chat widget engagement. Check out the engagement health check and other <a href="https://www.livechat.com/marketplace/services/">services</a> you can benefit from.</div> </div> <p><strong>Hide widget until it gets activated</strong></p> <p>This option allows you to <strong>keep your chat widget hidden until it gets activated</strong> via: a greeting, an interaction with a custom <a href="https://my.livechatinc.com/settings/chat-buttons">start chat button</a> added to your website, or an open chat window API method. Once a chat starts, a customer can initiate a conversation by clicking on the chat widget icon as well.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734252/help/Customize%20your%20chat/Hide_until_activated.png" alt="Chat widget configurator: hide widget until it gets activated" title="Chat-widget-visibility-hide-widget-until-it-gets-activated"></p> <p><strong>Always hide minimized widget icon</strong></p> <p><strong>The widget icon is never displayed</strong>, hence your visitor can’t initiate a chat by clicking on it. Chats can start when either a visitor interacts with a custom <a href="https://my.livechatinc.com/settings/chat-buttons">start chat button added to your website</a>, or if you implemented an open chat window API method, that builds a custom mechanism responsible for opening a chat.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734248/help/Customize%20your%20chat/Always_hide.png" alt="Chat widget configurator: always hide minimized widget icon" title="Chat-widget-visibility-always-hide-minimized-widget-icon"></p> <h3 id="mobile-chat-widget">Mobile chat widget<a href="#mobile-chat-widget" 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.livechat.com/help/customize-your-chat/#mobile-chat-widget" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-clipboard-target="source" tabindex="-1" /></a></h3> <p>In this section, you can <strong>control if you want to Show your chat widget on mobile</strong> (this option is turned on by default). Once you turn it off (the switch button will grey out) your mobile users won’t be able to chat with you.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-showhide-chat-widget-on-mobile.png" alt="Chat widget configurator: show/hide chat widget on mobile" title="Chat-widget-configurator-showhide-chat-widget-on-mobile"></p> <p>If you decide to have it displayed on mobile, you can choose to have it <strong>appear Same as on desktop</strong>.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-set-mobile-chat-widget-settings-to-be-same-as-on-desktop.png" alt="Chat widget configurator: set mobile chat widget settings to be the same as on desktop" title="Chat-widget-configurator-set-mobile-chat-widget-settings-to-be-same-as-on-desktop"></p> <p>If you want your <strong>chat widget to be displayed differently on mobile devices</strong> (than on desktop) select <strong>Custom for mobile devices</strong>.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configutarot-set-custom-widget-settings-for-mobile-devices.png" alt="Chat widget configurator: set custom widget settings for mobile devices" title="Chat-widget-configutarot-set-custom--widget-settings-for-mobile-devices"></p> <p>You can customize <strong>Mobile widget type, position on screen and visibility</strong> (read more about <a href="https://www.livechat.com/help/chat-widget-visibility/">Chat widget visibility</a>).</p> <h3 id="additional-tweaks">Additional tweaks<a href="#additional-tweaks" 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.livechat.com/help/customize-your-chat/#additional-tweaks" class="u-absolute u-p-0 u-m-0" loading="lazy" style="opacity: 0; left: -999999px;" data-clipboard-target="source" tabindex="-1" /></a></h3> <p>With additional tweaks, we want to bring you the possibility to change the behaviour of your chat window, <strong>without modifying LiveChat script</strong> added to the source code of your website. And what exactly can you modify? As there are quite a few options, we will go through each of them below.</p> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734248/help/Customize%20your%20chat/Additional_tweaks.png" alt="Chat widget configurator: Additional tweaks" title="Chat-widget-configurator-additional-tweaks"></p> <ul> <li><strong>Show logo</strong> - you can upload your own logo that will be displayed in the top right corner, next to agent’s details (note that it will only be visible in tickets if you use the Smooth theme).</li> </ul> <div class="b--u-py-5 b--u-px-4 b--u-mt-4 b--u-mb-6 u-border-2 u-rounded u-border-signup u-text-center md:u-text-left u-flex u-flex-col md:u-flex-row u-items-center"> <div class="b--u-mb-3 md:u-mb-0 b--md:u-mr-4 md: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 u-text-left">Tickets mentioned in this article refer to the old LiveChat ticketing system available to new customers until June 1, 2023. If you’re using HelpDesk tickets, please refer to the <a href="https://www.helpdesk.com/help/email-template/">HelpDesk email template article</a>. If you’re not, <a href="https://accounts.livechat.com/signup">add the best ticketing system to your LiveChat!</a></div> <div class="md:u-hidden">Tickets mentioned in this article refer to the old LiveChat ticketing system available to new customers until June 1, 2023. If you’re using HelpDesk tickets, please refer to the <a href="https://www.helpdesk.com/help/email-template/">HelpDesk email template article</a>. If you’re not, <a href="https://accounts.livechat.com/signup">add the best ticketing system to your LiveChat!</a></div> </div> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734638/help/Customize%20your%20chat/Show_Logo.png" alt="Chat widget configurator: show logo in chat" title="Chat-widget-configurator-show-logo-in-chat"></p> <ul> <li><strong>Show agent’s photo</strong> – decide whether you’d like to display your agent’s photo during a chat and in the chat bubble, after your customer will minimize the chat window or receive a greeting.</li> </ul> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/v1700734249/help/Customize%20your%20chat/Show_agent_photo.png" alt="Chat widget configurator: show agents photo in chat" title="Chat-widget-configurator-show-agent's-photo-in-chat"></p> <ul> <li><strong>Enable sound notifications for customers</strong> – by default, your customers will be notified about a new greeting and a new message received in a chat by a sound notification. This should get their attention whenever they, for example, minimized their browser while talking with your agents. However, if you’d like to disable those sound notifications, simply switch this option off.</li> </ul> <div class="b--u-py-5 b--u-px-4 b--u-mt-4 b--u-mb-6 u-border-2 u-rounded u-border-green u-text-center md:u-text-left u-flex u-flex-col md:u-flex-row u-items-center"> <div class="b--u-mb-3 md:u-mb-0 b--md:u-mr-4 md:u-basis-2"><img src="/help/icons/tip-1.svg" alt="" width="90" class="u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12 u-text-left">Your customers can also mute the sounds of the chat widget themselves! They can do this by clicking on the <strong>Mute</strong> button, available under <strong>three little dots</strong> in the chat widget.</div> <div class="md:u-hidden">Your customers can also mute the sounds of the chat widget themselves! They can do this by clicking on the <strong>Mute</strong> button, available under <strong>three little dots</strong> in the chat widget.</div> </div> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-mute-chat.png" alt="Chat widget configurator: Mute chat" title="Chat-widget-configurator-mute-chat"></p> <ul> <li><strong>Let customers rate agents</strong> – with this option, you can decide whether your customers can rate your agents <strong>during</strong> or <strong>after the chat.</strong></li> </ul> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-rate-agents.png" alt="Chat widget configurator: Rate agents" title="Chat-widget-configurator-rate-agents"></p> <ul> <li><strong>Let customers get chat transcripts</strong> – turn on this option to give your customers the possibility to request the transcript of their current chat. The chat transcript will be sent to their email.</li> </ul> <div class="b--u-py-5 b--u-px-4 b--u-mt-4 b--u-mb-6 u-border-2 u-rounded u-border-green u-text-center md:u-text-left u-flex u-flex-col md:u-flex-row u-items-center"> <div class="b--u-mb-3 md:u-mb-0 b--md:u-mr-4 md:u-basis-2"><img src="/help/icons/tip-1.svg" alt="" width="90" class="u-border-0 u-my-0"> </div> <div class="u-hidden md:u-block md:u-basis-12 u-text-left">Your customers can receive the transcript by clicking on the <strong>Send transcript</strong> button, available under <strong>three little dots</strong> in the chat widget.</div> <div class="md:u-hidden">Your customers can receive the transcript by clicking on the <strong>Send transcript</strong> button, available under <strong>three little dots</strong> in the chat widget.</div> </div> <p><img src="https://res.cloudinary.com/dn1j6dpd7/image/upload/help/Chat-widget-configurator-send-transcript-in-chat.png" alt="Chat widget configurator: Send transcript" title="Chat-widget-configurator-send-transcript-in-chat"></p> <div class="b--u-py-5 b--u-px-4 b--u-mt-4 b--u-mb-6 u-border-2 u-rounded u-border-accent u-text-center md:u-text-left u-flex u-flex-col md:u-flex-row u-items-center"> <div class="b--u-mb-3 md:u-mb-0 b--md:u-mr-4 md:u-basis-2"><img src="/help/icons/tip-2.svg" alt="" width="90" class="u-border-0 u-my-0"> </div> <div class="md:u-block md:u-basis-12 u-text-center md:u-text-left">To make sure that the transcripts are sent only to the customers who want them, we send a <strong>verification email</strong> to customers requesting a transcript <strong>for the first time</strong>. Once their email address is verified, the requested transcripts are sent immediately.</div> </div> <p>As to this tutorial, that’s it for now! If you have any questions or feature requests, feel free to <strong>start a chat with us.</strong> Our Support Heroes are available 24/7/365!</p> </div> </div> <aside class="c-toc b--u-pl-3 b--u-pr-1 u-hidden lg:u-block"> <div style="width: 300px; position: sticky; top:90px;" class="c-toc--desktop b--lg:u-py-4 lg:u--my-xl u-bg-white u-border-gray-900"> <h3 class="b--u-text-base b--u-text-bold b--lg:u-pl-3 u-mb-0 u-text-gray-300 b--u-py-2" id="hc-toc-heading">Table of contents</h3> <div data-scroll-spy-target="list"> <nav id="TableOfContents"> <ul> <li><a href="#how-to-use">Customize your chat widget: how to?</a></li> <li><a href="#live-editor">Live Editor</a></li> <li><a href="#what-options">Customize your chat widget: available options</a></li> </ul> </nav> </div> </div> </aside></div> <form action="https://hooks.zapier.com/hooks/catch/4830540/bneqpuu/" name="hc_rating" class="b--u-my-12" data-netlify="true" netlify-honeypot="human-test" data-id="9db1642b941023a9799ff9f82d46bd8f" data-controller="rating-form"> <section class="u-text-center b--u-mb-6 u-bg-gray-900 o-container v--big b--u-py-8"> <h2 class="b--u-text-lg b--u-text-bold b--u-mb-4">Was this article helpful?</h2><button type="submit" data-value="form-name=hc_rating&page_id=9db1642b941023a9799ff9f82d46bd8f&title=Customize+your+chat+widget&vote=1" data-vote="1" data-action="click->rating-form#rate" title="yes" class="c-btn u-inline-flex u-items-center b--u-mx-3 b--u-px-3 ub v--transparent b--u-mb-3 md:u-mb-0" > <svg xmlns="http://www.w3.org/2000/svg" class="b--u-mr-1.5" 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="b--u-text-sm">Yes</span> </button> <button type="submit" data-value="form-name=hc_rating&page_id=9db1642b941023a9799ff9f82d46bd8f&title=Customize+your+chat+widget&vote=0" data-vote="0" data-action="click->rating-form#revealMessageInput" title="no" class="c-btn u-inline-flex u-items-center b--u-mx-3 b--u-px-3 ub v--transparent" > <svg xmlns="http://www.w3.org/2000/svg" class="b--u-mr-1.5" 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="b--u-text-sm">No</span> </button> </section> <div class="u-text-center o-container u-maxw-6 c-rating-form__feedback" data-rating-form-target="feedback"> <label for="hc_rating_message" class="b--u-text-base u-inline-block b--u-mb-2">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 b--u-px-3 b--u-py-2 b--u-mb-3 c-rating-form__message u-text-left" data-rating-form-target="message" required ></textarea> <div class="u-text-right"> <button type="submit" data-value="form-name=hc_rating&page_id=9db1642b941023a9799ff9f82d46bd8f&title=Customize+your+chat+widget&vote=0" data-vote="0" data-action="click->rating-form#rateAndFeedback" title="no" class="c-btn b--u-px-3 ub v--transparent" data-rating-form-target="submit" disabled > Submit your feedback </button> </div> </div> <div class="u-text-center o-container u-hidden" data-rating-form-target="confirmation0"> <img src="/help/images/ok.gif" alt="" class="u-maxw-1 b--u-mb-2" width="100"> <h3 class="b--u-text-lg b--u-text-bold b--u-mb-3">Got it!</h3> <p class="b--u-text-base">Thanks for your feedback.</p> </div> <div class="u-text-center o-container u-hidden" data-rating-form-target="confirmation1"> <img src="/help/images/thanks.gif" alt="" class="u-maxw-1 b--u-mb-2" width="100"> <h3 class="b--u-text-lg b--u-text-bold b--u-mb-3">Thank you!</h3> <p class="b--u-text-base">We’re happy to help.</p> </div> </form> <section class="o-container b--u-mb-6 b--md:u-mb-12"> <h3 class="b--u-text-base b--u-text-bold u-text-gray-300 b--u-mb-4">RELATED ARTICLES</h3> <div class="o-columns v--two"><div class="b--u-p-4 b--md:u-p-6 u-bg-gray-900 u-flex u-flex-col u-justify-between u-flex-wrap"> <div> <h4 class="b--u-text-lg b--u-text-bold b--u-mb-3">Sales Tracker: Monitor the value of your chats</h4> <p class="b--u-text-base b--u-mb-3">Set up a Sales Tracker for your website and see which chats with customers turn into sales and how much revenue you get from them.</p> </div> <a href="/help/sales-tracker/" class="c-link b--u-text-base b--u-text-bold">Read the article</a> </div><div class="b--u-p-4 b--md:u-p-6 u-bg-gray-900 u-flex u-flex-col u-justify-between u-flex-wrap"> <div> <h4 class="b--u-text-lg b--u-text-bold b--u-mb-3">Chat page and QR code explained</h4> <p class="b--u-text-base b--u-mb-3">Give your customers the possibility to contact you instantly with the chat page. Read on and learn how to implement it on each touchpoint with your customers.</p> </div> <a href="/help/direct-chat-link/" class="c-link b--u-text-base b--u-text-bold">Read the article</a> </div></div> </section></article> </div> <section class="u-border-t b--u-py-12 b--lg:u-py-20"> <div class="o-container"> <div class="u-text-center"> <h4 class="b--u-text-3xl">Start using LiveChat now!</h4> <p class="b--u-text-lg b--u-mt-3 b--u-mb-4 u-flex u-justify-center u-flex-wrap"> <span> <svg xmlns="http://www.w3.org/2000/svg" width="11" height="10" class="b--u-mr-1"> <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"> </path> </svg> Free 14-day trial </span> <span> <svg xmlns="http://www.w3.org/2000/svg" width="11" height="10" class="b--u-ml-2 b--u-mr-1"> <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"> </path> </svg> AI-driven features </span> <span> <svg xmlns="http://www.w3.org/2000/svg" width="11" height="10" class="b--u-ml-2 b--u-mr-1"> <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"> </path> </svg> No credit card required </span> </p> <form action="https://accounts.livechat.com/signup" method="GET" data-controller="signup" data-action="signup#submit"> <div class="u-maxw-6 u-mx-auto u-flex u-flex-col sm:u-flex-row"> <input type="email" name="email" class="b--u-mr-1 b--u-mb-1 sm:u-mb-0" data-signup-target="email" placeholder="Enter your business email" required> <input type="hidden" name="source_id" value="footer_form"> <input type="hidden" name="source_url" value="https://www.livechat.com/help/customize-your-chat/"> <input type="hidden" name="source_type" value="website"> <button type="submit" class="c-btn v--signup">Sign up free</button> </div> </form> <p class="b--u-text-xs b--u-text-bold b--u-mt-6 u-mb-0"><a href="/features/" class="c-link u-text-black">Still not convinced? Discover all LiveChat features</a></p> </div> </div> </section> <section class=" u-bg-gray-900 b--u-py-8 u-border-t u-border-gray-800"> <div class="o-container u-maxw-13 u-mx-auto"> <h2 class="b--u-text-lg u-text-center b--u-mb-6">Discover <a href="https://text.com/?utm_source=livechat.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank" class="b--u-text-bold c-link v--reset" data-controller="track" data-track-category="Product Bar" data-track-action="Clicked on Text" data-action="click->track#send">Text</a> products:</h2> <div class="o-columns v--four v--responsive"> <a href="https://www.chatbot.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="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_dd1)"><rect x="4" y="3" width="64" height="64" rx="10" fill="#fff"/></g><path d="M43.6 31.6v3a1.1 1.1 0 01-.6 1.1c-2.2 1-4.6 1.6-7 1.7-2.4 0-4.8-.6-7-1.7a1.1 1.1 0 01-.6-1v-3.1a.9.9 0 011.2-.8c2 .9 4.2 1.3 6.4 1.4 2.2 0 4.3-.5 6.4-1.4a.9.9 0 011.2.8z" fill="#06F"/><path d="M51.8 38.9a7.6 7.6 0 01-7.6 6.9H40L32 51v-5.2l8-5.2h4.2a2.4 2.4 0 002.4-2.1c.3-4 .2-8 0-12a2.2 2.2 0 00-2.1-2 138.9 138.9 0 00-17 0 2.2 2.2 0 00-2 2c-.4 4-.4 8-.1 12a2.4 2.4 0 002.4 2.1H32v5.2h-4.2a7.6 7.6 0 01-7.6-7 96 96 0 010-12.7 7.4 7.4 0 017-6.8 125 125 0 0117.6 0 7.4 7.4 0 017 6.8 96 96 0 010 12.8z" fill="#06F"/><defs><filter id="filter0_dd1" 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 sm:u-maxw-2 b--u-ml-0.5"><span class="b--u-text-sm b--u-text-bold">ChatBot</span> <br><span style="opacity: .65;">Automate customer service with AI</span></p> </a> <a href="https://www.helpdesk.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="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 sm:u-maxw-2 b--u-ml-0.5"><span class="b--u-text-sm b--u-text-bold">HelpDesk</span> <br><span style="opacity: .65;">Support customers with tickets</span></p> </a> <a href="https://www.knowledgebase.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="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_dd3)"><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_dd3" 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 sm:u-maxw-2 b--u-ml-0.5"><span class="b--u-text-sm b--u-text-bold">KnowledgeBase</span> <br><span style="opacity: .65;">Guide and educate customers</span></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 class=" u-bg-gray-900 b--u-pt-6"> <div class="u-border-b"> <div class="o-container-xl"> <div class="u-flex u-flex-wrap u-items-center b--u-mb-3"> <p class="b--u-text-xs b--u-text-bold u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3">Get LiveChat App</p> <p class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3"><a href="/app/livechat-web-app/" class="c-link v--reset b--u-text-xs u-flex u-items-center u-w-fit"><svg width="15" height="15" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M7.57 14.51c1.12-.15 2.1-1.31 2.72-3.03-.9-.2-1.8-.3-2.72-.31v3.34zM9.36 14.24l.2-.06.16-.05.19-.07.16-.07.19-.07a7.87 7.87 0 0 0 1.6-.97l.15-.11.15-.14.13-.11.15-.15.13-.12.02-.02a8.81 8.81 0 0 0-1.8-.69 6.44 6.44 0 0 1-1.66 2.7l.06-.02.17-.05zM14.62 7.52h-3.13a13.4 13.4 0 0 1-.53 3.6c.69.18 1.35.44 1.98.78a7.23 7.23 0 0 0 1.68-4.38zM7.57 7h3.4a12.92 12.92 0 0 0-.52-3.46c-.95.21-1.91.33-2.88.34V7zM7.57.01v3.35c.91-.01 1.82-.12 2.72-.32C9.67 1.33 8.69.17 7.57.01zM7.57 10.65c.97 0 1.93.12 2.88.34.33-1.13.5-2.3.51-3.47H7.57v3.13zM12.94 2.62c-.63.34-1.3.6-1.98.79.34 1.17.51 2.38.53 3.6h3.13a7.23 7.23 0 0 0-1.68-4.39zM12.59 2.23l-.02-.02-.13-.13-.15-.14-.13-.12-.15-.13-.14-.11a5.59 5.59 0 0 0-.94-.63 7.23 7.23 0 0 0-.17-.1L10.6.77a5.78 5.78 0 0 0-.34-.16l-.19-.08a7.38 7.38 0 0 0-.72-.25L9.2.24 9.13.22a6.44 6.44 0 0 1 1.67 2.7 8.8 8.8 0 0 0 1.79-.69zM0 7h3.13c.01-1.21.2-2.42.53-3.6a9.1 9.1 0 0 1-1.98-.78A7.23 7.23 0 0 0 0 7zM7.05 14.51v-3.34c-.92 0-1.82.12-2.72.31.62 1.72 1.6 2.88 2.72 3.03zM7.05 7.52h-3.4c.02 1.18.2 2.34.52 3.47.94-.22 1.9-.33 2.88-.34V7.52zM7.05.01c-1.12.16-2.1 1.32-2.72 3.03.9.2 1.8.3 2.72.32V0zM7.05 3.88c-.97-.01-1.94-.13-2.88-.34-.33 1.12-.5 2.29-.51 3.46h3.39V3.88zM5.49.22l-.06.02-.17.04-.2.06L4.9.4l-.2.07-.15.06-.19.08a7.57 7.57 0 0 0-.82.42l-.17.1a6.85 6.85 0 0 0-.46.32l-.16.13-.14.1-.15.14-.13.12-.15.14-.13.13-.02.02c.57.3 1.17.52 1.8.68C4.13 1.9 4.71.97 5.48.22zM2.18 12.44l.15.14.13.12.15.14.14.1.16.13.14.1a7.4 7.4 0 0 0 .81.5l.16.09a6.08 6.08 0 0 0 .34.16l.19.07a7.38 7.38 0 0 0 .35.14l.17.05.2.06.16.05.06.01a6.44 6.44 0 0 1-1.67-2.7 8.8 8.8 0 0 0-1.79.7l.02.02.13.12zM1.68 11.9c.62-.34 1.3-.6 1.98-.78a13.4 13.4 0 0 1-.53-3.6H0c.06 1.6.65 3.15 1.68 4.38z"/></g></svg> <span class="b--u-ml-1">Web browser</span></a></p> <p class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3"><a href="/app/livechat-for-windows/" class="c-link v--reset b--u-text-xs u-flex u-items-center u-w-fit"><svg width="15" height="15" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M0 12.5l6 .8V7.7H0zM0 6.9h6V1.2L0 2zM6.7 13.4l7.9 1.1V7.7H6.7zM6.8 1.1v5.7h7.7V0z"/></g></svg> <span class="b--u-ml-1">Windows</span></a></p> <p class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3"><a href="/app/livechat-for-android/" class="c-link v--reset b--u-text-xs u-flex u-items-center u-w-fit"><svg width="15" height="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M1.08 5.58h-.05C.47 5.58 0 6.04 0 6.6v4.44c0 .57.47 1.02 1.03 1.02h.05c.56 0 1.03-.46 1.03-1.02V6.6c0-.56-.47-1.02-1.03-1.02zM2.6 12.76c0 .51.42.93.94.93h1.01v2.4c0 .57.47 1.02 1.03 1.02h.05c.57 0 1.03-.46 1.03-1.02v-2.4h1.41v2.4c0 .57.46 1.02 1.03 1.02h.04c.57 0 1.03-.46 1.03-1.02v-2.4h1.01c.52 0 .95-.42.95-.93V5.74H2.6v7.02z"/><path d="M9.74 1.49l.8-1.23a.17.17 0 0 0-.05-.23.17.17 0 0 0-.24.05l-.83 1.27a5.46 5.46 0 0 0-4.11 0L4.48.08a.17.17 0 0 0-.24-.05.17.17 0 0 0-.05.23l.8 1.23a4.03 4.03 0 0 0-2.4 3.83h9.56l.01-.28c0-1.52-.98-2.85-2.42-3.55zm-4.6 2.2a.46.46 0 0 1-.45-.46c0-.25.2-.45.46-.45a.46.46 0 1 1 0 .91zm4.44 0a.46.46 0 0 1-.46-.46c0-.25.2-.45.46-.45a.46.46 0 1 1 0 .91z" fill-rule="nonzero"/><path d="M13.7 5.58h-.05c-.56 0-1.03.46-1.03 1.02v4.44c0 .57.47 1.02 1.03 1.02h.05c.56 0 1.02-.46 1.02-1.02V6.6c0-.56-.46-1.02-1.03-1.02z"/></g></svg> <span class="b--u-ml-1">Android</span></a></p> <p class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3 b--u-text-xs u-flex u-items-center u-w-fit"><svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.6 13.9l-1 1.5a1.2 1.2 0 01-2-1.1l.7-1.2c.2-.2.5-.5 1-.4 0 0 1.3 0 1.4.8l-.1.4zM17 10H13.9L11 4.8l-.2-.3c-.3-.4-.7.7-.7.7-.6 1.2 0 2.7.3 3l4 7.1a1.2 1.2 0 002-1.1l-1-1.8s0-.2.2-.2H17c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.2-1.1-1.2zm-5.3 1.6s.1.7-.5.7h-10a1.2 1.2 0 010-2.3h2.5c.5 0 .6-.2.6-.2l3.4-5.9v-.2l-1.2-2a1.2 1.2 0 012-1.1l.6.9.5-1a1.2 1.2 0 012 1.2L6.9 10l.1.1h2.8s1.6 0 1.9 1.6z" fill="currentColor"/></svg><a href="/app/livechat-for-iphone/" class="c-link v--reset b--u-text-xs b--u-ml-1">iOS</a></p> <p class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-mb-3"><a href="/app/livechat-for-mac/" class="c-link v--reset b--u-text-xs u-flex u-items-center u-w-fit"><svg width="15" height="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M12.4 9.3c0-2.2 1.8-3.3 1.9-3.3a4.1 4.1 0 0 0-3.2-1.8c-1.4-.1-2.7.8-3.4.8-.7 0-1.8-.7-3-.7-1.4 0-2.8.8-3.6 2.2C-.5 9.2.7 13 2.2 15.3c.8 1 1.7 2.3 2.8 2.2 1.1 0 1.6-.7 3-.7 1.3 0 1.6.7 2.8.7 1.2 0 2-1 2.7-2.1.9-1.3 1.2-2.5 1.3-2.5 0 0-2.4-1-2.4-3.6zM10.2 2.8c.6-.7 1-1.8.9-2.8a4 4 0 0 0-2.6 1.3C7.9 2 7.4 3 7.5 4c1 .1 2-.5 2.7-1.2z"/></g></svg> <span class="b--u-ml-1 b--u-mbn-0.5">Mac</span></a></p> </div> <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-pr-4"> <div class="b--u-mb-4"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2">Product</p> <ul class="u-list-style-none 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 u-block" >Pricing</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 u-block" >LiveChat Benefits</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/tour/" class="b--u-text-xs c-link v--reset u-block" >Tour</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 u-block" >Features</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/lead-generation/" class="b--u-text-xs c-link v--reset u-block" >Lead Generation</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/livechat-demo/" class="b--u-text-xs c-link v--reset u-block" >Product Demo</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/app/" class="b--u-text-xs c-link v--reset u-block" >App</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/marketplace/" class="b--u-text-xs c-link v--reset u-block" >Marketplace</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://news.livechat.com/" class="b--u-text-xs c-link v--reset u-block" target="_blank" rel="noopener">News</a> </li> </ul> </div> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-pr-4"> <div class="b--u-mb-4"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2">Solutions</p> <ul class="u-list-style-none u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/solutions/customer-support/" class="b--u-text-xs c-link v--reset u-block" >Customer Support</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/solutions/sales-and-marketing/" class="b--u-text-xs c-link v--reset u-block" >Sales & Marketing</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/enterprise/" class="b--u-text-xs c-link v--reset u-block" >Enterprise</a> </li> </ul> </div> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-pr-4"> <div class="b--u-mb-4"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2">Customers</p> <ul class="u-list-style-none u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/customers/#industries" class="b--u-text-xs c-link v--reset u-block" >Industries</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/customers/" class="b--u-text-xs c-link v--reset u-block" >Customers</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/customers/live-chat-reviews/" class="b--u-text-xs c-link v--reset u-block" >Reviews & Testimonials</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/customers/customer-stories/" class="b--u-text-xs c-link v--reset u-block" >Case Studies</a> </li> </ul> </div> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-pr-4"> <div class="b--u-mb-4"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2">Resources</p> <ul class="u-list-style-none u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/success/" class="b--u-text-xs c-link v--reset u-block" target="_blank" rel="noopener">Success by LiveChat</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/success/customer-service-guide/" class="b--u-text-xs c-link v--reset u-block" target="_blank" rel="noopener">Customer Service Guide</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/customer-service-report/" class="b--u-text-xs c-link v--reset u-block" >Customer Service Report</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/benchmark/" class="b--u-text-xs c-link v--reset u-block" >Benchmark</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/resources/reports/" class="b--u-text-xs c-link v--reset u-block" >Reports</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/typing-speed-test/" class="b--u-text-xs c-link v--reset u-block" >Typing Speed Test</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/privacy-policy-generator/" class="b--u-text-xs c-link v--reset u-block" >Privacy Policy Generator</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/newsletter/" class="b--u-text-xs c-link v--reset u-block" >Newsletter</a> </li> </ul> </div> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-pr-4"> <div class="b--u-mb-4"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2">Support</p> <ul class="u-list-style-none 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 u-block" >Help Center</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/webinars/" class="b--u-text-xs c-link v--reset u-block" >Webinars</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/marketplace/partners/" class="b--u-text-xs c-link v--reset u-block" >Partners Marketplace</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/enterprise/professional-business-services/" class="b--u-text-xs c-link v--reset u-block" >Professional Services</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://developers.livechat.com/" class="b--u-text-xs c-link v--reset u-block" target="_blank" rel="noopener">API & Developers</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://status.livechat.com/" class="b--u-text-xs c-link v--reset u-block" target="_blank" rel="noopener">System Status</a> </li> </ul> </div> </div> <div class="u-flex-1 u-basis-6 sm:u-basis-4 lg:u-basis-2 b--u-pr-4"> <div class="b--u-mb-4"> <p class="b--u-text-xs b--u-text-bold b--u-mb-2">Company</p> <ul class="u-list-style-none u-p-0 u-m-0"> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://text.com/?utm_source=livechat.com&utm_medium=referral&utm_content=footer" class="b--u-text-xs c-link v--reset u-block" 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="/contact/" class="b--u-text-xs c-link v--reset u-block" >Contact</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/team/" class="b--u-text-xs c-link v--reset u-block" >Team</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="/careers/" class="b--u-text-xs c-link v--reset u-block" target="_blank" rel="noopener">Careers</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://investor.livechat.com/" class="b--u-text-xs c-link v--reset u-block" target="_blank" rel="noopener">Investor Relations</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://www.text.com/press/" class="b--u-text-xs c-link v--reset u-block" >Press</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://partners.livechat.com/?utm_source=livechat.com&utm_medium=referral&utm_content=footer" class="b--u-text-xs c-link v--reset u-block" target="_blank" rel="noopener">Partner Program</a> </li> <li class="b--u-mb-2 b--lg:u-mb-1"> <a href="https://incubator.livechat.com/?utm_source=livechat&utm_medium=referral&utm_content=footer" class="b--u-text-xs c-link v--reset u-block" 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 u-block" >Legal</a> </li> </ul> </div> </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" data-controller="append-params" data-append-params-params-value="region"> <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 live chat trial</p> <a href="https://accounts.livechat.com/signup?source_id=footer_cta_button&source_type=website&source_url=https%3a%2f%2fwww.livechat.com%2fhelp%2fcustomize-your-chat%2f" class="c-btn v--sm v--signup" data-controller="track" data-track-category="Signup" data-track-action="Signup Redirect" data-track-label="Sign up free" data-action="track#send" data-append-params-target="link" >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" data-controller="append-params" data-append-params-params-value="region"> <p class="b--u-text-sm b--u-text-bold b--u-mb-3 b--md:u-mb-0.25">Start your free live chat trial</p> <a href="https://accounts.livechat.com/signup?source_id=footer_cta_button&source_type=website&source_url=https%3a%2f%2fwww.livechat.com%2fhelp%2fcustomize-your-chat%2f" class="c-btn v--signup u-w-full u-maxw-3 u-mx-auto" data-controller="track" data-track-category="Signup" data-track-action="Signup Redirect" data-track-label="Sign up free" data-action="track#send" data-append-params-target="link" >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--4 b--sm:o-grid--8"> <a href="https://twitter.com/intent/follow?screen_name=LiveChat" class=" u-text-black"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="currentColor" d="M18.2 2.3h3.3l-7.2 8.2 8.5 11.3H16L11 14.8l-6 6.8H1.6L9.4 13 1.2 2.2H8l4.8 6.3 5.4-6.3ZM17 19.8H19L7 4H5l12 15.7Z"/></svg> </a> <a href="https://www.linkedin.com/company/livechat/" class=" u-text-black"><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="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"/></svg> </a> <a href="https://www.facebook.com/livechat" class=" u-text-black"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.07a12 12 0 1 0-13.88 11.86v-8.39H7.08v-3.47h3.04V9.43c0-3 1.8-4.67 4.54-4.67 1.31 0 2.68.23 2.68.23v2.96h-1.51c-1.5 0-1.96.92-1.96 1.87v2.25h3.33l-.53 3.47h-2.8v8.39A12 12 0 0 0 24 12.07Z" fill="currentColor"/></svg> </a> <a href="https://www.youtube.com/livechat?sub_confirmation=1" class=" u-text-black"><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.52 15.59V8.82l6.49 3.4-6.49 3.37Zm14.24-7.94s-.23-1.66-.95-2.39c-.92-.96-1.94-.96-2.4-1.02C17.03 4 12 4 12 4h-.02s-5.03 0-8.4.24c-.46.06-1.48.06-2.4 1.02-.72.73-.95 2.4-.95 2.4S0 9.6 0 11.54v1.82c0 1.95.24 3.9.24 3.9s.23 1.66.95 2.39c.92.96 2.12.93 2.65 1.03 1.92.18 8.16.24 8.16.24s5.04 0 8.4-.25c.47-.06 1.5-.06 2.4-1.02.73-.73.96-2.39.96-2.39s.24-1.95.24-3.9v-1.82c0-1.95-.24-3.9-.24-3.9Z" fill="currentColor"/></svg></a> <a href="https://www.instagram.com/livechat/" class=" u-text-black"><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="M7.05.07C8.33.01 8.75 0 12 0c3.26 0 3.67.01 4.95.07a8.8 8.8 0 0 1 2.91.56c.79.3 1.46.72 2.13 1.38a5.88 5.88 0 0 1 1.38 2.13c.3.76.5 1.64.56 2.91.06 1.28.07 1.7.07 4.95 0 3.26-.01 3.67-.07 4.95a8.81 8.81 0 0 1-.56 2.91c-.3.79-.72 1.46-1.38 2.13a5.88 5.88 0 0 1-2.13 1.38c-.76.3-1.64.5-2.91.56-1.28.06-1.7.07-4.95.07-3.26 0-3.67-.01-4.95-.07a8.8 8.8 0 0 1-2.91-.56A5.88 5.88 0 0 1 2 21.99a5.88 5.88 0 0 1-1.38-2.13 8.8 8.8 0 0 1-.56-2.91A85.13 85.13 0 0 1 0 12c0-3.26.01-3.67.07-4.95a8.8 8.8 0 0 1 .56-2.91c.3-.79.72-1.46 1.38-2.13A5.88 5.88 0 0 1 4.14.63 8.8 8.8 0 0 1 7.05.07Zm12.03 2.58a6.64 6.64 0 0 0-2.23-.42A83.27 83.27 0 0 0 12 2.16c-3.2 0-3.58.01-4.85.07-1.17.06-1.8.25-2.23.42-.56.21-.96.47-1.38.9-.42.41-.68.81-.9 1.37a6.64 6.64 0 0 0-.4 2.23A83.28 83.28 0 0 0 2.15 12c0 3.2.01 3.58.07 4.85.06 1.17.25 1.8.42 2.23.21.56.47.96.9 1.38.41.42.81.68 1.37.9.43.16 1.06.35 2.23.4 1.27.07 1.65.08 4.85.08 3.2 0 3.58-.01 4.85-.07a6.64 6.64 0 0 0 2.23-.42c.56-.21.96-.47 1.38-.9.42-.41.68-.81.9-1.37.16-.43.35-1.06.4-2.23.07-1.27.08-1.65.08-4.85 0-3.2-.01-3.58-.07-4.85a6.64 6.64 0 0 0-.42-2.23 3.72 3.72 0 0 0-.9-1.38 3.72 3.72 0 0 0-1.37-.9ZM12 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32ZM8 12a4 4 0 1 0 8 0 4 4 0 0 0-8 0Zm10.4-4.97a1.44 1.44 0 1 0 0-2.88 1.44 1.44 0 0 0 0 2.88Z" fill="currentColor"/></svg> </a> <a href="https://www.producthunt.com/posts/livechat-2" class=" u-text-black"><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="M10.1999 14.4001h3.3998c2.3197 0 4.2-1.8803 4.2-4.2 0-2.31977-1.8803-4.20002-4.2-4.20002H7.79993V18.0001h2.39997v-3.6ZM0 12C0 5.37225 5.37225 0 12 0c6.627 0 12 5.37225 12 12 0 6.6278-5.373 12-12 12-6.62775 0-12-5.3722-12-12Zm10.2-3.60004h3.3998c.9946 0 1.8001.80625 1.8001 1.80004 0 .9937-.8055 1.7999-1.8001 1.7999H10.2V8.39996Z" fill="currentColor"/></svg></a> <a href="https://dribbble.com/textcom" class=" u-text-black"><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="M19.93 5.53c-.21.3-1.93 2.5-5.72 4.05a30.73 30.73 0 0 1 .9 2c3.41-.42 6.8.27 7.14.34a10.2 10.2 0 0 0-2.32-6.39ZM9.6 2.05a54.8 54.8 0 0 1 3.82 6c3.65-1.37 5.19-3.44 5.38-3.7a10.2 10.2 0 0 0-9.2-2.3ZM1.97 9.92c.46 0 4.68.02 9.47-1.25a65.4 65.4 0 0 0-3.8-5.93c-2.86 1.35-5 4-5.67 7.18Zm2.42 8.95c.23-.4 3.04-5.06 8.33-6.76l.4-.13c-.26-.58-.54-1.16-.83-1.74A37.83 37.83 0 0 1 1.76 11.7l-.01.32c0 2.63 1 5.03 2.64 6.85ZM16 21.45c-.15-.9-.74-4.03-2.18-7.77l-.07.02c-5.78 2.01-7.86 6.02-8.04 6.4A10.2 10.2 0 0 0 16 21.45Zm6.12-7.8c-.35-.12-3.17-.96-6.38-.45a44.2 44.2 0 0 1 1.99 7.31 10.27 10.27 0 0 0 4.39-6.87ZM12 24C5.38 24 0 18.62 0 12S5.38 0 12 0s12 5.38 12 12-5.38 12-12 12Z" fill="currentColor"/></svg></a> <a href="https://github.com/livechat" class=" u-text-black"><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="M22.39 6.13a12.1 12.1 0 0 0-4.37-4.48A11.52 11.52 0 0 0 12 0C9.82 0 7.81.55 5.98 1.65A12.27 12.27 0 0 0 0 12.3c0 2.68.76 5.1 2.29 7.23a11.78 11.78 0 0 0 5.91 4.45c.28.05.5.01.63-.12.13-.12.2-.28.2-.48a378 378 0 0 0-.01-2.29l-.36.07a6.45 6.45 0 0 1-1.95-.06 2.4 2.4 0 0 1-1.05-.48 2.03 2.03 0 0 1-.7-.98l-.15-.37c-.1-.25-.27-.52-.49-.82a1.9 1.9 0 0 0-.68-.6l-.1-.09a1.16 1.16 0 0 1-.35-.41c-.03-.08 0-.14.08-.19a1 1 0 0 1 .45-.07l.31.05c.2.04.47.17.77.38.31.22.56.5.76.83.24.44.53.78.87 1 .34.24.68.35 1.02.35.35 0 .64-.03.9-.08.24-.05.48-.13.7-.24.09-.72.35-1.27.76-1.65-.6-.06-1.13-.16-1.6-.29a6.3 6.3 0 0 1-1.47-.62 4.23 4.23 0 0 1-2.08-2.76c-.21-.7-.32-1.5-.32-2.4 0-1.3.42-2.4 1.24-3.3a4.4 4.4 0 0 1 .1-3.27c.3-.1.76-.02 1.35.22A9.29 9.29 0 0 1 9 6.36a10.84 10.84 0 0 1 6 0l.6-.39c.4-.25.88-.49 1.43-.7.55-.21.98-.27 1.27-.18.47 1.21.5 2.3.12 3.27.82.9 1.24 2 1.24 3.3 0 .9-.11 1.71-.32 2.41a5 5 0 0 1-.83 1.68 4.4 4.4 0 0 1-1.27 1.07c-.5.29-1 .5-1.47.62-.47.13-1 .23-1.6.29.54.48.81 1.24.81 2.27v3.38c0 .2.07.36.2.48.13.13.34.17.62.12 2.41-.83 4.39-2.3 5.91-4.45A12.16 12.16 0 0 0 24 12.3c0-2.23-.54-4.29-1.61-6.17Z" fill="currentColor"/></svg></a> </div> </div> </div> </div> </div> <div class="o-container-xl u-text-gray-400"> <div class="b--u-py-3"> <p class="b--u-text-2xs u-mb-0 u-pb-0" style="color: inherit;">LiveChat is customer service software that adapts to your business needs. Whether you’re a B2B SaaS or an <a href="/solutions/ecommerce/" class="c-link v--reset u-text-underline">ecommerce</a> company, our live chat software will help you sell and support across multiple communication channels and ultimately grow your business.<br>Copyright © 2024 Text, Inc. All rights reserved.</p> <div class="b--u-pt-3"> <p class="b--u-text-2xs 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. <a href="/legal/cookies-policy/" class="b--u-text-bold" style="color: inherit;">Click the 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 src="/dist/js/help.1b05c4e559d7ddbce4217254e5e176c2a1822bf3ba567acd301127912bc3d8f6.js"></script> <script async defer src="/dist/js/main.0468433ea45a73a3746f4791833cc17772be5c9f23f52a04cbb6c330c154af34.js"></script> <script async defer src="/dist/js/vendor~1.640be77df4843b82ffa39c47b3678aae74f8827a7ac159100ba417dbe9a6918e.js"></script> <script async defer src="/dist/js/vendor~2.cec0b0cca94f290f1cd8a5fe547e1e9d1b1a021a2a3c8a84eef2eaba143db2d1.js"></script> <script async defer src="/dist/js/vendor~3.277d9c17b185b5843725d623ed8659093c515c8c42892a210cfa1bd7bedab2f5.js"></script> <script async defer src="/dist/js/vendor~legal.7e407caec7c24e9948a2ee4ce0618507c1dc7536814f241c5bf782f2b0461f5b.js"></script> <script async defer src="/dist/js/vendor~stimulus.5b795d8abe662fb12ab5bbcf99351372fbea633a423f7fb18cec57c87efbf265.js"></script> <script async defer src="/dist/js/vendor~livechat.a5d8fd72db6c5621582b64ed9e8372b726322924e436f0534f19d537ece84e2e.js"></script> <script async defer src="/dist/js/controllers~sqf.ae667192300207b2fdb0d56e21c973f0ae0d930a2082c4243b9a5f34e78626b7.js"></script> <script async defer src="/dist/js/controllers.f47120e4383a819b9d7abed6e58de5540bdef336abdaa5b9c721269e4948296d.js"></script> <script async defer src="/dist/js/manifest.42425d64286f0ccde0dc16bddc681f5145177a99f5f45bfc4cca78e8d5d4653b.js"></script> <script async defer src="/dist/js/controllers~help.e0dde275beefe890ca788628565f74edc61b056d1c35d358682bddf40711368b.js"></script> <script> window.__lc = window.__lc || {}; window.__lc.license = 1520; window.__lc.ga_version = "gtm"; (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("[LiveChatWidget] 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.livechatinc.com/staging/tracking.js"), t.head.appendChild(n); }, }; !n.__lc.asyncInit && e.init(), (n.LiveChatWidget = n.LiveChatWidget || e); })(window, document, [].slice); </script> <noscript> <a href="https://www.livechatinc.com/chat-with/1520/" rel="nofollow">Chat with us</a>, powered by <a href="https://www.livechatinc.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a> </noscript> <script> const checkIfMobile = () => { const userAgent = navigator.userAgent || navigator.vendor || window.opera; const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i; const hasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; const isIPad = navigator.platform === 'MacIntel' && hasTouchSupport; return (mobileRegex.test(userAgent) || isIPad) && hasTouchSupport; } window.LiveChatWidget.on("ready", () => { const customerData = LiveChatWidget.get("customer_data"); let updatedSessionVariables = { visitor_id: customerData.id, og_cv_is_mobile: checkIfMobile(), og_cv_is_returning: customerData.isReturning ? "true" : "false", }; updatedSessionVariables.og_cv_account_type = customerData.sessionVariables.og_cv_account_type ?? "-"; window.LiveChatWidget.call("update_session_variables", updatedSessionVariables); }); </script> <script type="text/javascript"> (function(window, document, dataLayerName, id) { window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script'); function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString()}document.cookie=a+"="+b+d+"; path=/"} var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1); var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):""; tags.async=!0,tags.src="https://livechat.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts); !function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]); })(window, document, 'dataLayer', '28a0a095-db17-4f24-8d11-19c9de6721cc'); </script><noscript><iframe src="https://livechat.containers.piwik.pro/28a0a095-db17-4f24-8d11-19c9de6721cc/noscript.html" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript></body> </html>