CINXE.COM

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Chat Widget JS API | Text Platform Docs & API Reference</title><link rel="canonical" href="https://platform.text.com/docs/extending-chat-widget/javascript-api"/><link rel="preconnect" href="https://LATDYRDX9J-dsn.algolia.net" crossorigin="true"/><meta name="description" content="Adjust the mechanics of the widget or leverage the JavaScript API to pass additional details on to the Customer."/><meta property="og:title" content="Chat Widget JS API"/><meta property="og:description" content="Adjust the mechanics of the widget or leverage the JavaScript API to pass additional details on to the Customer."/><meta property="og:type" content="website"/><meta property="og:image" content="https://platform.text.com/docs/images/text-docs-og.png"/><link rel="icon" href="/docs/images/favicon.ico"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@textplatform"/><meta name="twitter:title" content="Chat Widget JS API"/><meta name="twitter:description" content="Adjust the mechanics of the widget or leverage the JavaScript API to pass additional details on to the Customer."/><meta name="twitter:image" content="https://platform.text.com/docs/images/livechat-docs-og.png"/><script type="text/javascript"> window.__lc = window.__lc || {}; window.__lc.license = 1520; ;(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><meta name="next-head-count" content="17"/><link rel="preload" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" as="style"/><link rel="stylesheet" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/docs/_next/static/chunks/webpack-af19fbe32e13fc779465.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/_app-cdbe91fdfdbd305577ef.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.ac30430b2138b8fefed8.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.dede6f8249fbb82aff52.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/extending-chat-widget/javascript-api-938b9ce2f7f44b9057e5.js" as="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="SWHJY-Y2PHV-NVPM2-PDH42-VMPQS",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+"SWHJY-Y2PHV-NVPM2-PDH42-VMPQS";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="bdpnbet4tppjwz2g3nea-f-c187c0281-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,o={"ak.v":"39","ak.cp":"1461330","ak.ai":parseInt("908031",10),"ak.ol":"0","ak.cr":1,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"13eae5ae","ak.r":6099,"ak.a2":n,"ak.m":"b","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":46288,"ak.gh":"124.155.222.130","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"bbr","ak.t":"1732696904","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==5LoX+Tqd8jAfrY7PIZWEXi0odKNhXwfySMMkBCw6P01v8EJISUsq9heC7/2nwoetrzIhlHk0GnHnGMW3eShIoPfkCm/C9jsqVsnyIruJUbr9hF6SWfS4phQ71NK5PWjFGcKoj/PqVdAaMjciJf9pECCCyJGeBgGRHFbEfa1J5tvVrSmUo91cAWaeo9Kc7ZrmbB+Y/fHAoKiSIghRB4uD0REaavO/9g7RbFQeqa6B3BtY6pM3bFqVBMgl3XFbkz8ve2tLMtrJVkmbZipXMMo7EcWJ232VNqQqVGgW/GeKYwL1NDqv4znjIViinD8MIiV0lbY58uGq5A3fihM9XGgmiJoLjSebZbW15ZWCC4sSVt52lMuJOQMbJAnBIGj2GyU/OzfE/2JzmEKMc+jVzvoKRp8QLsUTda12EAN1VE3Q7Ac=","ak.pv":"55","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><div id="__next"><style data-emotion-css="cvn8wj">.css-cvn8wj{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;background-color:#4a4a55;height:60px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;width:100%;z-index:99;}@media (min-width:768px){.css-cvn8wj{height:60px;}}</style><div class="css-cvn8wj"><style data-emotion-css="y9662z">.css-y9662z{background:#4a4a55;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}</style><div class="css-y9662z"><style data-emotion-css="qqcdow">.css-qqcdow{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:15px;margin:0 20px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;}.css-qqcdow > a > svg{margin:0;display:block;height:24px;}</style><nav class="css-qqcdow"><style data-emotion-css="c2yzgf">.css-c2yzgf{color:white;-webkit-text-decoration:none;text-decoration:none;font-weight:500;white-space:nowrap;margin-left:8px;}.css-c2yzgf:hover{-webkit-text-decoration:none;text-decoration:none;color:white;}</style><a href="https://text.com/" class="css-c2yzgf"><style data-emotion-css="ofqsza">.css-ofqsza{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.8em;height:40px;}.css-ofqsza .logo{margin:0;font-size:2em;font-weight:500;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-ofqsza .adjacent{margin:0;font-size:1.8em;font-weight:500;line-height:34px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-letter-spacing:-0.5px;-moz-letter-spacing:-0.5px;-ms-letter-spacing:-0.5px;letter-spacing:-0.5px;}.css-ofqsza .carrier{font-weight:500;-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:0.9s;animation-duration:0.9s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}</style><header class="css-ofqsza"><span class="logo">text<span class="carrier">|</span></span></header></a><a href="/docs" class="css-c2yzgf">Platform Docs</a></nav><style data-emotion-css="16b59id">.css-16b59id{margin:0;padding:0;max-width:calc(100% - 60px);width:calc(100% - 60px);overflow-x:auto;overflow-y:hidden;display:none;margin-right:10px;margin-left:40px;}@media (min-width:1024px){.css-16b59id{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:32px;}}</style><div class="css-16b59id"><style data-emotion-css="11hjr56">.css-11hjr56{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;position:relative;display:inline-block;height:100%;color:#ffffff;font-weight:400;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-11hjr56:hover{cursor:default;}</style><div class="css-11hjr56">Platform<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">APIs & SDKs<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">Resources<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div></div><style data-emotion-css="1hppjzv">.css-1hppjzv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1hppjzv"><style data-emotion-css="7wgbw1">.css-7wgbw1{display:none;}@media (min-width:1024px){.css-7wgbw1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:192px;margin-right:16px;}}</style><div class="DocSearch-Button-Desktop css-7wgbw1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><style data-emotion-css="1i8rrts">.css-1i8rrts{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;}@media (min-width:1024px){.css-1i8rrts{display:none;}}</style><div class="DocSearch-Button-Mobile css-1i8rrts"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><p>...</p><style data-emotion-css="pskeb7">@media (min-width:1024px){.css-pskeb7{display:none;}}</style><style data-emotion-css="19rp0xe">.css-19rp0xe{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:16px;cursor:pointer;}@media (min-width:1024px){.css-19rp0xe{display:none;}}@media (min-width:1024px){.css-19rp0xe{display:none;}}</style><svg width="32px" height="28px" fill="#ffffff" class="rmi rmi-menu css-19rp0xe" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"></path></svg></div></div></div><style data-emotion-css="ov1ktg">.css-ov1ktg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-ov1ktg"><style data-emotion-css="hpx2k5">.css-hpx2k5{border-right:1px solid #e2e2e4;height:50px;position:fixed;-webkit-transition:height 300ms;transition:height 300ms;display:block;bottom:0%;width:100%;opacity:1;z-index:10;box-shadow:0px 0px 8px rgba(0,0,0,0.25);background-color:white;}@media (min-width:768px){.css-hpx2k5{box-shadow:none;height:100vh;max-height:100vh;position:-webkit-sticky;position:sticky;top:60px;-webkit-transition:all 0s;transition:all 0s;width:260px;}}</style><aside class="css-hpx2k5"><style data-emotion-css="y8dejn">.css-y8dejn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;padding:10px 14px;cursor:pointer;}@media (min-width:768px){.css-y8dejn{display:none;}}</style><div class="css-y8dejn"><svg style="transform:rotate(270deg);transition:transform 300ms" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>Chat Widget JS API</div><style data-emotion-css="v8mm6">.css-v8mm6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (min-width:768px){.css-v8mm6{display:none;}}</style><div class="css-v8mm6"><style data-emotion-css="1pjh3pd">.css-1pjh3pd{width:100%;color:#62626D;}.css-1pjh3pd:hover{cursor:pointer;-webkit-text-decoration:none;text-decoration:none;background-color:#f6f6f7;}</style><a class="css-1pjh3pd"><style data-emotion-css="1yw2pv4">.css-1yw2pv4{padding:4px 14px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:16px;}</style><div class="css-1yw2pv4"><style data-emotion-css="5c7uuc">.css-5c7uuc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;}</style><div class="css-5c7uuc"><svg width="24" height="20px" fill="#62626D" class="rmi rmi-home undefined" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"></path></svg></div>Home</div></a></div><style data-emotion-css="1ln71vl">.css-1ln71vl{overflow:scroll;height:calc(100% - 90px);}@media (min-width:768px){.css-1ln71vl{height:calc(100% - 60px);position:fixed;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:100vh;position:-webkit-sticky;position:-webkit-sticky;position:sticky;top:0;margin-top:8px;}}</style><div class="css-1ln71vl"><style data-emotion-css="1psvkz3">.css-1psvkz3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-right:10px;font-weight:500;font-size:16px;border-radius:0px 8px 8px 0px;}.css-1psvkz3:hover{background-color:#f6f6f7;}</style><div class="css-1psvkz3"><style data-emotion-css="19nl305">.css-19nl305{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#62626D;width:100%;}.css-19nl305:hover{color:#4284F5;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;}</style><a class="css-19nl305"><style data-emotion-css="2hhlpj">.css-2hhlpj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:6px 16px 6px 20px;margin-right:10px;font-weight:500;font-size:16px;border-radius:0px 8px 8px 0px;width:100%;}.css-2hhlpj:hover{background-color:#f6f6f7;}</style><div class="css-2hhlpj"><style data-emotion-css="oe3dsw">.css-oe3dsw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:8px;}</style><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Overview</div></a></div><style data-emotion-css="1gg9bms">.css-1gg9bms{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-right:10px;font-weight:600;font-size:16px;border-radius:0px 8px 8px 0px;}.css-1gg9bms:hover{background-color:#f6f6f7;}</style><div class="css-1gg9bms"><style data-emotion-css="17iyluq">.css-17iyluq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#4284F5;width:100%;}.css-17iyluq:hover{color:#4284F5;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;}</style><a class="css-17iyluq"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Chat Widget JS API</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Customer SDK</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Chat Widget Moments</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Rich Messages</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Custom Identity Provider</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Chat Widget Adapters</div></a><style data-emotion-css="155ms1k">.css-155ms1k{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-right:5px;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 300ms;-webkit-transition:transform 300ms;transition:transform 300ms;cursor:pointer;}</style><div class="css-155ms1k"><svg width="24" height="24px" fill="#62626D" weight="24px" class="rmi rmi-chevron-right undefined" viewBox="0 0 24 24"><path d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z"></path></svg></div></div></div></aside><style data-emotion-css="1g06r20">.css-1g06r20{padding-bottom:30vh;position:relative;width:100%;}@media (min-width:768px){.css-1g06r20{width:calc(100% - 258px);max-width:900px;}}</style><div class="css-1g06r20"><style data-emotion-css="yofbie">.css-yofbie{width:100%;position:fixed;top:60px;right:0;z-index:40;-webkit-transition:left 0.3s ease-out;transition:left 0.3s ease-out;}@media (min-width:768px){.css-yofbie{left:260px;width:calc(100% - 260px);top:60px;}}</style><div class="css-yofbie"><style data-emotion-css="9hc061">.css-9hc061{padding:20px 24px 32px 60px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;}@media (max-width:1270px){.css-9hc061{background-color:#fff;padding-bottom:24px;}}@media (max-width:768px){.css-9hc061{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;padding-left:30px;}}</style><div class="css-9hc061"><style data-emotion-css="7fagxn">.css-7fagxn{font-weight:400;font-size:15px;line-height:22px;padding:7px 8px 7px 16px;}</style><button class="lc-btn lc-btn--secondary css-7fagxn" type="button"><div><style data-emotion-css="44gx6g">.css-44gx6g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;}</style><div class="css-44gx6g"><span>API version:</span><span>4.0 (stable)</span><svg width="20px" height="20px" fill="#424D57" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div></div></button></div></div><style data-emotion-css="c8i9h7">.css-c8i9h7{margin-top:120px;padding:0px 30px;}@media (min-width:768px){.css-c8i9h7{padding:0px 60px;}}.css-c8i9h7.redoc{margin-top:60px;display:block;}</style><article class=" css-c8i9h7"><style data-emotion-css="1lyzzun">.css-1lyzzun{margin:3em 0 1em;padding:2em 0 1em;}</style><div class="css-1lyzzun"><style data-emotion-css="12qxxrf">.css-12qxxrf{margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;font-weight:500;text-rendering:optimizeLegibility;font-size:2.25rem;line-height:1.1;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;}@media (min-width:768px){.css-12qxxrf{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}</style><h2 id="chat-widget-js-api" class="css-12qxxrf"><span>Chat Widget JS API</span><style data-emotion-css="1g0dr3m">.css-1g0dr3m{margin-top:8px;}.css-1g0dr3m > label{margin:0 0 5px 0;}.css-1g0dr3m label + div{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}</style></h2></div><style data-emotion-css="1679d3t">.css-1679d3t{border-bottom:1px solid #e0e4e9;padding-bottom:0.5em;}</style><h2 class="heading css-1679d3t"><style data-emotion-css="180507a">.css-180507a{color:inherit;-webkit-text-decoration:none;text-decoration:none;position:relative;}.css-180507a:hover{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-180507a:hover:before{content:"#";position:absolute;font-weight:300;left:-1em;top:1px;opacity:0.3;}.css-180507a:focus-visible{outline-width:0px;}</style><a id="introduction" href="#introduction" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#introduction"><span class="icon icon-link"></span></a>Introduction</a></h2><h3 class="heading"><a id="about-the-api" href="#about-the-api" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#about-the-api"><span class="icon icon-link"></span></a>About the API</a></h3><p>The Chat Widget JavaScript API lets you interact with the Chat Widget embedded on your site. It might come in handy whenever you want to gather some additional data using LiveChat, show or hide your Chat Widget on certain occasions, or amend its behavior in a way that is not provided by the standard settings.</p><p>This document focuses on Developers and requires a basic knowledge of JavaScript. However, if you would have any questions, don't hesitate to start a chat with our Support Team or add a new topic on our <a href="https://discord.gg/rFbJkYQFwp">Discord for Developers</a>.</p><h3 class="heading"><a id="getting-started" href="#getting-started" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#getting-started"><span class="icon icon-link"></span></a>Getting started</a></h3><p>The API is accessed through the <code>LiveChatWidget</code> object. It is being initialized within the LiveChat tracking code, which is used to install our Chat Widget on your site. If you haven't installed the code yet, you can either find it directly in the <a href="https://my.livechatinc.com/settings/code">LiveChat app</a> or copy it from here (remember to replace <code><LICENSE_NUMBER></code> with your license number):</p><style data-emotion-css="17buymi">.css-17buymi{width:100%;}@media (min-width:768px){.css-17buymi{padding:25px 25px 30px 0px;}}</style><div class="css-17buymi"><style data-emotion-css="16prjg8">.css-16prjg8{border:1px solid #e8e8e8;border-radius:6px;background-color:#505671;color:white;margin:0 0 20px;max-width:100%;--code-color:#f5fbff;--code-background:#505671;--code-string-color:#56d4bc;}</style><div class="css-16prjg8"><style data-emotion-css="13hnul0">.css-13hnul0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:5px 15px;background-color:#383f54;border-radius:8px 8px 0 0;color:#dee5e8;}.css-13hnul0 code{font-size:12px;max-width:100%;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;word-break:break-all;}.css-13hnul0 .code-sample-header{border:none;background-color:#383f54;color:#dee5e8;padding:0.2em 0;}</style><div class="css-13hnul0"><code class="code-sample-header">LIVECHAT TRACKING CODE</code><style data-emotion-css="1sg2lsz">.css-1sg2lsz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1sg2lsz"><style data-emotion-css="1wp1vo7">.css-1wp1vo7{position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:45px;}</style><div class="css-1wp1vo7"><style data-emotion-css="xnt8k0">.css-xnt8k0{position:relative;min-height:18px;}</style><div class="css-xnt8k0"><style data-emotion-css="6oazep">.css-6oazep{position:absolute;top:0;left:0;right:0;text-align:right;text-transform:capitalize;line-height:20px;font-size:13px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;opacity:0;-webkit-transition-delay:0.25s;transition-delay:0.25s;-webkit-transition:none;transition:none;}</style><div class="css-6oazep"><style data-emotion-css="11ycufd">.css-11ycufd{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;max-width:100%;overflow-x:auto;}</style><div class="css-11ycufd">Copied!</div></div><style data-emotion-css="139ndot">.css-139ndot{position:absolute;top:0;right:0;text-align:right;max-width:24px;opacity:1;-webkit-transition-delay:0.25;transition-delay:0.25;-webkit-transition:opacity 0.25s ease-in-out;transition:opacity 0.25s ease-in-out;}.css-139ndot:hover{cursor:pointer;}</style><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><style data-emotion-css="ju12u0">.css-ju12u0{min-height:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;overflow:scroll;}.css-ju12u0 code{display:inline-block;}</style><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-html"><code class="language-html"><span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span> <span class="token operator">=</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span><span class="token punctuation">.</span><span class="token property-access">license</span> <span class="token operator">=</span> <span class="token operator"><</span><span class="token constant">LICENSE_NUMBER</span><span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">n<span class="token punctuation">,</span>t<span class="token punctuation">,</span>c</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">function</span> <span class="token function">i</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword control-flow">return</span> e<span class="token punctuation">.</span><span class="token property-access">_h</span><span class="token operator">?</span>e<span class="token punctuation">.</span><span class="token method function property-access">_h</span><span class="token punctuation">.</span><span class="token method function property-access">apply</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">,</span>n<span class="token punctuation">)</span><span class="token operator">:</span>e<span class="token punctuation">.</span><span class="token property-access">_q</span><span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token keyword">var</span> e<span class="token operator">=</span><span class="token punctuation">{</span><span class="token literal-property property">_q</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">_h</span><span class="token operator">:</span><span class="token keyword null nil">null</span><span class="token punctuation">,</span><span class="token literal-property property">_v</span><span class="token operator">:</span><span class="token string">"2.0"</span><span class="token punctuation">,</span><span class="token function-variable function">on</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"on"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">once</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"once"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">off</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"off"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">get</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword control-flow">if</span><span class="token punctuation">(</span><span class="token operator">!</span>e<span class="token punctuation">.</span><span class="token property-access">_h</span><span class="token punctuation">)</span><span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">"[LiveChatWidget] You can't use getters before load."</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword control-flow">return</span> <span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"get"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">call</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token function">i</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"call"</span><span class="token punctuation">,</span>c<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">var</span> n<span class="token operator">=</span>t<span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span><span class="token string">"script"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>n<span class="token punctuation">.</span><span class="token property-access">async</span><span class="token operator">=</span><span class="token operator">!</span><span class="token number">0</span><span class="token punctuation">,</span>n<span class="token punctuation">.</span><span class="token property-access">type</span><span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token punctuation">,</span>n<span class="token punctuation">.</span><span class="token property-access">src</span><span class="token operator">=</span><span class="token string">"https://cdn.livechatinc.com/tracking.js"</span><span class="token punctuation">,</span>t<span class="token punctuation">.</span><span class="token property-access">head</span><span class="token punctuation">.</span><span class="token method function property-access">appendChild</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token operator">!</span>n<span class="token punctuation">.</span><span class="token property-access">__lc</span><span class="token punctuation">.</span><span class="token property-access">asyncInit</span><span class="token operator">&&</span>e<span class="token punctuation">.</span><span class="token method function property-access">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>n<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">LiveChatWidget</span></span><span class="token operator">=</span>n<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">LiveChatWidget</span></span><span class="token operator">||</span>e<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token dom variable">window</span><span class="token punctuation">,</span><span class="token dom variable">document</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">slice</span><span class="token punctuation">)</span><span class="token punctuation">)</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>noscript</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.livechat.com/chat-with/<LICENSE_NUMBER>/<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nofollow<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>Chat with us<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span> <span class="token punctuation">></span></span>, powered by <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.livechat.com/?welcome<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>noopener nofollow<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>LiveChat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>noscript</span> <span class="token punctuation">></span></span> <span class="token comment"></span> </code></pre></div></div></div></div><p>The API requires the newest version of the code snippet (≥2.0). If you had installed the code a while ago and the API presented here doesn't work, you should either update the code or use the <a href="/docs/extending-chat-widget/javascript-api/v1.0">old version of JS API</a>. You can check the current version of your snippet by calling the <code>scriptTagVersion</code> function:</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">scriptTagVersion</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">scriptTagVersion</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><p>The <code>LiveChatWidget</code> object comes with four functions:</p><ul><li><code>on</code> registers a callback function for a specific event</li><li><code>once</code> similar to <code>on</code> but after single event trigger the callback is removed</li><li><code>off</code> removes a callback registered by <code>on</code></li><li><code>call</code> allows you to invoke methods and setters</li><li><code>get</code> makes it possible to fetch data</li></ul><p>The usage of these functions is based on passing the correct arguments in the following pattern:</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">function</span><span class="token punctuation">(</span><span class="token string">"method"</span><span class="token punctuation">,</span> <span class="token string">"data"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p>For example, if you would like to set your customer's name to <code>John Doe</code>, this is how it would look like:</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"set_customer_name"</span><span class="token punctuation">,</span> <span class="token string">"John Doe"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="asynchronous-initialization" href="#asynchronous-initialization" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#asynchronous-initialization"><span class="icon icon-link"></span></a>Asynchronous Initialization</a></h3><p>Asynchronous initialization is an optional feature available for Chat Widget via JavaScript API. It allows for far more control over the moment when the Chat Widget should be loaded. It can be especially useful if you would like to make widget initialization happen as a consequence of some user interaction, or your own application business logic event.</p><p>This feature is disabled by default, so the Chat Widget loads automatically just after the snippet code is executed. In order to enable it, you need to explicitly set <code>__lc.asyncInit</code> property to <code>true</code>.</p><div class="remark-highlight"><pre class="language-html"><code class="language-html"><span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span> <span class="token operator">=</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span><span class="token punctuation">.</span><span class="token property-access">license</span> <span class="token operator">=</span> <span class="token operator"><</span><span class="token constant">LICENSE_NUMBER</span><span class="token operator">></span><span class="token punctuation">;</span> <span class="token comment">// Add the following line after your LiveChat license number</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span><span class="token punctuation">.</span><span class="token property-access">asyncInit</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">/* rest of the standard snippet code */</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token comment"></span> </code></pre></div><p>From now on the snippet code will be executed but the Chat Widget and its resources will not be loaded. It means that although you will have access to <code>LiveChatWidget</code> object, the widget itself will not be present on your website and the <code>ready</code> callback will not be triggered.</p><p>Later in your code you can initialize Chat Widget manually when needed. To do that simply call <code>init</code> function from <code>LiveChatWidget</code> object.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> </code></pre></div><h2 class="heading css-1679d3t"><a id="methods" href="#methods" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#methods"><span class="icon icon-link"></span></a>Methods</a></h2><p>JS API methods allow you to create custom ways to interact with a widget. For example, you can hide your widget based on specific conditions or trigger a sales tracker defined earlier in the LiveChat application.</p><p>Here's the list of available methods:</p><ul><li><a href="/docs/extending-chat-widget/javascript-api#maximize">Maximize</a></li><li><a href="/docs/extending-chat-widget/javascript-api#minimize">Minimize</a></li><li><a href="/docs/extending-chat-widget/javascript-api#hide">Hide</a></li><li><a href="/docs/extending-chat-widget/javascript-api#destroy">Destroy</a></li><li><a href="/docs/extending-chat-widget/javascript-api#hide-greeting">Hide greeting</a></li><li><a href="/docs/extending-chat-widget/javascript-api#trigger-sales-tracker">Trigger sales tracker</a></li></ul><h3 class="heading"><a id="maximize" href="#maximize" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#maximize"><span class="icon icon-link"></span></a>Maximize</a></h3><p>It maximizes the Chat Widget.</p><h5 class="heading"><a id="example" href="#example" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"maximize"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p>To maximize the Chat Widget and pre-fill the chat input field with a predefined message, you can use the optional messageDraft param.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"maximize"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">messageDraft</span><span class="token operator">:</span> <span class="token string">"I need help!"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p>This method maximizes the Chat Widget and automatically inserts "I need help!" into the chat input field. If a Pre-chat form is enabled, it instead creates a message draft that is sent when the form is submitted.</p><p>The action will have no effect if the widget's current state prevents message entry or if the user already has a message draft.</p><h3 class="heading"><a id="minimize" href="#minimize" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#minimize"><span class="icon icon-link"></span></a>Minimize</a></h3><p>It minimizes the Chat Widget.</p><h5 class="heading"><a id="example-1" href="#example-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-1"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"minimize"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="hide" href="#hide" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#hide"><span class="icon icon-link"></span></a>Hide</a></h3><p>It hides the Chat Widget on the site. You will need to use either 'maximize', or 'minimize' API calls to show it afterwards.</p><h5 class="heading"><a id="example-2" href="#example-2" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-2"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"hide"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="destroy" href="#destroy" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#destroy"><span class="icon icon-link"></span></a>Destroy</a></h3><p>It destroys the Chat Widget. It won't be available for further actions until the window is refreshed.</p><h5 class="heading"><a id="example-3" href="#example-3" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-3"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"destroy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="hide-greeting" href="#hide-greeting" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#hide-greeting"><span class="icon icon-link"></span></a>Hide greeting</a></h3><p>It hides the currently displayed greeting. In order to hide particular greeting you can listen to <style data-emotion-css="kbi7q3">.css-kbi7q3{-webkit-text-decoration:none;text-decoration:none;}.css-kbi7q3 svg{vertical-align:middle;margin-left:2px;margin-right:4px;color:#4284F5;}.css-kbi7q3 code{color:#4284F5;}.css-kbi7q3:hover,.css-kbi7q3:active{-webkit-text-decoration:none;text-decoration:none;}.css-kbi7q3:hover code,.css-kbi7q3:active code{color:#4284F5;-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="/docs/extending-chat-widget/javascript-api#on-new-event" class="css-kbi7q3"><code>new_event</code></a> or <a href="/docs/extending-chat-widget/javascript-api#on-greeting-hidden" class="css-kbi7q3"><code>greeting_hidden</code></a> callbacks to know when greeting with specified <code>id</code> or <code>uniqueId</code> appears and disappears accordingly.</p><h5 class="heading"><a id="example-4" href="#example-4" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-4"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"hide_greeting"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="trigger-sales-tracker" href="#trigger-sales-tracker" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#trigger-sales-tracker"><span class="icon icon-link"></span></a>Trigger sales tracker</a></h3><p>It triggers a sales tracker created in the LiveChat application and passes over data about a sale. The data is then visible in LiveChat's Reports and Archives. For more information about how Sales Tracker works and how to set it up on your website, check out our official Help Center article: <a target="_blank" rel="noopener noreferrer" href="https://www.livechat.com/help/sales-tracker/#how-sales-tracker-works-in-practice">How Sales Tracker works in practice</a>.</p><h5 class="heading"><a id="example-5" href="#example-5" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-5"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"trigger_sales_tracker"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">trackerId</span><span class="token operator">:</span> <span class="token string">"V9x4nEIlFPhblkHW9qIOGLakMXen5NS0"</span><span class="token punctuation">,</span> <span class="token literal-property property">orderPrice</span><span class="token operator">:</span> total_order_price<span class="token punctuation">,</span> <span class="token literal-property property">orderId</span><span class="token operator">:</span> order_number<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h5 class="heading"><a id="payload" href="#payload" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload"><span class="icon icon-link"></span></a>Payload</a></h5><style data-emotion-css="q76ucn">.css-q76ucn{width:100%;overflow-x:auto;}</style><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>trackerId*</td><td><code>string</code></td><td>the Chat Widget state</td></tr><tr><td>orderPrice</td><td><code>string</code></td><td>Customer data from the Chat Widget</td></tr><tr><td>orderId</td><td><code>string</code></td><td>Customer data from the Chat Widget</td></tr></tbody></table></div><p>*required – <code>trackerId</code> can be obtained after creating a sales tracker in LiveChat application</p><h2 class="heading css-1679d3t"><a id="getters" href="#getters" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#getters"><span class="icon icon-link"></span></a>Getters</a></h2><p>You can use getters to fetch the data from the Chat Widget.</p><p>Available getters:</p><ul><li><a href="/docs/extending-chat-widget/javascript-api#get-state">Get state</a></li><li><a href="/docs/extending-chat-widget/javascript-api#get-customer-data">Get customer data</a></li><li><a href="/docs/extending-chat-widget/javascript-api#get-chat-data">Get chat data</a></li></ul><h3 class="heading"><a id="get-state" href="#get-state" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#get-state"><span class="icon icon-link"></span></a>Get state</a></h3><p>It returns the Chat Widget state. This includes Widget visibility and license availability.</p><h5 class="heading"><a id="example-6" href="#example-6" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-6"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">"state"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h5 class="heading"><a id="response" href="#response" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#response"><span class="icon icon-link"></span></a>Response</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>availability</td><td><code>'online'</code> | <code>'offline'</code></td><td>Group's availability</td></tr><tr><td>visibility</td><td><code>'maximized'</code> | <code>'minimized'</code> | <code>'hidden'</code></td><td>the Chat Widget visibility</td></tr></tbody></table></div><h3 class="heading"><a id="get-customer-data" href="#get-customer-data" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#get-customer-data"><span class="icon icon-link"></span></a>Get customer data</a></h3><p>It returns a filtered list of customer data.</p><h5 class="heading"><a id="example-7" href="#example-7" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-7"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">"customer_data"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h5 class="heading"><a id="response-1" href="#response-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#response-1"><span class="icon icon-link"></span></a>Response</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>id</td><td><code>string</code></td><td>unique customer id</td></tr><tr><td>name</td><td><code>string</code></td><td>customer name, as provided</td></tr><tr><td>email</td><td><code>string</code></td><td>customer e-mail address, as provided</td></tr><tr><td>isReturning</td><td><code>boolean</code></td><td>if this customer visited you before</td></tr><tr><td>status</td><td><code>'queued'</code> | <code>'chatting'</code> | <code>'browsing'</code> | <code>'invited'</code></td><td>Customer's status</td></tr><tr><td>sessionVariables</td><td><code>Record<string, string></code></td><td>additional free-form session information</td></tr></tbody></table></div><h3 class="heading"><a id="get-chat-data" href="#get-chat-data" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#get-chat-data"><span class="icon icon-link"></span></a>Get chat data</a></h3><p>It returns chat data which contains current chat and thread ids.</p><h5 class="heading"><a id="example-8" href="#example-8" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-8"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">"chat_data"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h5 class="heading"><a id="response-2" href="#response-2" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#response-2"><span class="icon icon-link"></span></a>Response</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td><code>string</code></td><td>unique chat id</td></tr><tr><td>threadId</td><td><code>string</code></td><td>unique current thread id</td></tr></tbody></table></div><h2 class="heading css-1679d3t"><a id="setters" href="#setters" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#setters"><span class="icon icon-link"></span></a>Setters</a></h2><p>Various data can be sent over to the LiveChat integration so that your Agents can use it. For more information, you can read these articles in our Help Center: <a href="https://www.livechat.com/help/custom-variables-configuration/">https://www.livechat.com/help/custom-variables-configuration/</a>.</p><p>Available setters:</p><ul><li><a href="/docs/extending-chat-widget/javascript-api#set-session-variables">Set session variables</a></li><li><a href="/docs/extending-chat-widget/javascript-api#update-session-variables">Update session variables</a></li><li><a href="/docs/extending-chat-widget/javascript-api#set-customer-name">Set customer name</a></li><li><a href="/docs/extending-chat-widget/javascript-api#set-customer-email">Set customer email</a></li></ul><h3 class="heading"><a id="set-session-variables" href="#set-session-variables" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#set-session-variables"><span class="icon icon-link"></span></a>Set session variables</a></h3><p>Creates new session variables, or replaces the ones set previously.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"set_session_variables"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">"john.doe"</span><span class="token punctuation">,</span> <span class="token literal-property property">cart_value</span><span class="token operator">:</span> <span class="token string">"450"</span><span class="token punctuation">,</span> <span class="token string-property property">"order date"</span><span class="token operator">:</span> <span class="token string">"05/21/2019"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="update-session-variables" href="#update-session-variables" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#update-session-variables"><span class="icon icon-link"></span></a>Update session variables</a></h3><p>It changes the values of your session variables. Please note that the existing variables won't be replaced. The new session variables will be included together with the ones set previously.</p><h5 class="heading"><a id="example-9" href="#example-9" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-9"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"update_session_variables"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">"j.doe"</span><span class="token punctuation">,</span> <span class="token literal-property property">cart_value</span><span class="token operator">:</span> <span class="token string">"400"</span><span class="token punctuation">,</span> <span class="token string-property property">"order date"</span><span class="token operator">:</span> <span class="token string">"06/15/2019"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="set-customer-name" href="#set-customer-name" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#set-customer-name"><span class="icon icon-link"></span></a>Set customer name</a></h3><p>It sets the customer's name.</p><h5 class="heading"><a id="example-10" href="#example-10" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-10"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"set_customer_name"</span><span class="token punctuation">,</span> <span class="token string">"John Doe"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="set-customer-email" href="#set-customer-email" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#set-customer-email"><span class="icon icon-link"></span></a>Set customer email</a></h3><p>It sets the customer's email address.</p><h5 class="heading"><a id="example-11" href="#example-11" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#example-11"><span class="icon icon-link"></span></a>Example</a></h5><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"set_customer_email"</span><span class="token punctuation">,</span> <span class="token string">"john@example.com"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h2 class="heading css-1679d3t"><a id="callbacks" href="#callbacks" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#callbacks"><span class="icon icon-link"></span></a>Callbacks</a></h2><p>Callbacks allow you to react to the events triggered by the Chat Widget. You can use them to add custom behaviors when certain events happen. This can be accomplished by subscribing a callback with the API.</p><p>Available callbacks:</p><ul><li><a href="/docs/extending-chat-widget/javascript-api#on-ready">On ready</a></li><li><a href="/docs/extending-chat-widget/javascript-api#on-availability-changed">On availability changed</a></li><li><a href="/docs/extending-chat-widget/javascript-api#on-visibility-changed">On visibility changed</a></li><li><a href="/docs/extending-chat-widget/javascript-api#on-customer-status-changed">On customer status changed</a></li><li><a href="/docs/extending-chat-widget/javascript-api#on-new-event">On new event</a></li><li><a href="/docs/extending-chat-widget/javascript-api#on-form-submitted">On form submitted</a></li><li><a href="/docs/extending-chat-widget/javascript-api#on-rating-submitted">On rating submitted</a></li><li><a href="/docs/extending-chat-widget/javascript-api#on-greeting-dismissed">On greeting dismissed</a></li><li><a href="/docs/extending-chat-widget/javascript-api#on-rich-message-button-clicked">On rich message button clicked</a></li></ul><h3 class="heading"><a id="on-ready" href="#on-ready" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-ready"><span class="icon icon-link"></span></a>On ready</a></h3><p>The Chat Widget has finished loading. If the Chat Widget is already loaded the provided handler function will be called immediately. With this callback, you will receive the Chat Widget state and customer data as if requested by their getters.</p><h5 class="heading"><a id="payload-1" href="#payload-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload-1"><span class="icon icon-link"></span></a>Payload</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>state</td><td><a href="/docs/extending-chat-widget/javascript-api#get-state">WidgetState</a></td><td>the Chat Widget state</td></tr><tr><td>customerData</td><td><a href="/docs/extending-chat-widget/javascript-api#get-customer-data">CustomerData</a></td><td>Customer data from the Chat Widget</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onReady</span><span class="token punctuation">(</span><span class="token parameter">initialData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Chat Widget is ready</span> <span class="token keyword">var</span> state <span class="token operator">=</span> initialData<span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span> <span class="token keyword">var</span> customerData <span class="token operator">=</span> initialData<span class="token punctuation">.</span><span class="token property-access">customerData</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'ready'</span><span class="token punctuation">,</span> onReady<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('ready', onReady)</span> </code></pre></div><h3 class="heading"><a id="on-availability-changed" href="#on-availability-changed" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-availability-changed"><span class="icon icon-link"></span></a>On availability changed</a></h3><p>Availability has changed for the current group.</p><h5 class="heading"><a id="payload-2" href="#payload-2" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload-2"><span class="icon icon-link"></span></a>Payload</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>availability</td><td><code>"online"</code> | <code>"offline"</code></td><td>Availability of a group</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onAvailabilityChanged</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token property-access">availability</span> <span class="token operator">===</span> <span class="token string">"online"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// we're available to chat!</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span> <span class="token comment">// sadly, no agents are available at the moment.</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'availability_changed'</span><span class="token punctuation">,</span> onAvailabilityChanged<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('availability_changed', onAvailabilityChanged)</span> </code></pre></div><h3 class="heading"><a id="on-visibility-changed" href="#on-visibility-changed" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-visibility-changed"><span class="icon icon-link"></span></a>On visibility changed</a></h3><p>It is called once the visibility of the Chat Widget has changed. This applies to both user actions like maximizing or minimizing the window as well as hiding or showing the Chat Widget through the use of this API.</p><h5 class="heading"><a id="payload-3" href="#payload-3" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload-3"><span class="icon icon-link"></span></a>Payload</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>visibility</td><td><code>"maximized"</code> | <code>"minimized"</code> | <code>"hidden"</code></td><td>the Chat Widget visibility</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onVisibilityChanged</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token property-access">visibility</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">"maximized"</span><span class="token operator">:</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"minimized"</span><span class="token operator">:</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"hidden"</span><span class="token operator">:</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'visibility_changed'</span><span class="token punctuation">,</span> onVisibilityChanged<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('visibility_changed', onVisibilityChanged)</span> </code></pre></div><h3 class="heading"><a id="on-customer-status-changed" href="#on-customer-status-changed" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-customer-status-changed"><span class="icon icon-link"></span></a>On customer status changed</a></h3><p>It is called once the status of your customer has changed. This can be used to track the following info:</p><ul><li>If and when Customers are being invited to chat</li><li>If Customers are already chatting</li><li>If they are waiting for an agent to become available in the queue</li></ul><h5 class="heading"><a id="payload-4" href="#payload-4" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload-4"><span class="icon icon-link"></span></a>Payload</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>status</td><td><code>'queued'</code> | <code>'chatting'</code> | <code>'invited'</code> |<code>'browsing'</code></td><td>Customer's status</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onCustomerStatusChanged</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token property-access">status</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">"queued"</span><span class="token operator">:</span> <span class="token comment">// customer is in queue</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"chatting"</span><span class="token operator">:</span> <span class="token comment">// customer is currently chatting</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"invited"</span><span class="token operator">:</span> <span class="token comment">// customer received an invitation but didn't start the chat</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"browsing"</span><span class="token operator">:</span> <span class="token comment">// customer is in idle state, not queued, not chatting, and didn't receive an invitation</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'customer_status_changed'</span><span class="token punctuation">,</span> onCustomerStatusChanged<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('customer_status_changed', onCustomerStatusChanged)</span> </code></pre></div><h3 class="heading"><a id="on-new-event" href="#on-new-event" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-new-event"><span class="icon icon-link"></span></a>On new event</a></h3><p>It is called for both incoming and outgoing events.</p><h5 class="heading"><a id="payload-5" href="#payload-5" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload-5"><span class="icon icon-link"></span></a>Payload</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>timestamp</td><td><code>number</code></td><td>Event's send timestamp</td></tr><tr><td>type</td><td><code>'message'</code> | <code>'rich_message'</code> | <code>'file'</code></td><td>Event's type</td></tr><tr><td>author.id</td><td><code>string</code></td><td>Event's author id</td></tr><tr><td>author.type</td><td><code>'customer'</code> | <code>'agent'</code></td><td>Event's author type</td></tr><tr><td><strong>If new event is a greeting:</strong></td><td></td><td></td></tr><tr><td>greeting.id</td><td><code>number</code></td><td>Greeting's template id</td></tr><tr><td>greeting.uniqueId</td><td><code>string</code></td><td>Greeting's event uniqueId</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onNewEvent</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span><span class="token property-access">type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">"message"</span><span class="token operator">:</span> <span class="token comment">// handle new message event</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"rich_message"</span><span class="token operator">:</span> <span class="token comment">// handle new rich_message event</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"file"</span><span class="token operator">:</span> <span class="token comment">// handle new file event</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span><span class="token property-access">greeting</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// new event is a greeting</span> <span class="token comment">// greeting properties are available</span> <span class="token keyword">var</span> id <span class="token operator">=</span> greeting<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">;</span> <span class="token keyword">var</span> uniqueId <span class="token operator">=</span> greeting<span class="token punctuation">.</span><span class="token property-access">uniqueId</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'new_event'</span><span class="token punctuation">,</span> onNewEvent<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('new_event', onNewEvent)</span> </code></pre></div><h3 class="heading"><a id="on-form-submitted" href="#on-form-submitted" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-form-submitted"><span class="icon icon-link"></span></a>On form submitted</a></h3><p>It is called after a form has been submitted in the chat.</p><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>type</td><td><code>"prechat"</code> | <code>"postchat"</code> | <code>"ticket"</code></td><td>Form's type</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onFormSubmitted</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token property-access">type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">"prechat"</span><span class="token operator">:</span> <span class="token comment">// prechat submitted</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"postchat"</span><span class="token operator">:</span> <span class="token comment">// postchat submitted</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"ticket"</span><span class="token operator">:</span> <span class="token comment">// ticket submitted</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'form_submitted'</span><span class="token punctuation">,</span> onFormSubmitted<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('form_submitted', onFormSubmitted)</span> </code></pre></div><h3 class="heading"><a id="on-rating-submitted" href="#on-rating-submitted" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-rating-submitted"><span class="icon icon-link"></span></a>On rating submitted</a></h3><p>It is called after the customer has rated the chat, or cancelled the previous rating.</p><h5 class="heading"><a id="payload-6" href="#payload-6" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload-6"><span class="icon icon-link"></span></a>Payload</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>value</td><td><code>"good"</code> | <code>"bad"</code> | <code>"none"</code></td><td>Customer's rating value</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onRatingSubmitted</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// do something</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'rating_submitted'</span><span class="token punctuation">,</span> onRatingSubmitted<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('rating_submitted', onRatingSubmitted)</span> </code></pre></div><h3 class="heading"><a id="on-greeting-displayed" href="#on-greeting-displayed" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-greeting-displayed"><span class="icon icon-link"></span></a>On greeting displayed</a></h3><p>It is called after the greeting has been displayed to the customer.</p><h5 class="heading"><a id="payload-7" href="#payload-7" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload-7"><span class="icon icon-link"></span></a>Payload</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>id</td><td><code>number</code></td><td>Greeting's template id</td></tr><tr><td>uniqueId</td><td><code>string</code></td><td>Greeting's event uniqueId</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onGreetingDisplayed</span><span class="token punctuation">(</span><span class="token parameter">greeting</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// greeting has been displayed</span> <span class="token keyword">var</span> id <span class="token operator">=</span> greeting<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">;</span> <span class="token keyword">var</span> uniqueId <span class="token operator">=</span> greeting<span class="token punctuation">.</span><span class="token property-access">uniqueId</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'greeting_displayed'</span><span class="token punctuation">,</span> onGreetingDisplayed<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('greeting_displayed', onGreetingDisplayed)</span> </code></pre></div><h3 class="heading"><a id="on-greeting-hidden" href="#on-greeting-hidden" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-greeting-hidden"><span class="icon icon-link"></span></a>On greeting hidden</a></h3><p>It is called after the greeting has been cancelled by the customer or <a href="/docs/extending-chat-widget/javascript-api#hide-greeting" class="css-kbi7q3"><code>hide_greeting</code></a> method.</p><h5 class="heading"><a id="payload-8" href="#payload-8" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload-8"><span class="icon icon-link"></span></a>Payload</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>id</td><td><code>number</code></td><td>Greeting's template id</td></tr><tr><td>uniqueId</td><td><code>string</code></td><td>Greeting's event uniqueId</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onGreetingHidden</span><span class="token punctuation">(</span><span class="token parameter">greeting</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// greeting has been hidden</span> <span class="token keyword">var</span> id <span class="token operator">=</span> greeting<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">;</span> <span class="token keyword">var</span> uniqueId <span class="token operator">=</span> greeting<span class="token punctuation">.</span><span class="token property-access">uniqueId</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'greeting_hidden'</span><span class="token punctuation">,</span> onGreetingHidden<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('greeting_hidden', onGreetingHidden)</span> </code></pre></div><h3 class="heading"><a id="on-rich-message-button-clicked" href="#on-rich-message-button-clicked" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#on-rich-message-button-clicked"><span class="icon icon-link"></span></a>On rich message button clicked</a></h3><p>It is called after the rich message button has been clicked by the customer.</p><h5 class="heading"><a id="payload-9" href="#payload-9" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#payload-9"><span class="icon icon-link"></span></a>Payload</a></h5><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>eventId</td><td><code>string</code></td><td>Button's owner event's id</td></tr><tr><td>postbackId</td><td><code>string</code></td><td>Clicked button's postback id</td></tr><tr><td><strong>If button was included in greeting event:</strong></td><td></td><td></td></tr><tr><td>greeting.id</td><td><code>number</code></td><td>Greeting's template id</td></tr><tr><td>greeting.uniqueId</td><td><code>string</code></td><td>Greeting's event uniqueId</td></tr></tbody></table></div><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">onRichMessageButtonClicked</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// rich message button clicked</span> <span class="token keyword">var</span> eventId <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token property-access">eventId</span><span class="token punctuation">;</span> <span class="token keyword">var</span> postbackId <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token property-access">postbackId</span><span class="token punctuation">;</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token property-access">greeting</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// clicked button belongs to greeting event</span> <span class="token keyword">var</span> greetingId <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token property-access">greeting</span><span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">;</span> <span class="token keyword">var</span> greetingUniqueId <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token property-access">greeting</span><span class="token punctuation">.</span><span class="token property-access">uniqueId</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'rich_message_button_clicked'</span><span class="token punctuation">,</span> onRichMessageButtonClicked<span class="token punctuation">)</span> <span class="token comment">// LiveChatWidget.off('rich_message_button_clicked', onRichMessageButtonClicked)</span> </code></pre></div><h2 class="heading css-1679d3t"><a id="playground" href="#playground" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#playground"><span class="icon icon-link"></span></a>Playground</a></h2><p>Here's where you can play with the Chat Widget JavaScript API in an interactive environment. Use the buttons and inputs on the left side of the Widget or try to invoke some functions directly in the console.</p><iframe src="https://codesandbox.io/embed/chat-widet-js-api-x32pg?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark&view=preview" style="width:100%;height:750px;max-height:100vh;bordr:0;bordr-radius:4px;overlow:hidden"></iframe><h2 class="heading css-1679d3t"><a id="examples" href="#examples" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#examples"><span class="icon icon-link"></span></a>Examples</a></h2><p>Here you can find some example usage of the Chat Widget JavaScript API. They all require the Widget to be installed on the page and <code>window.LiveChatWidget</code> to be defined.</p><h3 class="heading"><a id="show-the-widget-after-time" href="#show-the-widget-after-time" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#show-the-widget-after-time"><span class="icon icon-link"></span></a>Show the Widget after time</a></h3><p>Show the Chat Widget after 30 seconds and keep it open after reloading.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">"visibility_changed"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token property-access">visibility</span> <span class="token operator">===</span> <span class="token string">"maximized"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token dom variable">localStorage</span><span class="token punctuation">.</span><span class="token method function property-access">setItem</span><span class="token punctuation">(</span><span class="token string">"livechat_chat_visible"</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> isWidgetVisible <span class="token operator">=</span> <span class="token known-class-name class-name">Boolean</span><span class="token punctuation">(</span><span class="token dom variable">localStorage</span><span class="token punctuation">.</span><span class="token method function property-access">getItem</span><span class="token punctuation">(</span><span class="token string">"livechat_chat_visible"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isWidgetVisible<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"maximize"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">30000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre></div><h3 class="heading"><a id="open-the-widget-using-the-button" href="#open-the-widget-using-the-button" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#open-the-widget-using-the-button"><span class="icon icon-link"></span></a>Open the Widget using the button</a></h3><p>Show the hidden or minimized Widget after a button has been clicked. You can change the Widget visibility as described in our <a href="https://www.livechat.com/help/chat-widget-visibility/">Help Center</a></p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">var</span> chatButton <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">"chat-btn"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> chatButton<span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"maximize"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="prefill-username-and-email" href="#prefill-username-and-email" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#prefill-username-and-email"><span class="icon icon-link"></span></a>Prefill username and email</a></h3><p>It sets the Customers name and email using their login and email.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">parse</span><span class="token punctuation">(</span><span class="token dom variable">localStorage</span><span class="token punctuation">.</span><span class="token method function property-access">getItem</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"set_customer_name"</span><span class="token punctuation">,</span> user<span class="token punctuation">.</span><span class="token property-access">login</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span><span class="token string">"set_customer_email"</span><span class="token punctuation">,</span> user<span class="token punctuation">.</span><span class="token property-access">email</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 class="heading"><a id="initialize-widget-asynchronusly-on-button-click" href="#initialize-widget-asynchronusly-on-button-click" class="reference css-180507a"><a href="/docs/extending-chat-widget/javascript-api#initialize-widget-asynchronusly-on-button-click"><span class="icon icon-link"></span></a>Initialize Widget asynchronusly on button click</a></h3><p>Initialize Chat Widget after clicking the button.</p><div class="remark-highlight"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span> <span class="token operator">=</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span><span class="token punctuation">.</span><span class="token property-access">license</span> <span class="token operator">=</span> <span class="token operator"><</span><span class="token constant">LICENSE_NUMBER</span><span class="token operator">></span><span class="token punctuation">;</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">__lc</span><span class="token punctuation">.</span><span class="token property-access">asyncInit</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">/* rest of the standard snippet code */</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chat-btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Chat with us!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">var</span> chatButton <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'chat-btn'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> chatButton<span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Initialize Chat Widget</span> <span class="token maybe-class-name">LiveChatWidget</span><span class="token punctuation">.</span><span class="token method function property-access">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre></div><style data-emotion-css="1fsewzh">.css-1fsewzh{margin-top:50px;}.css-1fsewzh > label{margin:0 0 5px 0;}.css-1fsewzh label + div{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}</style></article></div><p>...</p></div><style data-emotion-css="1mpu5jj">.css-1mpu5jj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#f6f6f7;color:#424d57;min-height:248px;margin-bottom:45px;}@media (min-width:768px){.css-1mpu5jj{margin-bottom:0px;}}</style><div class="css-1mpu5jj"><style data-emotion-css="dtzkur">.css-dtzkur{width:100%;padding:20px;}@media (min-width:768px){.css-dtzkur{margin-top:75px;padding:0;width:160px;}}</style><div class="css-dtzkur"><style data-emotion-css="r8rj3w">.css-r8rj3w{font-weight:600;font-size:16px;line-height:24px;color:#424d57;}</style><div class="css-r8rj3w">Join the community</div><style data-emotion-css="1ws0nkq">.css-1ws0nkq{font-weight:400;font-size:12px;line-height:20px;color:#424d57;}</style><div class="css-1ws0nkq">Get in direct contact with us through Discord.</div><style data-emotion-css="652pjx">.css-652pjx:hover{-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://discord.gg/MGFyhbdFxt" target="_blank" rel="noopener noreferrer" class="css-652pjx"><style data-emotion-css="y77wuh">.css-y77wuh{margin-top:5px;}</style><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_613_10386)"><path d="M16.9308 1.63294C15.6561 1.04804 14.2892 0.617109 12.8599 0.370298C12.8339 0.365535 12.8079 0.377439 12.7945 0.401247C12.6187 0.713926 12.4239 1.12184 12.2876 1.44246C10.7503 1.21232 9.22099 1.21232 7.71527 1.44246C7.57887 1.11471 7.37707 0.713926 7.20048 0.401247C7.18707 0.378233 7.16107 0.366329 7.13504 0.370298C5.70659 0.616321 4.33963 1.04725 3.06411 1.63294C3.05307 1.6377 3.04361 1.64564 3.03732 1.65595C0.444493 5.52959 -0.265792 9.30801 0.0826501 13.0396C0.0842267 13.0578 0.0944749 13.0753 0.108665 13.0864C1.81934 14.3427 3.47642 15.1054 5.10273 15.6109C5.12876 15.6188 5.15634 15.6093 5.1729 15.5879C5.55761 15.0625 5.90054 14.5086 6.19456 13.926C6.21192 13.8919 6.19535 13.8514 6.15989 13.838C5.61594 13.6316 5.098 13.38 4.59977 13.0943C4.56037 13.0713 4.55721 13.015 4.59347 12.988C4.69831 12.9094 4.80318 12.8277 4.9033 12.7451C4.92141 12.7301 4.94665 12.7269 4.96794 12.7364C8.24107 14.2308 11.7846 14.2308 15.0191 12.7364C15.0404 12.7261 15.0657 12.7293 15.0846 12.7443C15.1847 12.8269 15.2895 12.9094 15.3952 12.988C15.4314 13.015 15.4291 13.0713 15.3897 13.0943C14.8914 13.3856 14.3735 13.6316 13.8288 13.8372C13.7933 13.8507 13.7775 13.8919 13.7949 13.926C14.0952 14.5078 14.4381 15.0617 14.8157 15.5871C14.8315 15.6093 14.8599 15.6188 14.8859 15.6109C16.5201 15.1054 18.1772 14.3427 19.8879 13.0864C19.9028 13.0753 19.9123 13.0586 19.9139 13.0404C20.3309 8.72626 19.2154 4.97883 16.9568 1.65674C16.9513 1.64564 16.9419 1.6377 16.9308 1.63294ZM6.68335 10.7674C5.69792 10.7674 4.88594 9.86274 4.88594 8.75167C4.88594 7.6406 5.68217 6.7359 6.68335 6.7359C7.69239 6.7359 8.49651 7.64855 8.48073 8.75167C8.48073 9.86274 7.68451 10.7674 6.68335 10.7674ZM13.329 10.7674C12.3435 10.7674 11.5316 9.86274 11.5316 8.75167C11.5316 7.6406 12.3278 6.7359 13.329 6.7359C14.338 6.7359 15.1421 7.64855 15.1264 8.75167C15.1264 9.86274 14.338 10.7674 13.329 10.7674Z" fill="#424D57"></path></g><defs><clipPath id="clip0_613_10386"><rect width="20" height="15.493" fill="white" transform="translate(0 0.25354)"></rect></clipPath></defs></svg></i><div>Discord</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Follow us</div><div class="css-1ws0nkq">Follow our insightful tweets and interact with our content.</div><a href="https://twitter.com/TextPlatform" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="24" height="24" class="rmi rmi-twitter undefined" viewBox="0 0 24 24"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path></svg></i><div>Twitter</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contribute</div><div class="css-1ws0nkq">See something that's wrong or unclear? Submit a pull request.</div><a href="https://github.com/livechat/livechat-public-docs" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="24" height="24" class="rmi rmi-github undefined" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"></path></svg></i><div>GitHub</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contact us</div><div class="css-1ws0nkq">Want to share feedback? Reach us at: <a href="mailto:developers@text.com">developers@text.com</a></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/extending-chat-widget/javascript-api","query":{},"buildId":"mT926s0W5VyhfFaApGsyO","assetPrefix":"/docs","runtimeConfig":{},"nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/docs/_next/static/chunks/polyfills-c2dc1d9251306528e50c.js"></script><script src="/docs/_next/static/chunks/webpack-af19fbe32e13fc779465.js" async=""></script><script src="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" async=""></script><script src="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" async=""></script><script src="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" async=""></script><script src="/docs/_next/static/chunks/pages/_app-cdbe91fdfdbd305577ef.js" async=""></script><script src="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" async=""></script><script src="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.ac30430b2138b8fefed8.js" async=""></script><script src="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.dede6f8249fbb82aff52.js" async=""></script><script src="/docs/_next/static/chunks/pages/extending-chat-widget/javascript-api-938b9ce2f7f44b9057e5.js" async=""></script><script src="/docs/_next/static/mT926s0W5VyhfFaApGsyO/_buildManifest.js" async=""></script><script src="/docs/_next/static/mT926s0W5VyhfFaApGsyO/_ssgManifest.js" async=""></script></body></html>