CINXE.COM

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Customer SDK | Text Platform Docs & API Reference</title><link rel="canonical" href="https://platform.text.com/docs/extending-chat-widget/customer-sdk"/><link rel="preconnect" href="https://LATDYRDX9J-dsn.algolia.net" crossorigin="true"/><meta name="description" content="If our default widget is not enough, feel free to build your own. Customer JS SDK is your way to go."/><meta property="og:title" content="Customer SDK"/><meta property="og:description" content="If our default widget is not enough, feel free to build your own. Customer JS SDK is your way to go."/><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="Customer SDK"/><meta name="twitter:description" content="If our default widget is not enough, feel free to build your own. Customer JS SDK is your way to go."/><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/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-50bee04d1dc61f8adf5b.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-06a3a99d73e91e62445b.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.de74f486eb1da22b5155.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.37b3e3ef116317d8771b.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/extending-chat-widget/customer-sdk-b0a318e763892498ec28.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="bdpnbetp35afaz5tc7dq-f-e9c3675fd-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":"812d756","ak.r":45803,"ak.a2":n,"ak.m":"b","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":52164,"ak.gh":"111.223.64.76","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"bbr","ak.t":"1739790279","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==gj0fu+MMqLm9wbnq9K2HFMPF2cw69T48JLslTYevjctWVXZxK45HScoFmF9pk4WHYAzLmxz10PrBBAEWprwQxyr4BTI7YKbzFPtbeOQ6spWhqiXUff/LDEwxfqRqOTO/mehHPMTgz+63qgczSfgyk74J486RU6HFj5ZJAe5JDLDh7PgJgxiQfQwOIhHPGUCZMkBaB1IWNU1uPhlmR1PaAg1tHmRvbV502Vz7RZgwNKfxH6b7hwMmlQ3iB5ocLGokoLRipYJF9DzvOK7Z5mn/j7Q6UeMwOU9ptNn2MyNzc90l9oc5cHvSPbsr0bt17aGQALwEaNSWT6P8JBXbVYjeSEw0OC/80zkr+LfjqjI7QRUIWhjIrMONsub37P211BinpamBAhtYGIeJt4RUjhYkLV2lvUlMLAzQxrJ87WXbRR4=","ak.pv":"60","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><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>Customer SDK</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><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 JS API</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>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="customer-sdk" class="css-12qxxrf"><span>Customer SDK</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/customer-sdk#introduction"><span class="icon icon-link"></span></a>Introduction</a></h2><p><strong>LiveChat Customer SDK</strong> is a set of tools that helps you build a custom chat widget. Under the hood, it makes use of the <a href="https://platform.text.com/docs/messaging/customer-chat-api/">LiveChat Customer Chat API</a>. Customer SDK lets you communicate with LiveChat services directly from the browser environment using JavaScript without the need to develop your backend.</p><h3 class="heading"><a id="is-it-for-me" href="#is-it-for-me" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#is-it-for-me"><span class="icon icon-link"></span></a>Is it for me?</a></h3><p>If you need to customize the LiveChat Widget, using LiveChat Customer SDK is one of the options to do this. If you need a fully customizable solution and you feel brave, dive into LiveChat Customer SDK. We provide <a href="/docs/extending-chat-widget/customer-sdk#methods">methods</a> and <a href="/docs/extending-chat-widget/customer-sdk#events">events</a> for deep integration with the LiveChat environment.</p><p>Keep in mind that interacting with this API requires <strong>some development skills</strong>.</p><p>Customer SDK allows you to create frontend apps, so if you're looking for server-side solutions, you should explore the <a href="https://platform.text.com/docs/messaging/customer-chat-api/">LiveChat Customer Chat API</a> instead. If you want to dive deeper into the LiveChat Platform, you might find the <a href="https://platform.text.com/docs/getting-started/">Platform Overview</a> article handy.</p><h4 class="heading"><a id="limitations" href="#limitations" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#limitations"><span class="icon icon-link"></span></a>Limitations</a></h4><p>If a customer is chatting from a custom widget, private messages will not be available for agents.</p><h3 class="heading"><a id="about-livechat-customer-sdk" href="#about-livechat-customer-sdk" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#about-livechat-customer-sdk"><span class="icon icon-link"></span></a>About LiveChat Customer SDK</a></h3><p>We provide an asynchronous API. Most methods return a <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="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="css-kbi7q3"><code>Promise</code></a>. You can subscribe to the emitted events with the <code>on</code> and <code>off</code> methods. Not familiar with promises? Read <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">this article</a> to learn more.</p><p>We authenticate your sessions with the use of <a href="https://www.npmjs.com/package/@livechat/customer-auth">customer-auth package</a> and expose the created <code>auth</code> object to the returned SDK instance. In general, you don't have to worry about it or use the exposed object. If you need to get the authentication token, you can get it through the SDK like this:</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token property-access">auth</span><span class="token punctuation">.</span><span class="token method function property-access">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">token</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><h3 class="heading"><a id="questions" href="#questions" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#questions"><span class="icon icon-link"></span></a>Questions</a></h3><p>If you have any questions, you can start a chat with our <a href="https://direct.lc.chat/1520/125">24/7 Support</a>.</p><h2 class="heading css-1679d3t"><a id="how-to-start" href="#how-to-start" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#how-to-start"><span class="icon icon-link"></span></a>How to start</a></h2><p>This tutorial is here to help you get started with LiveChat Customer SDK.</p><h3 class="heading"><a id="create-an-application" href="#create-an-application" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#create-an-application"><span class="icon icon-link"></span></a>Create an application</a></h3><p>First, you need to create an application in <a href="https://platform.text.com/console">Developer Console</a> (select the <em>Web app (frontend, e.g. JavaScript)</em> type). Then, you will have to give it the access to the <code>customers:own</code> scope and the correct URI to the <code>Redirect URI whitelist</code>.</p><h3 class="heading"><a id="install-customer-sdk" href="#install-customer-sdk" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#install-customer-sdk"><span class="icon icon-link"></span></a>Install Customer SDK</a></h3><p>You can use the LiveChat Customer SDK in two different ways:</p><h4 class="heading"><a id="using-npm" href="#using-npm" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#using-npm"><span class="icon icon-link"></span></a>Using npm</a></h4><p><code>npm install --save @livechat/customer-sdk</code></p><p>Import the SDK in your code:</p><p><code>import * as CustomerSDK from '@livechat/customer-sdk'</code></p><p>Or use the node-style <code>require</code> call:</p><p><code>const CustomerSDK = require('@livechat/customer-sdk')</code></p><h4 class="heading"><a id="using-a-script-tag---umd-module-hosted-on-unpkgs-cdn" href="#using-a-script-tag---umd-module-hosted-on-unpkgs-cdn" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#using-a-script-tag---umd-module-hosted-on-unpkgs-cdn"><span class="icon icon-link"></span></a>Using a script tag - UMD module hosted on unpkg's CDN</a></h4><p><code><script src="https://unpkg.com/@livechat/customer-sdk@3.1.2"></script></code></p><p>If you just want to look around and play with the SDK, check out our <a href="https://codesandbox.io/s/rm3prxw88n">sample chat widget implementation</a>.</p><p>For the time being you need to register your application in the <a target="_blank" href="https://platform.text.com/console">Developers Console</a> as a "Web app (frontend, eg. JavaScript)" type. Then, you have to pass the configured <code>redirectUri</code> to the <code>init</code>, along with the regular required properties (<code>organizationId</code> and <code>clientId</code>).</p><h3 class="heading"><a id="using-the-api" href="#using-the-api" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#using-the-api"><span class="icon icon-link"></span></a>Using the API</a></h3><p>To use the API you will first need to create an instance using the <code>init</code> function. You will need to provide your organizationId and clientId when creating a Customer SDK instance.</p><p>Other optional configuration parameters are also available:</p><style data-emotion-css="q76ucn">.css-q76ucn{width:100%;overflow-x:auto;}</style><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>default</th><th>description</th></tr></thead><tbody><tr><td>organizationId</td><td>string</td><td></td><td>Your Organization ID, you receive this value when creating a new LiveChat account.</td></tr><tr><td>clientId</td><td>string</td><td></td><td>Your client id, you receive this value when you register your application in the LiveChat Developer Console.</td></tr><tr><td>autoConnect</td><td>boolean</td><td>true</td><td>Optional; decides whether the SDK should reconnect on its own.</td></tr><tr><td>groupId</td><td>number</td><td></td><td>Optional; the id of the group you wish to connect to.</td></tr><tr><td>uniqueGroups</td><td>boolean</td><td>false</td><td>Optional; by default, the customer identity is the same for all groups. If you want to create a separate customer identity for each group, set this parameter to <code>true</code>. When set to <code>true</code>, passing a <code>groupId</code> is required.</td></tr><tr><td>region</td><td>'dal' | 'fra'</td><td>'dal'</td><td>Optional; the server region your license is at.</td></tr><tr><td>redirectUri</td><td>string</td><td></td><td>Optional; should only be used inside ReactNative, this is the URI which your webview is redirected to after authorization.</td></tr><tr><td>customerDataProvider</td><td>() => CustomerData</td><td></td><td>Optional; should only be used if you need to send customer data during login. In general, <a href="/docs/extending-chat-widget/customer-sdk#updateCustomer" class="css-kbi7q3"><code>updateCustomer()</code></a> should be prefered for sending customer data.</td></tr><tr><td>identityProvider</td><td>() => CustomerAuth</td><td></td><td>Optional; allows for providing own instance of the CustomerAuth object which contains the customer access token handlers. See <a href="https://platform.text.com/docs/extending-chat-widget/custom-identity-provider">Custom Identity Provider</a> for more information.</td></tr><tr><td>page</td><td>object</td><td></td><td>Optional; customer page information.</td></tr><tr><td>page.url</td><td>string</td><td></td><td>Optional; customer page url.</td></tr><tr><td>page.title</td><td>string</td><td></td><td>Optional; customer page title.</td></tr><tr><td>referrer</td><td>string</td><td></td><td>Optional; page referrer.</td></tr></tbody></table></div><p>CustomerData:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>name</td><td>string</td><td>Optional</td></tr><tr><td>email</td><td>string</td><td>Optional</td></tr><tr><td>sessionFields</td><td>object</td><td>Key: value pairs</td></tr></tbody></table></div><p>CustomerAuth:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>getFreshToken</td><td>() => <code>Promise<Token></code></td><td>Should resolve with freshly requested customer access token.</td></tr><tr><td>getToken</td><td>() => <code>Promise<Token></code></td><td>Should resolve with currently stored customer access token.</td></tr><tr><td>hasToken</td><td>() => <code>Promise<boolean></code></td><td>Should resolve with a boolean value representing if a token has been already acquired.</td></tr><tr><td>invalidate</td><td>() => <code>Promise<void></code></td><td>Should handle token invalidation and/or clearing the locally cached value.</td></tr></tbody></table></div><p>The <code>init</code> function will return a Customer SDK instance:</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> customerSDK <span class="token operator">=</span> <span class="token maybe-class-name">CustomerSDK</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 literal-property property">organizationId</span><span class="token operator">:</span> <span class="token constant">ORGANIZATION_ID</span><span class="token punctuation">,</span> <span class="token literal-property property">clientId</span><span class="token operator">:</span> <span class="token constant">CLIENT_ID</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>With <code>customerSDK</code>, you can attach <a href="/docs/extending-chat-widget/customer-sdk#events">events</a>:</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<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> <span class="token parameter">newEvent</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>newEvent<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Or execute <a href="/docs/extending-chat-widget/customer-sdk#methods">methods</a>:</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> chatId <span class="token operator">=</span> <span class="token string">'OU0V0P0OWT'</span> customerSDK <span class="token punctuation">.</span><span class="token method function property-access">sendEvent</span><span class="token punctuation">(</span><span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> <span class="token literal-property property">event</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Hi!'</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 method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><h2 class="heading css-1679d3t"><a id="key-concepts" href="#key-concepts" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#key-concepts"><span class="icon icon-link"></span></a>Key Concepts</a></h2><p>The LiveChat system includes four basic types of entities - users, chats, threads, and events.</p><ul><li>Chats consist of threads and threads consist of events.</li><li>Threads are parts of chats.</li><li>Users can add events to chats, which then are automatically added to threads.</li><li>Users can participate in many chats at the same time.</li></ul><p>Threads are a vital part of the LiveChat architecture. Grouping events in threads allows us to provide the continuous chat experience (i.e. the Customer always has the option to continue the conversation) while still maintaining smaller, logical chunks of events (e.g. for reporting and caching purposes). Handling operations such as loading archival events from the chat history can be challenging, but you won't have to worry about managing threads most of the time. Customer SDK provides wrappers for common tasks and most methods expect to receive chat IDs. You will only get notified about thread metadata if you explicitly ask for it.</p><p>You can read more about key concepts of the LiveChat messaging in the <a href="https://platform.text.com/docs/messaging/#key-concepts">Messaging Overview</a>.</p><h3 class="heading"><a id="user" href="#user" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#user"><span class="icon icon-link"></span></a>User</a></h3><h4 class="heading"><a id="agent" href="#agent" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#agent"><span class="icon icon-link"></span></a>Agent</a></h4><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'ed9d4095-45d6-428d-5093-f8ec7f1f81b9'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'agent'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Jane Doe'</span><span class="token punctuation">,</span> <span class="token literal-property property">jobTitle</span><span class="token operator">:</span> <span class="token string">'Agent'</span><span class="token punctuation">,</span> <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">'https://cdn.livechat-files.com/api/file/avatar.png'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> </code></pre></div><h4 class="heading"><a id="customer" href="#customer" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#customer"><span class="icon icon-link"></span></a>Customer</a></h4><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'ed9d0195-45d6-428d-5093-f8ec7f1471b9'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'customer'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Jon Doe'</span><span class="token punctuation">,</span> <span class="token literal-property property">avatar</span><span class="token operator">:</span> <span class="token string">'https://cdn.livechat-files.com/api/file/avatar.png'</span><span class="token punctuation">,</span> <span class="token literal-property property">fields</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">custom_property</span><span class="token operator">:</span> <span class="token string">'BasketValue=10usd'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div><h3 class="heading"><a id="chat" href="#chat" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#chat"><span class="icon icon-link"></span></a>Chat</a></h3><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'OU0V0P0OWT'</span><span class="token punctuation">,</span> <span class="token literal-property property">users</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'ed9d4095-45d6-428d-5093-f8ec7f1f81b9'</span><span class="token punctuation">,</span> <span class="token comment">// ... more user properties</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">lastSeenTimestamps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'ed9d4095-45d6-428d-5093-f8ec7f1f81b9'</span><span class="token operator">:</span> <span class="token number">1503062591000</span><span class="token punctuation">,</span> <span class="token comment">// might be null</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">threads</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'OU0V0U3IMN'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> </code></pre></div><h3 class="heading"><a id="event" href="#event" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#event"><span class="icon icon-link"></span></a>Event</a></h3><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'hi!'</span><span class="token punctuation">,</span> <span class="token literal-property property">author</span><span class="token operator">:</span> <span class="token string">'ed9d4095-45d6-428d-5093-f8ec7f1f81b9'</span><span class="token punctuation">,</span> <span class="token comment">// assigned by server</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'OU0V0U3IMN_1'</span><span class="token punctuation">,</span> <span class="token comment">// assigned by server</span> <span class="token literal-property property">timestamp</span><span class="token operator">:</span> <span class="token number">1503062591000</span><span class="token punctuation">,</span> <span class="token comment">// assigned by server</span> <span class="token literal-property property">customId</span><span class="token operator">:</span> <span class="token string">'814.3316641404942'</span><span class="token punctuation">,</span> <span class="token comment">// optional</span> <span class="token literal-property property">thread</span><span class="token operator">:</span> <span class="token string">'OU0V4R0OXP'</span><span class="token punctuation">,</span> <span class="token literal-property property">properties</span><span class="token operator">:</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="threads" href="#threads" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#threads"><span class="icon icon-link"></span></a>Threads</a></h3><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'OU0V0U3IMN'</span><span class="token punctuation">,</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">order</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">users</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'ed9d4095-45d6-428d-5093-f8ec7f1f81b9'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">lastSeenTimestamps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'ed9d4095-45d6-428d-5093-f8ec7f1f81b9'</span><span class="token operator">:</span> <span class="token number">1503062591000</span><span class="token punctuation">,</span> <span class="token comment">// might be null</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">events</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">/* events */</span> <span class="token punctuation">]</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/customer-sdk#methods"><span class="icon icon-link"></span></a>Methods</a></h2><h3 class="heading"><a id="acceptgreeting" href="#acceptgreeting" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#acceptgreeting"><span class="icon icon-link"></span></a>acceptGreeting</a></h3><p>You can use this method to inform that a Customer has seen a greeting. Based on that, the Reports section displays only the greetings seen by Customers instead of all the sent greetings. If a Customer started a chat from a greeting but you didn't execute <code>acceptGreeting</code> method, the greeting counts as seen in Reports anyway.</p><p>As arguments to this method you should use <code>uniqueId</code> & <code>greetingId</code> received in the <a href="/docs/extending-chat-widget/customer-sdk#incoming_greeting" class="css-kbi7q3"><code>incoming_greeting</code></a> or <a href="/docs/extending-chat-widget/customer-sdk#connected" class="css-kbi7q3"><code>connected</code></a> event.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">acceptGreeting</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">greetingId</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token literal-property property">uniqueId</span><span class="token operator">:</span> <span class="token string">'Q10X0W041P'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th></tr></thead><tbody><tr><td>greetingId</td><td>number</td></tr><tr><td>uniqueId</td><td>string</td></tr></tbody></table></div><h4 class="heading"><a id="errors" href="#errors" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#errors"><span class="icon icon-link"></span></a>Errors</a></h4><ul><li><code>GREETING_NOT_FOUND</code> - a given <code>uniqueId</code> couldn't be found on the server</li></ul><h3 class="heading"><a id="cancelgreeting" href="#cancelgreeting" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#cancelgreeting"><span class="icon icon-link"></span></a>cancelGreeting</a></h3><p>Cancels a greeting (an invitation to the chat). For example, Customers could cancel greetings by clicking close icon on the displayed greeting.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">cancelGreeting</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">uniqueId</span><span class="token operator">:</span> <span class="token string">'Q10X0W041P'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th></tr></thead><tbody><tr><td>uniqueId</td><td>string</td></tr></tbody></table></div><h4 class="heading"><a id="errors-1" href="#errors-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#errors-1"><span class="icon icon-link"></span></a>Errors</a></h4><ul><li><code>GREETING_NOT_FOUND</code> - given <code>uniqueId</code> could not be found on the server</li></ul><h3 class="heading"><a id="cancelrate" href="#cancelrate" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#cancelrate"><span class="icon icon-link"></span></a>cancelRate</a></h3><p>Cancels rate-related thread properties.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">cancelRate</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'comment'</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 method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><h4 class="heading"><a id="errors-2" href="#errors-2" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#errors-2"><span class="icon icon-link"></span></a>Errors</a></h4><ul><li><code>MISSING_CHAT_THREAD</code> - the targeted chat is empty and has no threads.</li></ul><h3 class="heading"><a id="connect" href="#connect" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#connect"><span class="icon icon-link"></span></a>connect</a></h3><p>Starts the connection process to our servers. It is needed when:</p><ul><li>The <code>autoConnect: false</code> argument has been passed to the <code>init</code> method.</li></ul><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> customerSDK <span class="token operator">=</span> <span class="token maybe-class-name">CustomerSDK</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 literal-property property">organizationId</span><span class="token operator">:</span> <span class="token constant">ORGANIZATION_ID</span><span class="token punctuation">,</span> <span class="token literal-property property">clientId</span><span class="token operator">:</span> <span class="token constant">CLIENT_ID</span><span class="token punctuation">,</span> <span class="token literal-property property">autoConnect</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">/* later in the code... */</span> customerSDK<span class="token punctuation">.</span><span class="token method function property-access">connect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> </code></pre></div><ul><li>You get disconnected for a reason that suspends reconnection attempts (e.g. <a href="/docs/extending-chat-widget/customer-sdk#inactivity_timeout" class="css-kbi7q3"><code>inactivity_timeout</code></a>).</li></ul><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'disconnected'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> reason <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>reason <span class="token operator">===</span> <span class="token string">'inactivity_timeout'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> customerSDK<span class="token punctuation">.</span><span class="token method function property-access">connect</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="deactivatechat" href="#deactivatechat" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#deactivatechat"><span class="icon icon-link"></span></a>deactivateChat</a></h3><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">deactivateChat</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>id</td><td>string</td><td>Chat ID in which thread should get closed</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>success</td><td>boolean</td></tr></tbody></table></div><h3 class="heading"><a id="deletechatproperties" href="#deletechatproperties" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#deletechatproperties"><span class="icon icon-link"></span></a>deleteChatProperties</a></h3><p>Deletes given chat properties.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">deleteChatProperties</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">property_namespace</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'sample'</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 punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>id</td><td>string</td><td>ID of the chat whose properties you want to delete.</td></tr><tr><td>properties</td><td>object</td><td>Chat properties to delete</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>success</td><td>boolean</td></tr></tbody></table></div><h3 class="heading"><a id="deleteeventproperties" href="#deleteeventproperties" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#deleteeventproperties"><span class="icon icon-link"></span></a>deleteEventProperties</a></h3><p>Deletes given event properties.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">deleteEventProperties</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">threadId</span><span class="token operator">:</span> <span class="token string">'OS0C0W0Z1B'</span><span class="token punctuation">,</span> <span class="token literal-property property">eventId</span><span class="token operator">:</span> <span class="token string">'Q50W0A0P0Y'</span><span class="token punctuation">,</span> <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">property_namespace</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'sample'</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 punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>ID of the chat whose properties you want to delete.</td></tr><tr><td>threadId</td><td>string</td><td>ID of the thread whose properties you want to delete.</td></tr><tr><td>eventId</td><td>string</td><td>ID of the event whose properties you want to delete.</td></tr><tr><td>properties</td><td>object</td><td>Properties to delete</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>success</td><td>boolean</td></tr></tbody></table></div><h3 class="heading"><a id="deletethreadproperties" href="#deletethreadproperties" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#deletethreadproperties"><span class="icon icon-link"></span></a>deleteThreadProperties</a></h3><p>Deletes given chat thread properties.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">deleteThreadProperties</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">threadId</span><span class="token operator">:</span> <span class="token string">'OS0C0W0Z1B'</span><span class="token punctuation">,</span> <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">property_namespace</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'sample'</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 punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>ID of the chat whose properties you want to delete.</td></tr><tr><td>threadId</td><td>string</td><td>ID of the thread whose properties you want to delete.</td></tr><tr><td>properties</td><td>object</td><td>Properties to delete</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>success</td><td>boolean</td></tr></tbody></table></div><h3 class="heading"><a id="destroy" href="#destroy" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#destroy"><span class="icon icon-link"></span></a>destroy</a></h3><p>Clears any stored resources, removes all listeners, and disconnects from the network. After using this method, you won't be able to use the destroyed Customer SDK instance.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> </code></pre></div><h3 class="heading"><a id="disconnect" href="#disconnect" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#disconnect"><span class="icon icon-link"></span></a>disconnect</a></h3><p>Disconnects from the server.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">disconnect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> </code></pre></div><h3 class="heading"><a id="getchat" href="#getchat" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#getchat"><span class="icon icon-link"></span></a>getChat</a></h3><p>Returns the chat data about the requested chat ID together with a single thread's data. If the method is called with the <code>threadId</code> parameter, then this particular thread is being returned. If no <code>threadId</code> is given, the latest thread is automatically returned.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">getChat</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">chat</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> access<span class="token punctuation">,</span> users<span class="token punctuation">,</span> properties<span class="token punctuation">,</span> thread <span class="token punctuation">}</span> <span class="token operator">=</span> chat <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id<span class="token punctuation">,</span> access<span class="token punctuation">,</span> users<span class="token punctuation">,</span> properties<span class="token punctuation">,</span> thread <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 control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td></td></tr><tr><td>threadId</td><td>string</td><td>optional</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>id</td><td>string</td><td>Chat ID</td></tr><tr><td>access</td><td>object</td><td>Chat initial access</td></tr><tr><td>users</td><td>object[]</td><td>Users objects referenced in the chat</td></tr><tr><td>properties</td><td>object</td><td>Chat properties</td></tr><tr><td>thread</td><td>object</td><td></td></tr></tbody></table></div><h3 class="heading"><a id="getchathistory" href="#getchathistory" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#getchathistory"><span class="icon icon-link"></span></a>getChatHistory</a></h3><p>Helps loading in historical thread events.</p><p>First, call <code>getChatHistory</code> to access the <code>history</code> object of a particular chat. The returned <code>history</code> object has only one method, <code>next</code>, which gives you a <code>Promise</code> with a <code>{ done, value }</code> object.</p><ul><li><code>done</code> - indicates if there is anything more to load</li><li><code>value</code> - an object with an array of threads, each containing an array of its events</li></ul><p>Then, you can keep calling <code>history.next()</code> multiple times to load previous historical events. They're going to be grouped into threads and might require merging with already loaded events. This is useful for implementing an infinite scroll or otherwise showing your Customer's archival chats. Keep in mind, though, that you generally shouldn't call <code>next</code> while the history is loading - we queue those requests, so the previous one must resolve before we proceed with the next one.</p><p>The structure such as our <code>history</code> object is called an <strong>async iterator</strong>.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">let</span> wholeChatHistoryLoaded <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token keyword">const</span> history <span class="token operator">=</span> customerSDK<span class="token punctuation">.</span><span class="token method function property-access">getChatHistory</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'OU0V0P0OWT'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> history<span class="token punctuation">.</span><span class="token method function property-access">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span><span class="token property-access">done</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> wholeChatHistoryLoaded <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> threads <span class="token punctuation">}</span> <span class="token operator">=</span> result<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token keyword">const</span> events <span class="token operator">=</span> threads <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">thread</span> <span class="token arrow operator">=></span> thread<span class="token punctuation">.</span><span class="token property-access">events</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> current</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> acc<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>current<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 console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>events<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID of the requested history object</td></tr></tbody></table></div><h3 class="heading"><a id="getcustomer" href="#getcustomer" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#getcustomer"><span class="icon icon-link"></span></a>getCustomer</a></h3><p>Returns the info about the Customer requesting it.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">getCustomer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">customer</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>customer<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>type</td><td>'customer'</td><td></td></tr><tr><td>id</td><td>string</td><td></td></tr><tr><td>name</td><td>string</td><td>Returned only if set</td></tr><tr><td>email</td><td>string</td><td>Returned only if set</td></tr><tr><td>avatar</td><td>string</td><td>Returned only if set</td></tr><tr><td>sessionFields</td><td>object</td><td></td></tr><tr><td>statistics</td><td>object</td><td></td></tr><tr><td>statistics.chatsCount</td><td>number</td><td></td></tr><tr><td>statistics.threadsCount</td><td>number</td><td></td></tr><tr><td>statistics.visitsCount</td><td>number</td><td></td></tr><tr><td>statistics.pageViewsCount</td><td>number</td><td></td></tr><tr><td>statistics.greetingsShownCount</td><td>number</td><td></td></tr><tr><td>statistics.greetingsAcceptedCount</td><td>number</td><td></td></tr></tbody></table></div><h3 class="heading"><a id="getform" href="#getform" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#getform"><span class="icon icon-link"></span></a>getForm</a></h3><p>Allows you to fetch a form template for a given group and form type.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">getForm</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'prechat'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">enabled</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// prechat form is enabled for this group in the configurator</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">form</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 control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th></tr></thead><tbody><tr><td>groupId</td><td>number</td></tr><tr><td>type</td><td>'prechat', 'postchat' or 'ticket'</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>enabled</td><td>boolean</td><td></td></tr><tr><td>form</td><td>object</td><td>Available only when a given form is enabled</td></tr><tr><td>form.id</td><td>string</td><td></td></tr><tr><td>form.fields</td><td>object[]</td><td></td></tr></tbody></table></div><h3 class="heading"><a id="getpredictedagent" href="#getpredictedagent" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#getpredictedagent"><span class="icon icon-link"></span></a>getPredictedAgent</a></h3><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">getPredictedAgent</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">agent</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>agent<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>groupId</td><td>number</td><td>Optional</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>agent</td><td>object</td><td></td></tr><tr><td>agent.id</td><td>string</td><td></td></tr><tr><td>agent.name</td><td>string</td><td></td></tr><tr><td>agent.jobTitle</td><td>string</td><td></td></tr><tr><td>agent.type</td><td>'agent'</td><td></td></tr><tr><td>agent.isBot</td><td>boolean</td><td></td></tr><tr><td>queue</td><td>boolean</td><td>True when the current group has reached concurrent chat limit</td></tr></tbody></table></div><h4 class="heading"><a id="errors-3" href="#errors-3" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#errors-3"><span class="icon icon-link"></span></a>Errors</a></h4><ul><li><code>GROUP_OFFLINE</code> - the requested group is offline, and it was not possible to return a predicted Agent for it.</li><li><code>GROUP_UNAVAILABLE</code> - thrown when manual routing is enabled for the group and a predicted Agent is requested for it. If you call <code>startChat</code> or <code>resumeChat</code> accordingly, you'll end up in the queue.</li></ul><h3 class="heading"><a id="geturlinfo" href="#geturlinfo" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#geturlinfo"><span class="icon icon-link"></span></a>getUrlInfo</a></h3><p>It returns the info on a given URL.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">getUrlInfo</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'https://www.livechat.com'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">urlDetails</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>urlDetails<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The title of requested URL is: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>urlDetails<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>urlDetails<span class="token punctuation">.</span><span class="token property-access">description</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The description of requested URL is: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>urlDetails<span class="token punctuation">.</span><span class="token property-access">description</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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>urlDetails<span class="token punctuation">.</span><span class="token property-access">imageUrl</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The preview image of requested URL is available under: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>urlDetails<span class="token punctuation">.</span><span class="token property-access">imageUrl</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>urlDetails<span class="token punctuation">.</span><span class="token property-access">imageWidth</span> <span class="token operator">&&</span> urlDetails<span class="token punctuation">.</span><span class="token property-access">imageHeight</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Its width is: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>urlDetails<span class="token punctuation">.</span><span class="token property-access">imageWidth</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Its height is: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>urlDetails<span class="token punctuation">.</span><span class="token property-access">imageHeight</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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 control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th></tr></thead><tbody><tr><td>url</td><td>string</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>url</td><td>string</td><td></td></tr><tr><td>title</td><td>string</td><td>Optional</td></tr><tr><td>description</td><td>string</td><td>Optional</td></tr><tr><td>imageUrl</td><td>string</td><td>Optional</td></tr><tr><td>imageWidth</td><td>number</td><td>Optional</td></tr><tr><td>imageHeight</td><td>number</td><td>Optional</td></tr></tbody></table></div><h3 class="heading"><a id="off" href="#off" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#off"><span class="icon icon-link"></span></a>off</a></h3><p>Unsubscribes from emitted events, which are described <a href="/docs/extending-chat-widget/customer-sdk#events">here</a>.</p><h3 class="heading"><a id="on" href="#on" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#on"><span class="icon icon-link"></span></a>on</a></h3><p>Subscribes to emitted events, which are described <a href="/docs/extending-chat-widget/customer-sdk#events">here</a>.</p><h3 class="heading"><a id="once" href="#once" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#once"><span class="icon icon-link"></span></a>once</a></h3><p>Subscribes to emitted events, which are described <a href="/docs/extending-chat-widget/customer-sdk#events">here</a>. Unsubscribes immediately after the callback gets called.</p><h3 class="heading"><a id="listchats" href="#listchats" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#listchats"><span class="icon icon-link"></span></a>listChats</a></h3><p>It returns summaries of the chats a Customer participated in.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">listChats</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">pageId</span><span class="token operator">:</span> <span class="token string">'MTU5MTEwMTUxNDM5NTk5OTpkZXNj'</span><span class="token punctuation">,</span> <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> chatsSummary<span class="token punctuation">,</span> totalChats <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>chatsSummary<span class="token punctuation">)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>totalChats<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>pageId</td><td>string</td><td>Optional; the cursor returned from the previous <code>listChats</code> calls</td></tr><tr><td>limit</td><td>number</td><td>Optional; the limit of returned results. Default is set to 10 and maximum is 25</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatsSummary</td><td>object[]</td><td></td></tr><tr><td>chatsSummary[].id</td><td>string</td><td>Chat ID</td></tr><tr><td>chatsSummary[].active</td><td>boolean</td><td></td></tr><tr><td>chatsSummary[].users</td><td>object[]</td><td>Users objects referenced in the chat</td></tr><tr><td>chatsSummary[].lastEvent</td><td>object</td><td>Event</td></tr><tr><td>chatsSummary[].lastEventsPerType</td><td>object</td><td>Map of event types to event objects</td></tr><tr><td>chatsSummary[].lastSeenTimestamps</td><td>object</td><td>Map of user IDs to optional lastSeenTimestamps</td></tr><tr><td>chatsSummary[].lastThread</td><td>string</td><td>Thread ID</td></tr><tr><td>totalChats</td><td>number</td><td></td></tr></tbody></table></div><h3 class="heading"><a id="listgroupstatuses" href="#listgroupstatuses" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#listgroupstatuses"><span class="icon icon-link"></span></a>listGroupStatuses</a></h3><p>Returns availability statuses of the requested groups.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">listGroupStatuses</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">groupIds</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">10</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 method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">statusMap</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Status of the group 3: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>statusMap<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Status of the group 10: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>statusMap<span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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 control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>groupsIds</td><td>number[]</td><td>Optional; if omitted, statuses of all groups are returned.</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>statusMap</td><td>object</td><td>Map of group numbers to availability statuses</td></tr></tbody></table></div><h3 class="heading"><a id="listthreads" href="#listthreads" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#listthreads"><span class="icon icon-link"></span></a>listThreads</a></h3><p>Returns a list of thread objects together with the previous and next page ID cursors that can be used to load more threads. If you want to load consecutive events, consider using <a href="/docs/extending-chat-widget/customer-sdk#getchathistory" class="css-kbi7q3"><code>getChatHistory</code></a>.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">listThreads</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">threads</span><span class="token punctuation">)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">previousPageId</span><span class="token punctuation">)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">nextPageId</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 control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td></td></tr><tr><td>pageId</td><td>string</td><td>Optional, the cursor returned from the previous <code>listThreads</code> calls</td></tr><tr><td>sortOrder</td><td>'desc' | 'asc'</td><td>Optional, default: 'desc'</td></tr><tr><td>limit</td><td>number</td><td>Optional, default: 3, can't be used together with <code>minEventsCount</code></td></tr><tr><td>minEventsCount</td><td>number</td><td>Optional, can't be used together with <code>limit</code></td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>threads</td><td>object[]</td><td></td></tr><tr><td>threads[].id</td><td>string</td><td>Thread ID</td></tr><tr><td>threads[].chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>threads[].active</td><td>boolean</td><td>Active state</td></tr><tr><td>threads[].createdAt</td><td>string</td><td>Thread creation date in RFC 3339 date-time format</td></tr><tr><td>threads[].userIds</td><td>string[]</td><td>User IDs</td></tr><tr><td>threads[].events</td><td>object[]</td><td>Events</td></tr><tr><td>threads[].properties</td><td>object</td><td>Chat properties</td></tr><tr><td>threads[].access</td><td>object</td><td></td></tr><tr><td>threads[].queue</td><td>object</td><td>Optional</td></tr><tr><td>threads[].queue.position</td><td>number</td><td>Current position in the queue</td></tr><tr><td>threads[].queue.waitTime</td><td>number</td><td>Estimated waiting time for an agent to be assigned to the chat, in seconds</td></tr><tr><td>threads[].queue.queuedAt</td><td>string</td><td>RFC 3339 date-time format</td></tr><tr><td>previousPageId</td><td>string</td><td></td></tr><tr><td>nextPageId</td><td>string</td><td></td></tr></tbody></table></div><h3 class="heading"><a id="markeventsasseen" href="#markeventsasseen" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#markeventsasseen"><span class="icon icon-link"></span></a>markEventsAsSeen</a></h3><p>Marks events as seen by the current Customer up to the given date.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">markEventsAsSeen</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">seenUpTo</span><span class="token operator">:</span> <span class="token string">'2017-10-12T15:19:21.010200Z'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>ID of the chat in which you want to mark events as seen.</td></tr><tr><td>seenUpTo</td><td>string</td><td>RFC 3339 date-time format; you should use the event's <code>createdAt</code> value as the argument.</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>success</td><td>boolean</td></tr></tbody></table></div><h3 class="heading"><a id="ratechat" href="#ratechat" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#ratechat"><span class="icon icon-link"></span></a>rateChat</a></h3><p>Sends chat rating and a comment for the most recent chat thread.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">rateChat</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">rating</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">score</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">comment</span><span class="token operator">:</span> <span class="token string">'Agent helped me a lot!'</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 method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Rating has been set'</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 control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td></td><td>Destination chat ID</td></tr><tr><td>rating</td><td></td><td></td></tr><tr><td>rating.score</td><td>0 or 1</td><td>Rating value: 0 for a bad rating and 1 for a good rating</td></tr><tr><td>rating.comment</td><td>string</td><td>Optional comment</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>success</td><td>boolean</td></tr></tbody></table></div><h4 class="heading"><a id="errors-4" href="#errors-4" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#errors-4"><span class="icon icon-link"></span></a>Errors</a></h4><ul><li><code>MISSING_CHAT_THREAD</code> - the targeted chat cannot be rated because it has no threads.</li></ul><h3 class="heading"><a id="resumechat" href="#resumechat" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#resumechat"><span class="icon icon-link"></span></a>resumeChat</a></h3><p>Resumes an archived chat.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">resumeChat</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chat</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'OU0V0P0OWT'</span><span class="token punctuation">,</span> <span class="token literal-property property">thread</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">events</span><span class="token operator">:</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 punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">chat</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>chat<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>data.active</td><td>boolean</td><td>Optional; defaults to <code>true</code> but can be used to create threads that are immediately inactive</td></tr><tr><td>data.continuous</td><td>boolean</td><td>Optional</td></tr><tr><td>data.chat.id</td><td>string</td><td></td></tr><tr><td>data.chat.access</td><td>Access</td><td>Optional</td></tr><tr><td>data.chat.properties</td><td>object</td><td>Optional, <a href="https://platform.text.com/docs/messaging/references/default-properties">Default properties docs</a></td></tr><tr><td>data.chat.thread.events</td><td>Event[]</td><td>Optional; you can pass initial events which will immediately become part of the created thread.</td></tr><tr><td>data.chat.thread.properties</td><td>object</td><td>Optional, <a href="https://platform.text.com/docs/messaging/references/default-properties">Default properties docs</a></td></tr></tbody></table></div><h4 class="heading"><a id="errors-5" href="#errors-5" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#errors-5"><span class="icon icon-link"></span></a>Errors</a></h4><ul><li><code>CHAT_ALREADY_ACTIVE</code> - the chat is already active and you can't activate it again.</li><li><code>GROUPS_OFFLINE</code> - a group in the targeted chat is offline. It can happen for licenses without continuous chats enabled.</li></ul><h3 class="heading"><a id="sendevent" href="#sendevent" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#sendevent"><span class="icon icon-link"></span></a>sendEvent</a></h3><p>Sends a provided object as an event with a specified type.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> event <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token comment">// ... other properties specific for the event's type</span> <span class="token punctuation">}</span> customerSDK <span class="token punctuation">.</span><span class="token method function property-access">sendEvent</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> event<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">event</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Destination chat ID</td></tr><tr><td>event</td><td></td><td></td></tr><tr><td>event.type</td><td>string</td><td>Type of the event; accepts only <strong>message, file, filled_form, system_message,</strong> and <strong>custom</strong> <a href="/docs/messaging/customer-chat-api/data-structures#events">event types</a>.</td></tr><tr><td>attachToLastThread</td><td>boolean</td><td>Optional</td></tr></tbody></table></div><h3 class="heading"><a id="sendrichmessagepostback" href="#sendrichmessagepostback" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#sendrichmessagepostback"><span class="icon icon-link"></span></a>sendRichMessagePostback</a></h3><p>Sends information to the server about a user's interaction with a rich message button.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">sendRichMessagePostback</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">threadId</span><span class="token operator">:</span> <span class="token string">'OS0C0W0Z1B'</span><span class="token punctuation">,</span> <span class="token literal-property property">eventId</span><span class="token operator">:</span> <span class="token string">'OS0C0W0Z1B01'</span><span class="token punctuation">,</span> <span class="token literal-property property">postback</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'OS0C0W0Z1B01002'</span><span class="token punctuation">,</span> <span class="token literal-property property">toggled</span><span class="token operator">:</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 method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'success'</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 control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>default</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td></td><td>postback chat ID</td></tr><tr><td>threadId</td><td>string</td><td></td><td>postback thread ID</td></tr><tr><td>eventId</td><td>string</td><td></td><td>postback event ID</td></tr><tr><td>postback</td><td></td><td></td><td></td></tr><tr><td>postback.id</td><td>string</td><td></td><td>Postback button ID</td></tr><tr><td>postback.toggled</td><td>boolean</td><td>true</td><td>Postback toggled</td></tr></tbody></table></div><h3 class="heading"><a id="setcustomersessionfields" href="#setcustomersessionfields" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#setcustomersessionfields"><span class="icon icon-link"></span></a>setCustomerSessionFields</a></h3><p>Sends the request to set customer's session fields. They are available for the duration of the session.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">setCustomerSessionFields</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">sessionFields</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token string">'qwerty'</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><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th></tr></thead><tbody><tr><td>sessionFields</td><td>object</td></tr></tbody></table></div><h3 class="heading"><a id="setsneakpeek" href="#setsneakpeek" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#setsneakpeek"><span class="icon icon-link"></span></a>setSneakPeek</a></h3><p>You can use it to update the <a href="https://www.livechat.com/blog/customer-message-sneak-peak/">sneak peek</a> in the Agent App. It is sent to the server only if the target chat is active. This method doesn't return a promise.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">setSneakPeek</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">sneakPeekText</span><span class="token operator">:</span> <span class="token string">'what is the price for your '</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Target chat ID</td></tr><tr><td>sneakPeekText</td><td>string</td><td>Message preview broadcasted to the Agent</td></tr></tbody></table></div><h3 class="heading"><a id="startchat" href="#startchat" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#startchat"><span class="icon icon-link"></span></a>startChat</a></h3><p>Starts a new chat. For one Customer, you can only start one chat. In order to activate a previously started chat, use <a href="/docs/extending-chat-widget/customer-sdk#resumeChat" class="css-kbi7q3"><code>resumeChat</code></a>.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">startChat</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chat</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">thread</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">events</span><span class="token operator">:</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 punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">chat</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>chat<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>active</td><td>boolean</td><td>Optional, defaults to <code>true</code> but can be used to create threads that are immediately inactive</td></tr><tr><td>continuous</td><td>boolean</td><td>Optional, starts chat as continuous (online group is not required); default: false.</td></tr><tr><td>chat.access</td><td>access</td><td>Optional; chat access to set, default: all agents.</td></tr><tr><td>chat.properties</td><td>object</td><td>Optional, <a href="https://platform.text.com/docs/messaging/references/default-properties">default properties docs</a></td></tr><tr><td>chat.thread.events</td><td>event[]</td><td>Optional; initial events that will immediately become a part of the created thread.</td></tr><tr><td>chat.thread.properties</td><td>object</td><td>Optional, <a href="https://platform.text.com/docs/messaging/references/default-properties">default properties docs</a></td></tr></tbody></table></div><h4 class="heading"><a id="errors-6" href="#errors-6" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#errors-6"><span class="icon icon-link"></span></a>Errors</a></h4><ul><li><code>CHAT_LIMIT_REACHED</code> - the maximum limit of chats per Customer has been reached, and it's not possible to start a new one. You should activate one of the existing chats. The limit is 1.</li><li><code>GROUPS_OFFLINE</code> - a group in the target chat is offline. It can happen for licenses, which don't allow Customers to chat during their unavailability.</li></ul><h3 class="heading"><a id="updatechatproperties" href="#updatechatproperties" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#updatechatproperties"><span class="icon icon-link"></span></a>updateChatProperties</a></h3><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> properties <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">property_namespace</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">sample</span><span class="token operator">:</span> <span class="token string">'property'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> customerSDK <span class="token punctuation">.</span><span class="token method function property-access">updateChatProperties</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> properties <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>id</td><td>string</td><td>ID of the chat whose properties you want to update.</td></tr><tr><td>properties</td><td>object</td><td><a href="https://platform.text.com/docs/messaging/references/default-properties">Default properties docs</a></td></tr></tbody></table></div><h3 class="heading"><a id="updatecustomer" href="#updatecustomer" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#updatecustomer"><span class="icon icon-link"></span></a>updateCustomer</a></h3><p>Updates the specified Customer properties and fields.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> properties <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John Doe'</span><span class="token punctuation">,</span> <span class="token literal-property property">email</span><span class="token operator">:</span> <span class="token string">'john.doe@example.com'</span><span class="token punctuation">,</span> <span class="token literal-property property">sessionFields</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">custom_property</span><span class="token operator">:</span> <span class="token string">'BasketValue=10usd'</span><span class="token punctuation">,</span> <span class="token literal-property property">any_key_is_ok</span><span class="token operator">:</span> <span class="token string">'sample custom field'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> customerSDK<span class="token punctuation">.</span><span class="token method function property-access">updateCustomer</span><span class="token punctuation">(</span>properties<span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>properties</td><td></td><td></td></tr><tr><td>properties.name</td><td>string</td><td>Optional</td></tr><tr><td>properties.email</td><td>string</td><td>Optional</td></tr><tr><td>properties.sessionFields</td><td>object</td><td>Optional; custom fields with string values</td></tr></tbody></table></div><h4 class="heading"><a id="errors-7" href="#errors-7" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#errors-7"><span class="icon icon-link"></span></a>Errors</a></h4><ul><li><code>CUSTOMER_SESSION_FIELDS_LIMIT_REACHED</code> - total amount of session fields would have been exceeded after requested update</li></ul><h3 class="heading"><a id="updatecustomerpage" href="#updatecustomerpage" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#updatecustomerpage"><span class="icon icon-link"></span></a>updateCustomerPage</a></h3><p>Updates information about the Customer page using the provided page object.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> page <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'https://platform.text.com/'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'LiveChat for Developers'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> customerSDK<span class="token punctuation">.</span><span class="token method function property-access">updateCustomerPage</span><span class="token punctuation">(</span>page<span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th></tr></thead><tbody><tr><td>page</td><td></td></tr><tr><td>page.url</td><td>string</td></tr><tr><td>page.title</td><td>string</td></tr></tbody></table></div><h3 class="heading"><a id="updateeventproperties" href="#updateeventproperties" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#updateeventproperties"><span class="icon icon-link"></span></a>updateEventProperties</a></h3><p>Updates given properties of an event.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> properties <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">property_namespace</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">sample</span><span class="token operator">:</span> <span class="token string">'property'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> customerSDK <span class="token punctuation">.</span><span class="token method function property-access">updateEventProperties</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">threadId</span><span class="token operator">:</span> <span class="token string">'OS0C0W0Z1B'</span><span class="token punctuation">,</span> <span class="token literal-property property">eventId</span><span class="token operator">:</span> <span class="token string">'Q50W0A0P0Y'</span><span class="token punctuation">,</span> properties<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>ID of the chat whose properties you want to update.</td></tr><tr><td>threadId</td><td>string</td><td>ID of the thread whose properties you want to update.</td></tr><tr><td>eventId</td><td>string</td><td>ID of the event whose properties you want to update.</td></tr><tr><td>properties</td><td>object</td><td><a href="https://platform.text.com/docs/messaging/references/default-properties">Default properties docs</a></td></tr></tbody></table></div><h3 class="heading"><a id="updatethreadproperties" href="#updatethreadproperties" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#updatethreadproperties"><span class="icon icon-link"></span></a>updateThreadProperties</a></h3><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> properties <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">property_namespace</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">sample</span><span class="token operator">:</span> <span class="token string">'property'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> customerSDK <span class="token punctuation">.</span><span class="token method function property-access">updateThreadProperties</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">threadId</span><span class="token operator">:</span> <span class="token string">'OS0C0W0Z1B'</span><span class="token punctuation">,</span> properties<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>ID of the chat whose properties you want to update.</td></tr><tr><td>threadId</td><td>string</td><td>ID of the thread whose properties you want to update.</td></tr><tr><td>properties</td><td>object</td><td><a href="https://platform.text.com/docs/messaging/references/default-properties">Default properties docs</a>.</td></tr></tbody></table></div><h3 class="heading"><a id="uploadfile" href="#uploadfile" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#uploadfile"><span class="icon icon-link"></span></a>uploadFile</a></h3><p>Returns both a <code>promise</code> and a <code>cancel</code>. You can use <code>cancel</code> to abort a file upload. It also lets you pass the <code>onProgress</code> callback function. Keep in mind that the maximum accepted file size is 10 MB.</p><p>It returns a URL that expires after 24 hours unless the URL is used in <a href="/docs/extending-chat-widget/customer-sdk#sendevent" class="css-kbi7q3"><code>sendEvent</code></a></p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> promise<span class="token punctuation">,</span> cancel <span class="token punctuation">}</span> <span class="token operator">=</span> customerSDK<span class="token punctuation">.</span><span class="token method function property-access">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span> file<span class="token punctuation">,</span> <span class="token function-variable function">onProgress</span><span class="token operator">:</span> <span class="token parameter">progress</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">upload progress: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>progress<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</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">'cancel-upload'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token function">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> promise <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">url</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 control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>file</td><td>blob</td><td></td></tr><tr><td>onProgress</td><td>function</td><td>Receives a progress value</td></tr></tbody></table></div><p>onProgress parameters:</p><div class="css-q76ucn"><table><thead><tr><th>parameters</th><th>type</th><th>min</th><th>max</th></tr></thead><tbody><tr><td>progress</td><td>number</td><td>0</td><td>1</td></tr></tbody></table></div><p>Returned value:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>url</td><td>string</td></tr></tbody></table></div><p>In React Native, instead of passing a blob you need to pass an object of <a href="https://github.com/facebook/react-native/blob/56fef9b6225ffc1ba87f784660eebe842866c57d/Libraries/Network/FormData.js#L34-L38">such a shape</a>:</p><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> file <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">uri</span><span class="token operator">:</span> uriFromCameraRoll<span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'image/jpeg'</span><span class="token punctuation">,</span> <span class="token comment">// optional</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'photo.jpg'</span><span class="token punctuation">,</span> <span class="token comment">// optional</span> <span class="token punctuation">}</span> </code></pre></div><h2 class="heading css-1679d3t"><a id="events" href="#events" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#events"><span class="icon icon-link"></span></a>Events</a></h2><p>You can listen for emitted events by subscribing to them using the <a href="/docs/extending-chat-widget/customer-sdk#on">on</a> method with your custom callback. For example, your function can be executed every time a message is received.</p><h3 class="heading"><a id="availability-updated" href="#availability-updated" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#availability-updated"><span class="icon icon-link"></span></a>Availability updated</a></h3><p>Informs about a changed availability status.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'availability_updated'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> availability <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'availability_updated'</span><span class="token punctuation">,</span> availability<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>availability</td><td>string</td><td>'online' or 'offline'</td></tr></tbody></table></div><h3 class="heading"><a id="chat-deactivated" href="#chat-deactivated" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#chat-deactivated"><span class="icon icon-link"></span></a>Chat deactivated</a></h3><p>Informs that thread has been closed.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'chat_deactivated'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'chat_deactivated'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr></tbody></table></div><h3 class="heading"><a id="chat-properties-deleted" href="#chat-properties-deleted" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#chat-properties-deleted"><span class="icon icon-link"></span></a>Chat properties deleted</a></h3><p>Informs about deleted chat properties.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'chat_properties_deleted'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'chat_properties_deleted'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>properties</td><td>object</td><td>Chat properties</td></tr></tbody></table></div><h3 class="heading"><a id="chat-properties-updated" href="#chat-properties-updated" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#chat-properties-updated"><span class="icon icon-link"></span></a>Chat properties updated</a></h3><p>Informs about updated chat properties.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'chat_properties_updated'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'chat_properties_updated'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>properties</td><td>object</td><td>Chat properties</td></tr></tbody></table></div><h3 class="heading"><a id="chat-transferred" href="#chat-transferred" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#chat-transferred"><span class="icon icon-link"></span></a>Chat transferred</a></h3><p>Informs that a chat was transferred to a different group or an Agent.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'chat_transferred'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> transferredTo <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'chat_transferred'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> transferredTo<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><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td></td></tr><tr><td>threadId</td><td>string</td><td></td></tr><tr><td>reason</td><td>string</td><td></td></tr><tr><td>requesterId</td><td>string</td><td>returned only if <code>reason</code> is equal to <code>'manual'</code></td></tr><tr><td>transferredTo</td><td></td><td></td></tr><tr><td>transferredTo.agentIds</td><td>string[]</td><td>optional</td></tr><tr><td>transferredTo.groupIds</td><td>number[]</td><td>optional</td></tr><tr><td>queue</td><td></td><td>optional</td></tr><tr><td>queue.position</td><td>number</td><td>Current place in the queue</td></tr><tr><td>queue.waitTime</td><td>number</td><td>Estimated waiting time for an agent to be assigned to the chat, in seconds</td></tr><tr><td>queue.queuedAt</td><td>string</td><td>RFC 3339 date-time format</td></tr></tbody></table></div><h3 class="heading"><a id="connected" href="#connected" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#connected"><span class="icon icon-link"></span></a>Connected</a></h3><p>Informs that the connection has been established.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'connected'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> customer<span class="token punctuation">,</span> availability<span class="token punctuation">,</span> greeting <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'connected'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> customer<span class="token punctuation">,</span> availability<span class="token punctuation">,</span> greeting <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>argument</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>customer</td><td>object</td><td>Customer object, the same as the response from <a href="/docs/extending-chat-widget/customer-sdk#getcustomer" class="css-kbi7q3"><code>getCustomer</code></a></td></tr><tr><td>availability</td><td>string</td><td>'online' or 'offline'</td></tr><tr><td>greeting</td><td>greeting</td><td>Optional greeting received before the thread started</td></tr></tbody></table></div><p>Greeting:</p><div class="css-q76ucn"><table><thead><tr><th>argument</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>id</td><td>number</td><td>Greeting template identifier</td></tr><tr><td>text</td><td>string</td><td>Text content of the greeting message</td></tr><tr><td>uniqueId</td><td>string</td><td>Unique event ID of the greeting</td></tr><tr><td>displayedFirstTime</td><td>boolean</td><td></td></tr><tr><td>accepted</td><td>boolean</td><td></td></tr><tr><td>agent.id</td><td>string</td><td></td></tr><tr><td>agent.name</td><td>string</td><td></td></tr><tr><td>agent.avatar</td><td>string</td><td></td></tr><tr><td>agent.jobTitle</td><td>string</td><td></td></tr><tr><td>agent.isBot</td><td>boolean</td><td></td></tr></tbody></table></div><h3 class="heading"><a id="connection-recovered" href="#connection-recovered" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#connection-recovered"><span class="icon icon-link"></span></a>Connection recovered</a></h3><p>Informs that Customer SDK has recovered from an "unstable" connection state. It's always preceded by the <a href="/docs/extending-chat-widget/customer-sdk#connection-unstable" class="css-kbi7q3"><code>"connection_unstable"</code></a> event.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'connection_recovered'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'connection_recovered'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>This event doesn't carry any additional payload.</p><h3 class="heading"><a id="connection-unstable" href="#connection-unstable" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#connection-unstable"><span class="icon icon-link"></span></a>Connection unstable</a></h3><p>Informs that Customer SDK has detected that connection quality is poor. It doesn't mean that it has disconnected from the server just yet.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'connection_unstable'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'connection_unstable'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>This event doesn't carry any additional payload.</p><h3 class="heading"><a id="customer-id" href="#customer-id" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#customer-id"><span class="icon icon-link"></span></a>Customer ID</a></h3><p>Informs about the ID of the Customer.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'customer_id'</span><span class="token punctuation">,</span> <span class="token parameter">id</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'customer id is'</span><span class="token punctuation">,</span> id<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>argument</th><th>type</th></tr></thead><tbody><tr><td>id</td><td>string</td></tr></tbody></table></div><h3 class="heading"><a id="customer-page-updated" href="#customer-page-updated" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#customer-page-updated"><span class="icon icon-link"></span></a>Customer page updated</a></h3><p>The Customer moved to another page, for example by following a link on your website.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'customer_page_updated'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> url<span class="token punctuation">,</span> title<span class="token punctuation">,</span> openedAt <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'customer_page_updated'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> url<span class="token punctuation">,</span> title<span class="token punctuation">,</span> openedAt <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th></th></tr></thead><tbody><tr><td>url</td><td>string</td><td>URL of the Customer current website</td></tr><tr><td>title</td><td>string</td><td>Title of the Customer current website</td></tr><tr><td>openedAt</td><td>string</td><td>Date of the last update in RFC 3339 date-time format</td></tr></tbody></table></div><h3 class="heading"><a id="customer-updated" href="#customer-updated" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#customer-updated"><span class="icon icon-link"></span></a>Customer updated</a></h3><p>Informs that Customer's data was updated. Each property in payload is available only if it was updated.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'customer_updated'</span><span class="token punctuation">,</span> <span class="token parameter">customer</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>customer<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Name got updated to: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>customer<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>customer<span class="token punctuation">.</span><span class="token property-access">email</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Email got updated to: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>customer<span class="token punctuation">.</span><span class="token property-access">email</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>customer<span class="token punctuation">.</span><span class="token property-access">avatar</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Avatar got updated to: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>customer<span class="token punctuation">.</span><span class="token property-access">avatar</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>customer<span class="token punctuation">.</span><span class="token property-access">fields</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Fields got updated:</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>customer<span class="token punctuation">.</span><span class="token property-access">fields</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>name</td><td>string</td></tr><tr><td>email</td><td>string</td></tr><tr><td>avatar</td><td>string</td></tr><tr><td>fields</td><td>object</td></tr></tbody></table></div><h3 class="heading"><a id="disconnected" href="#disconnected" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#disconnected"><span class="icon icon-link"></span></a>Disconnected</a></h3><p>Informs that SDK has disconnected from the server. The event provides the disconnection reason.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'disconnected'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> reason <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'disconnected'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> reason <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>reason</td><td>string</td><td><a href="/docs/extending-chat-widget/customer-sdk#disconnection-reasons">disconnection reasons</a></td></tr></tbody></table></div><h3 class="heading"><a id="event-properties-deleted" href="#event-properties-deleted" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#event-properties-deleted"><span class="icon icon-link"></span></a>Event properties deleted</a></h3><p>Informs about the event properties that were deleted.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'event_properties_deleted'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> eventId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'event_properties_deleted'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> eventId<span class="token punctuation">,</span> properties<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><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>threadId</td><td>string</td><td>Thread ID</td></tr><tr><td>eventId</td><td>string</td><td>Event ID</td></tr><tr><td>properties</td><td>object</td><td>Event properties</td></tr></tbody></table></div><h3 class="heading"><a id="event-properties-updated" href="#event-properties-updated" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#event-properties-updated"><span class="icon icon-link"></span></a>Event properties updated</a></h3><p>Informs about the event properties that were updated.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'event_properties_updated'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> eventId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'event_properties_updated'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> eventId<span class="token punctuation">,</span> properties<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><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>threadId</td><td>string</td><td>Thread ID</td></tr><tr><td>eventId</td><td>string</td><td>Event ID</td></tr><tr><td>properties</td><td>object</td><td>Event properties</td></tr></tbody></table></div><h3 class="heading"><a id="event-updated" href="#event-updated" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#event-updated"><span class="icon icon-link"></span></a>Event updated</a></h3><p>Informs that an event was updated.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'event_updated'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> event <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'event_updated'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> event <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>threadId</td><td>string</td><td>Thread ID</td></tr><tr><td>event</td><td>object</td><td>The entire updated event</td></tr></tbody></table></div><h3 class="heading"><a id="events-marked-as-seen" href="#events-marked-as-seen" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#events-marked-as-seen"><span class="icon icon-link"></span></a>Events marked as seen</a></h3><p>Informs that the events were seen by the particular user.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'events_marked_as_seen'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> userId<span class="token punctuation">,</span> seenUpTo <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'events_marked_as_seen'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> userId<span class="token punctuation">,</span> seenUpTo <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>userId</td><td>string</td><td>User ID</td></tr><tr><td>seenUpTo</td><td>string</td><td>RFC 3339 date-time format</td></tr></tbody></table></div><h3 class="heading"><a id="greeting-accepted" href="#greeting-accepted" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#greeting-accepted"><span class="icon icon-link"></span></a>Greeting accepted</a></h3><p>Informs about a greeting accepted by the Customer.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'greeting_accepted'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'greeting_accepted'</span><span class="token punctuation">,</span> payload<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> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>uniqueId</td><td>string</td></tr></tbody></table></div><h3 class="heading"><a id="greeting-canceled" href="#greeting-canceled" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#greeting-canceled"><span class="icon icon-link"></span></a>Greeting canceled</a></h3><p>Informs about a greeting canceled by the Customer. It is also emitted when a new greeting automatically cancels the currently displayed one.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'greeting_canceled'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'greeting_canceled'</span><span class="token punctuation">,</span> payload<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> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>uniqueId</td><td>string</td></tr></tbody></table></div><h3 class="heading"><a id="incoming-chat" href="#incoming-chat" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#incoming-chat"><span class="icon icon-link"></span></a>Incoming chat</a></h3><p>Informs about a newly started chat thread. The payload contains the chat data structure and an object describing the new thread. If the chat was started with some initial events, they will be included in the thread object.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'incoming_chat'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chat <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> access<span class="token punctuation">,</span> users<span class="token punctuation">,</span> properties<span class="token punctuation">,</span> thread <span class="token punctuation">}</span> <span class="token operator">=</span> chat <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'incoming_chat'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> access<span class="token punctuation">,</span> users<span class="token punctuation">,</span> properties<span class="token punctuation">,</span> thread <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chat.id</td><td>string</td><td>Chat ID</td></tr><tr><td>chat.access</td><td>object</td><td>Chat initial access</td></tr><tr><td>chat.users</td><td>object[]</td><td>Users objects referenced in the chat</td></tr><tr><td>chat.properties</td><td>object</td><td>Chat properties</td></tr><tr><td>chat.thread</td><td>object</td><td></td></tr></tbody></table></div><h3 class="heading"><a id="incoming-event" href="#incoming-event" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#incoming-event"><span class="icon icon-link"></span></a>Incoming event</a></h3><p>Informs about an incoming event sent to a chat. You should distinguish received events by their types.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'incoming_event'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chat<span class="token punctuation">,</span> event <span class="token punctuation">}</span> <span class="token operator">=</span> payload <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 console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'new message - '</span><span class="token punctuation">,</span> event<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">)</span> <span class="token keyword control-flow">break</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> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>type</td><td>string</td><td>Event type</td></tr><tr><td>...</td><td></td><td>Other properties</td></tr></tbody></table></div><h3 class="heading"><a id="incoming-greeting" href="#incoming-greeting" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#incoming-greeting"><span class="icon icon-link"></span></a>Incoming greeting</a></h3><p>Informs about an incoming greeting.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'incoming_greeting'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> text<span class="token punctuation">,</span> agent <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator">=</span> agent <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Received a greeting with "</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>text<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" text content from </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>id</td><td>number</td><td>Greeting template ID</td></tr><tr><td>text</td><td>string</td><td>Greeting text content</td></tr><tr><td>uniqueId</td><td>string</td><td>Greeting unique ID</td></tr><tr><td>displayedFirstTime</td><td>boolean</td><td>Describes if the greeting was generated for the first time.</td></tr><tr><td>accepted</td><td>boolean</td><td>Chat properties</td></tr><tr><td>agent</td><td>object</td><td>Agent user</td></tr></tbody></table></div><h3 class="heading"><a id="incoming-rich-message-postback" href="#incoming-rich-message-postback" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#incoming-rich-message-postback"><span class="icon icon-link"></span></a>Incoming rich message postback</a></h3><p>Informs about an incoming rich message postback.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'incoming_rich_message_postback'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> eventId<span class="token punctuation">,</span> userId<span class="token punctuation">,</span> postback <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'incoming_rich_message_postback'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> eventId<span class="token punctuation">,</span> userId<span class="token punctuation">,</span> postback<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><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID of the sent postback</td></tr><tr><td>threadId</td><td>string</td><td>Thread ID of the sent postback</td></tr><tr><td>eventId</td><td>string</td><td>Event ID of the sent postback</td></tr><tr><td>userId</td><td>number</td><td>User who has sent a rich message postback</td></tr><tr><td>postback.id</td><td>boolean</td><td>ID of the sent postback</td></tr><tr><td>postback.toggled</td><td>boolean</td><td>Describes if the sent postback was toggled.</td></tr></tbody></table></div><h3 class="heading"><a id="incoming-typing-indicator" href="#incoming-typing-indicator" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#incoming-typing-indicator"><span class="icon icon-link"></span></a>Incoming typing indicator</a></h3><p>Informs that one of the chat users is currently typing a message. The message hasn't been sent yet. The push payload contains the typing indicator object.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'incoming_typing_indicator'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>payload<span class="token punctuation">.</span><span class="token property-access">typingIndicator</span><span class="token punctuation">.</span><span class="token property-access">isTyping</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">user with </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>payload<span class="token punctuation">.</span><span class="token property-access">typingIndicator</span><span class="token punctuation">.</span><span class="token property-access">authorId</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> id is writing something in </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>payload<span class="token punctuation">.</span><span class="token property-access">chatId</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">user with </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>payload<span class="token punctuation">.</span><span class="token property-access">typingIndicator</span><span class="token punctuation">.</span><span class="token property-access">authorId</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> id stopped writing in </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>payload<span class="token punctuation">.</span><span class="token property-access">chatId</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>typingIndicator</td><td></td><td></td></tr><tr><td>typingIndicator.authorId</td><td>string</td><td>User ID</td></tr><tr><td>typingIndicator.isTyping</td><td>boolean</td><td></td></tr></tbody></table></div><h3 class="heading"><a id="queue-position-updated" href="#queue-position-updated" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#queue-position-updated"><span class="icon icon-link"></span></a>Queue position updated</a></h3><p>Informs that the queue position has been updated.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'queue_position_updated'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>payload<span class="token punctuation">.</span><span class="token property-access">chatId</span><span class="token punctuation">)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>payload<span class="token punctuation">.</span><span class="token property-access">threadId</span><span class="token punctuation">)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>payload<span class="token punctuation">.</span><span class="token property-access">queue</span><span class="token punctuation">.</span><span class="token property-access">position</span><span class="token punctuation">)</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>payload<span class="token punctuation">.</span><span class="token property-access">queue</span><span class="token punctuation">.</span><span class="token property-access">waitTime</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>threadId</td><td>string</td><td>Thread ID</td></tr><tr><td>queue</td><td></td><td></td></tr><tr><td>queue.position</td><td>number</td><td>Current place in the queue</td></tr><tr><td>queue.waitTime</td><td>number</td><td>Estimated waiting time for an agent to be assigned to the chat, in seconds</td></tr></tbody></table></div><h3 class="heading"><a id="thread-properties-deleted" href="#thread-properties-deleted" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#thread-properties-deleted"><span class="icon icon-link"></span></a>Thread properties deleted</a></h3><p>Informs about deleted thread properties.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'thread_properties_deleted'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'thread_properties_deleted'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>threadId</td><td>string</td><td>Thread ID</td></tr><tr><td>properties</td><td>object</td><td>Chat thread properties</td></tr></tbody></table></div><h3 class="heading"><a id="thread-properties-updated" href="#thread-properties-updated" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#thread-properties-updated"><span class="icon icon-link"></span></a>Thread properties updated</a></h3><p>Informs about updated thread properties.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'thread_properties_updated'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'thread_properties_updated'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> threadId<span class="token punctuation">,</span> properties <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>threadId</td><td>string</td><td>Thread ID</td></tr><tr><td>properties</td><td>object</td><td>Thread properties</td></tr></tbody></table></div><h3 class="heading"><a id="user-added-to-chat" href="#user-added-to-chat" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#user-added-to-chat"><span class="icon icon-link"></span></a>User added to chat</a></h3><p>Informs that a user was added to a chat.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'user_added_to_chat'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> user<span class="token punctuation">,</span> present <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'user_added_to_chat'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> user<span class="token punctuation">,</span> present <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>user</td><td>object</td><td>User</td></tr><tr><td>present</td><td>boolean</td><td></td></tr></tbody></table></div><h3 class="heading"><a id="user-data" href="#user-data" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#user-data"><span class="icon icon-link"></span></a>User data</a></h3><p>Contains the information about the User data.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'user_data'</span><span class="token punctuation">,</span> <span class="token parameter">user</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><h4 class="heading"><a id="customer-user-type" href="#customer-user-type" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#customer-user-type"><span class="icon icon-link"></span></a>Customer user type:</a></h4><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>type</td><td>'customer'</td><td></td></tr><tr><td>id</td><td>string</td><td></td></tr><tr><td>name</td><td>string</td><td>Optional</td></tr><tr><td>email</td><td>string</td><td>Optional</td></tr><tr><td>avatar</td><td>string</td><td>Optional</td></tr><tr><td>fields</td><td>customerFields</td><td></td></tr></tbody></table></div><h4 class="heading"><a id="agent-user-type" href="#agent-user-type" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#agent-user-type"><span class="icon icon-link"></span></a>Agent user type:</a></h4><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th></tr></thead><tbody><tr><td>type</td><td>'agent'</td></tr><tr><td>id</td><td>string</td></tr><tr><td>name</td><td>string</td></tr><tr><td>avatar</td><td>string</td></tr><tr><td>jobTitle</td><td>string</td></tr></tbody></table></div><h3 class="heading"><a id="user-removed-from-chat" href="#user-removed-from-chat" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#user-removed-from-chat"><span class="icon icon-link"></span></a>User removed from chat</a></h3><p>Informs that a user was removed from a chat.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'user_removed_from_chat'</span><span class="token punctuation">,</span> <span class="token parameter">payload</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> userId <span class="token punctuation">}</span> <span class="token operator">=</span> payload <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'user_removed_from_chat'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> chatId<span class="token punctuation">,</span> userId <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><p>Payload:</p><div class="css-q76ucn"><table><thead><tr><th>properties</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>chatId</td><td>string</td><td>Chat ID</td></tr><tr><td>userId</td><td>string</td><td>User ID</td></tr></tbody></table></div><h2 class="heading css-1679d3t"><a id="disconnection-reasons" href="#disconnection-reasons" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#disconnection-reasons"><span class="icon icon-link"></span></a>Disconnection reasons</a></h2><p>Most of the disconnection reasons can be treated as errors. Because of that, you can find their detailed descriptions in this section.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'disconnected'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> reason <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>reason<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">'access_token_expired'</span><span class="token operator">:</span> <span class="token comment">// handle particular disconnection reasons</span> <span class="token keyword control-flow">break</span> <span class="token comment">// ...</span> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><h3 class="heading"><a id="access-token-expired" href="#access-token-expired" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#access-token-expired"><span class="icon icon-link"></span></a>Access token expired</a></h3><p>Access token lifetime has elapsed. Customer SDK fetches a new token and reconnects to the server on its own. This is emitted to the user for informational purposes, so for example a reconnection bar can be displayed.</p><h3 class="heading"><a id="connection-lost" href="#connection-lost" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#connection-lost"><span class="icon icon-link"></span></a>Connection lost</a></h3><p>Disconnected because of the poor connection quality. Customer SDK will try to reconnect on its own.</p><h3 class="heading"><a id="customer-banned" href="#customer-banned" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#customer-banned"><span class="icon icon-link"></span></a>Customer banned</a></h3><p>The Customer has been banned.</p><p>This internally destroys the current instance of Customer SDK, so it won't be possible to reuse it.</p><h3 class="heading"><a id="customer-temporarily-blocked" href="#customer-temporarily-blocked" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#customer-temporarily-blocked"><span class="icon icon-link"></span></a>Customer temporarily blocked</a></h3><p>The Customer tried reconnecting too many times after the <a href="/docs/extending-chat-widget/customer-sdk#too-many-connections" class="css-kbi7q3"><code>"too_many_connections"</code></a> error had occurred.</p><p>This internally destroys the current instance of Customer SDK, so it won't be possible to reuse it.</p><h3 class="heading"><a id="identity-mismatch" href="#identity-mismatch" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#identity-mismatch"><span class="icon icon-link"></span></a>Identity mismatch</a></h3><p>The identity of the Customer has changed between reconnects. This might happen if cookies can't be persisted in the browser.</p><p>This internally destroys the current instance of Customer SDK, so it won't be possible to reuse it.</p><h3 class="heading"><a id="inactivity-timeout" href="#inactivity-timeout" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#inactivity-timeout"><span class="icon icon-link"></span></a>Inactivity timeout</a></h3><p>The Customer didn't chat or change the page in the past 30 minutes. Customer SDK <strong>won't</strong> try to reconnect on its own after receiving this error. You should implement a reconnect login on your own. Preferably you should only try to reconnect when you detect a clear intention of chatting from your user.</p><h3 class="heading"><a id="internal-error" href="#internal-error" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#internal-error"><span class="icon icon-link"></span></a>Internal error</a></h3><p>Internal error. Customer SDK reconnects on its own.</p><h3 class="heading"><a id="license-expired" href="#license-expired" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#license-expired"><span class="icon icon-link"></span></a>License expired</a></h3><p>The license with the specified ID has expired. You should make sure that there are no unpaid invoices for it.</p><h3 class="heading"><a id="license-not-found" href="#license-not-found" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#license-not-found"><span class="icon icon-link"></span></a>License not found</a></h3><p>The license with the specified ID doesn't exist. You should check the options passed in to Customer SDK and make sure that the license parameter is correct.</p><p>This internally destroys the current instance of Customer SDK, so it won't be possible to reuse it.</p><h3 class="heading"><a id="misdirected-connection" href="#misdirected-connection" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#misdirected-connection"><span class="icon icon-link"></span></a>Misdirected connection</a></h3><p>You have connected to a server in the wrong region. Customer SDK reconnects to the correct region on its own, but to avoid this problem altogether, you should provide the correct <code>region</code> parameter when initializing the SDK. This is emitted to the user for informational purposes, so for example a reconnection bar can be displayed.</p><h3 class="heading"><a id="too-many-connections" href="#too-many-connections" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#too-many-connections"><span class="icon icon-link"></span></a>Too many connections</a></h3><p>The Customer has reached the maximum number of connections. You should avoid opening too many concurrent connections for the same Customer.</p><p>This internally destroys the current instance of Customer SDK, so it won't be possible to reuse it.</p><h3 class="heading"><a id="too-many-unauthorized-connections" href="#too-many-unauthorized-connections" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#too-many-unauthorized-connections"><span class="icon icon-link"></span></a>Too many unauthorized connections</a></h3><p>The maximum number of unauthorized connections has been reached. This error can only be received immediately after you try to connect to our servers when there are too many pending (unauthorized) connections. Once you get authorized, you stay that way and the Customer SDK reconnects on its own.</p><h3 class="heading"><a id="unsupported-version" href="#unsupported-version" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#unsupported-version"><span class="icon icon-link"></span></a>Unsupported version</a></h3><p>Connecting to an unsupported version of the Customer Chat API. You should upgrade your Customer SDK version.</p><p>This internally destroys the current instance of Customer SDK, so it won't be possible to reuse it.</p><h3 class="heading"><a id="users-limit-reached" href="#users-limit-reached" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#users-limit-reached"><span class="icon icon-link"></span></a>Users limit reached</a></h3><p>The maximum number of Customers connected at the same time has been reached. This can only be received immediately after we try to connect to our servers, because once you get authorized, you stay that way. The limit is different for each plan, and you can check the exact values on our <a href="https://www.livechat.com/pricing/">pricing page</a>.</p><p>This internally disconnects from the current instance of the Customer SDK. After that, the manual <code>connect()</code> call will be required, preferably linked to the user's action rather than automated.</p><h2 class="heading css-1679d3t"><a id="errors-8" href="#errors-8" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#errors-8"><span class="icon icon-link"></span></a>Errors</a></h2><p>This is the list of standard error codes. You can receive them for all available methods which perform API calls. It means the errors can occur for methods returning Promises. Because we wrap API calls with Promise interface, the errors are available on the thrown <code>Error</code> objects under the <code>code</code> property. They can be caught using a regular Promise <code>catch</code> method.</p><p>There are also some per-method error codes, which are not described below. They are mentioned under corresponding methods instead.</p><h3 class="heading"><a id="connection-lost-1" href="#connection-lost-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#connection-lost-1"><span class="icon icon-link"></span></a>Connection lost</a></h3><p>All in-flight requests fail with this one when the network connection gets lost.</p><h3 class="heading"><a id="customer-banned-1" href="#customer-banned-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#customer-banned-1"><span class="icon icon-link"></span></a>Customer banned</a></h3><p>The Customer has been banned.</p><h3 class="heading"><a id="group-not-found" href="#group-not-found" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#group-not-found"><span class="icon icon-link"></span></a>Group not found</a></h3><p>Can be received in response to any request that accepts a group somewhere in its payload.</p><h3 class="heading"><a id="internal" href="#internal" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#internal"><span class="icon icon-link"></span></a>Internal</a></h3><p>Internal error.</p><h3 class="heading"><a id="pending-requests-limit-reached" href="#pending-requests-limit-reached" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#pending-requests-limit-reached"><span class="icon icon-link"></span></a>Pending requests limit reached</a></h3><p>This is a rate-limiting error. You have sent out too many requests in a too short time period without waiting for them to resolve.</p><h3 class="heading"><a id="request-timeout" href="#request-timeout" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#request-timeout"><span class="icon icon-link"></span></a>Request timeout</a></h3><p>The request has timed out.</p><h3 class="heading"><a id="service-unavailable" href="#service-unavailable" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#service-unavailable"><span class="icon icon-link"></span></a>Service unavailable</a></h3><p>The backend service is under heavy traffic and it had to restrict creation of a new resource.</p><h3 class="heading"><a id="validation" href="#validation" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#validation"><span class="icon icon-link"></span></a>Validation</a></h3><p>Wrong format of request, for example a <code>string</code> sent in the place of a <code>number</code>.</p><h2 class="heading css-1679d3t"><a id="recipes" href="#recipes" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#recipes"><span class="icon icon-link"></span></a>Recipes</a></h2><h3 class="heading"><a id="chat-transcript-feature" href="#chat-transcript-feature" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#chat-transcript-feature"><span class="icon icon-link"></span></a>Chat transcript feature</a></h3><p>To implement <a href="https://www.livechat.com/features/engaging-customers/#Chat-transcript">Chat transcript</a>, you need to set the <code>transcript_email</code> thread property in the <code>routing</code> namespace. The value of this property should be set to the email address of the requester.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK <span class="token punctuation">.</span><span class="token method function property-access">updateThreadProperties</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">chatId</span><span class="token operator">:</span> <span class="token string">'ON0X0R0L67'</span><span class="token punctuation">,</span> <span class="token literal-property property">threadId</span><span class="token operator">:</span> <span class="token string">'OS0C0W0Z1B'</span><span class="token punctuation">,</span> <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">routing</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">transcript_email</span><span class="token operator">:</span> <span class="token string">'john.doe@example.com'</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 punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><h3 class="heading"><a id="hard-limit-error-handling" href="#hard-limit-error-handling" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#hard-limit-error-handling"><span class="icon icon-link"></span></a>Hard limit error handling</a></h3><p>In order to handle <a href="https://platform.text.com/docs/extending-chat-widget/customer-sdk/#users-limit-reached">hard limit error</a> properly, you can listen for this specific disconnect reason and then react accordingly. In our case, we are showing simple information that our agents are not available at the moment.</p><div class="remark-highlight"><pre class="language-js"><code class="language-js">customerSDK<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">'disconnected'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> reason <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>reason <span class="token operator">===</span> <span class="token string">'users_limit_reached'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Our agents are not available at the moment'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><h2 class="heading css-1679d3t"><a id="changelog" href="#changelog" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#changelog"><span class="icon icon-link"></span></a>Changelog</a></h2><h3 class="heading"><a id="v402---2023-11-02" href="#v402---2023-11-02" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v402---2023-11-02"><span class="icon icon-link"></span></a>[v4.0.2] - 2023-11-02</a></h3><h4 class="heading"><a id="added" href="#added" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#added"><span class="icon icon-link"></span></a>Added</a></h4><ul><li>Extend init function types with page and referrer.</li></ul><h3 class="heading"><a id="v401---2023-09-19" href="#v401---2023-09-19" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v401---2023-09-19"><span class="icon icon-link"></span></a>[v4.0.1] - 2023-09-19</a></h3><h4 class="heading"><a id="added-1" href="#added-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#added-1"><span class="icon icon-link"></span></a>Added</a></h4><ul><li>Additional types and constants for better development experience.</li></ul><h4 class="heading"><a id="changed" href="#changed" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#changed"><span class="icon icon-link"></span></a>Changed</a></h4><p>Switched to using Customer API 3.5:</p><ul><li>Drop support for the <code>licenseId</code> parameter in the <code>init</code> method. It has been replaced by the <code>organizationId</code>.</li></ul><h4 class="heading"><a id="removed" href="#removed" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#removed"><span class="icon icon-link"></span></a>Removed</a></h4><ul><li><code>sendTicketForm</code> method. As of June 1 2023 LiveChat tickets are handled by <a href="https://www.helpdesk.com/help/tickets-dashboard-guide/">HelpDesk</a></li></ul><h3 class="heading"><a id="v312---2023-02-28" href="#v312---2023-02-28" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v312---2023-02-28"><span class="icon icon-link"></span></a>[v3.1.2] - 2023-02-28</a></h3><h4 class="heading"><a id="fixed" href="#fixed" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#fixed"><span class="icon icon-link"></span></a>Fixed</a></h4><ul><li>Fixed situations when a value for <code>urlDetails.imageUrl</code> available in the <code>getUrlInfo</code> method could sometimes return a URL with a duplicated protocol (like "https://https://...")</li></ul><h3 class="heading"><a id="v310---2021-10-7" href="#v310---2021-10-7" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v310---2021-10-7"><span class="icon icon-link"></span></a>[v3.1.0] - 2021-10-7</a></h3><h4 class="heading"><a id="added-2" href="#added-2" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#added-2"><span class="icon icon-link"></span></a>Added</a></h4><ul><li>New optional <code>config</code> property <code>identityProvider</code>, which allows for specifying own custom access token handlers.</li><li>Handle new event type <code>'form'</code> representing the optional custom forms sent from the server.</li></ul><h3 class="heading"><a id="v300---2021-05-25" href="#v300---2021-05-25" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v300---2021-05-25"><span class="icon icon-link"></span></a>[v3.0.0] - 2021-05-25</a></h3><h4 class="heading"><a id="fixed-1" href="#fixed-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#fixed-1"><span class="icon icon-link"></span></a>Fixed</a></h4><ul><li>Chat structures can now have <code>thread</code> set to <code>null</code> since it's possible for threads to be removed</li><li>Prevented additional connections to be created in the case when SDK gets destroyed in the middle of the <code>login</code> flow</li></ul><h4 class="heading"><a id="changed-1" href="#changed-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#changed-1"><span class="icon icon-link"></span></a>Changed</a></h4><ul><li>Switched to using Customer API 3.3:<ul><li><code>activateChat</code> method has been renamed to <code>resumeChat</code>.</li><li>In the <code>deactivateChat</code> method, the <code>chat_id</code> parameter was renamed to <code>id</code>.</li><li>In the <code>updateChatProperties</code> method, the <code>chat_id</code> parameter was renamed to <code>id</code>.</li><li>In the <code>deleteChatProperties</code> method, the <code>chat_id</code> parameter was renamed to <code>id</code>.</li><li>In the <code>getPredictedAgent</code> method, agent properties are grouped in <code>agent</code> property and additional <code>queue</code> parameter is returned.</li><li>In the <code>customer_page_updated</code> event the <code>timestamp</code> property has been replaced with <code>openedAt</code>.</li><li>In the <code>customer_updated</code> event customer data is no longer grouped in the <code>customer</code> object but rather all properties are returned at the top level.</li></ul></li><li>The communication with the server is done now using WebSocket endpoint, without the SockJS overhead.</li><li>Users limit handling changed from destroying the instance to disconnecting.</li></ul><h4 class="heading"><a id="added-3" href="#added-3" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#added-3"><span class="icon icon-link"></span></a>Added</a></h4><ul><li><code>active</code> parameter to the <code>startChat</code> & <code>resumeChat</code> methods. It defaults to <code>true</code> but can be used to create threads that are immediately inactive.</li><li>Greetings can now have a <code>subtype</code> property.</li><li>Support for <code>alternative_text</code> image property in:<ul><li>image attachments</li><li>rich greetings</li><li>rich messages</li></ul></li><li><code>cancel</code> button type in rich messages.</li><li>Support for the events of type <code>"custom"</code></li></ul><h3 class="heading"><a id="v204---2020-10-28" href="#v204---2020-10-28" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v204---2020-10-28"><span class="icon icon-link"></span></a>[v2.0.4] - 2020-10-28</a></h3><h4 class="heading"><a id="added-4" href="#added-4" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#added-4"><span class="icon icon-link"></span></a>Added</a></h4><ul><li>Updated documentation.</li></ul><h3 class="heading"><a id="v203---2020-08-31" href="#v203---2020-08-31" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v203---2020-08-31"><span class="icon icon-link"></span></a>[v2.0.3] - 2020-08-31</a></h3><h4 class="heading"><a id="fixed-2" href="#fixed-2" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#fixed-2"><span class="icon icon-link"></span></a>Fixed</a></h4><ul><li>Fixed API compatibility issues that could cause misalignment in data shape.</li></ul><h3 class="heading"><a id="v202---2020-08-21" href="#v202---2020-08-21" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v202---2020-08-21"><span class="icon icon-link"></span></a>[v2.0.2] - 2020-08-21</a></h3><h3 class="heading"><a id="fixed-3" href="#fixed-3" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#fixed-3"><span class="icon icon-link"></span></a>Fixed</a></h3><ul><li>Updated the <code>@livechat/file-upload</code> dependency to resolve compatibility issues.</li></ul><h3 class="heading"><a id="v201---2020-06-24" href="#v201---2020-06-24" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v201---2020-06-24"><span class="icon icon-link"></span></a>[v2.0.1] - 2020-06-24</a></h3><h4 class="heading"><a id="fixed-4" href="#fixed-4" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#fixed-4"><span class="icon icon-link"></span></a>Fixed</a></h4><ul><li><code>rateChat</code> and <code>cancelRate</code> methods are updating properties of the correct thread now.</li></ul><h3 class="heading"><a id="v200---2020-06-22" href="#v200---2020-06-22" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v200---2020-06-22"><span class="icon icon-link"></span></a>[v2.0.0] - 2020-06-22</a></h3><h4 class="heading"><a id="changed-2" href="#changed-2" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#changed-2"><span class="icon icon-link"></span></a>Changed</a></h4><ul><li>The iterator returned from <code>getChatHistory</code> no longer returns <code>users</code>. User data needs to be obtained independently, for example by using the <code>getChat</code> method.</li><li><code>listChats</code> no longer accepts <code>offset</code> parameter. Instead, it now accepts <code>pageId</code> to which you can provide a value of <code>previousPageId</code> or <code>nextPageId</code> returned from the other <code>listChats</code> calls.</li><li>Chat objects returned from <code>listChats</code> no longer have the <code>lastThreadOrder</code> property, but they received a new <code>lastThreadCreatedAt</code> property instead.</li><li>The <code>threads</code> objects no longer have the <code>order</code> property, but they received a new <code>createdAt</code> property instead.</li><li>The <code>eventsSeenUpToMap</code> is no longer available on the thread object, it has been moved to chat objects.</li><li>The payload of the <code>chat_transferred</code> event was changed. It now always has the <code>reason</code> property. It contains the <code>queue</code> property if the chat has been transferred and queued immediately. <code>requesterId</code> is available when <code>reason</code> is equal to <code>"manual"</code>.</li></ul><h4 class="heading"><a id="removed-1" href="#removed-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#removed-1"><span class="icon icon-link"></span></a>Removed</a></h4><ul><li>The <code>access_set</code> event has been removed. <code>chat_transferred</code> event covers for its use cases.</li><li>The <code>getChatThreads</code> and the <code>getChatThreadsSummary</code> methods have been removed. Newly introduced <code>listThreads</code> can be used instead.</li></ul><h4 class="heading"><a id="added-5" href="#added-5" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#added-5"><span class="icon icon-link"></span></a>Added</a></h4><ul><li>The <code>listThreads</code> and <code>getChat</code> methods have been added.</li><li>The thread objects gained back <code>userIds</code> property.</li><li>The thread objects got <code>previousThreadId</code> and <code>nextThreadId</code> properties.</li><li>The <code>sendTicketForm</code> methods accepts a new <code>timeZone</code> parameter which influences how times are formatted in a generated ticket.</li><li>Queue objects got a new <code>queuedAt</code> property. This doesn't apply to the information returned in <code>queue_position_updated</code> event.</li></ul><h3 class="heading"><a id="v200-beta2---2020-04-02" href="#v200-beta2---2020-04-02" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v200-beta2---2020-04-02"><span class="icon icon-link"></span></a>[v2.0.0-beta.2] - 2020-04-02</a></h3><h4 class="heading"><a id="changed-3" href="#changed-3" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#changed-3"><span class="icon icon-link"></span></a>Changed</a></h4><ul><li>Renamed methods:<ul><li><code>closeThread</code> to <code>deactivateChat</code></li><li><code>deleteChatThreadProperties</code> to <code>deleteThreadProperties</code></li><li><code>getChatsSummary</code> to <code>listChats</code></li><li><code>getGroupsStatus</code> to <code>listGroupStatuses</code></li><li><code>getUrlDetails</code> to <code>getUrlInfo</code></li><li><code>updateChatThreadProperties</code> to <code>updateThreadProperties</code></li></ul></li><li>Renamed events:<ul><li><code>chat_thread_properties_deleted</code> to <code>thread_properties_deleted</code></li><li><code>chat_thread_properties_updated</code> to <code>thread_properties_updated</code></li><li><code>chat_user_added</code> to <code>user_added_to_chat</code></li><li><code>chat_user_removed</code> to <code>user_removed_from_chat</code></li><li><code>thread_closed</code> to <code>chat_deactivated</code></li></ul></li><li><code>chat_transferred</code> event doesn't contain <code>type</code> and <code>ids</code> properties anymore. Instead <code>transferredTo</code> property is available. It has optional <code>agentIds</code> and <code>groupIds</code> properties</li></ul><h4 class="heading"><a id="added-6" href="#added-6" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#added-6"><span class="icon icon-link"></span></a>Added</a></h4><ul><li><code>customer</code> data available in the <code>connected</code> callback</li><li><code>statistics</code> property available on the Customer object returned from the <code>getCustomer</code> method</li></ul><h3 class="heading"><a id="v200-beta1---2020-03-13" href="#v200-beta1---2020-03-13" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v200-beta1---2020-03-13"><span class="icon icon-link"></span></a>[v2.0.0-beta.1] - 2020-03-13</a></h3><h4 class="heading"><a id="fixed-5" href="#fixed-5" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#fixed-5"><span class="icon icon-link"></span></a>Fixed</a></h4><ul><li>Updated the <code>@livechat/customer-auth</code> dependency, which has been previously published with broken dist files.</li></ul><h3 class="heading"><a id="v200-beta0---2020-03-12" href="#v200-beta0---2020-03-12" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v200-beta0---2020-03-12"><span class="icon icon-link"></span></a>[v2.0.0-beta.0] - 2020-03-12</a></h3><h4 class="heading"><a id="changed-4" href="#changed-4" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#changed-4"><span class="icon icon-link"></span></a>Changed</a></h4><ul><li><p>Most methods have been changed to accept parameters by name instead of by position. We found this pattern to be easier to read and maintain in the long run. As an example, a call that previously might have looked like this: <code>customerSDK.updateChatProperties('ON0X0R0L67', properties)</code> will now look like this: <code>customerSDK.updateChatProperties({ chatId: 'ON0X0R0L67', properties })</code>. All methods and their respective parameters are described in the documentation.</p></li><li><p>All data structures have been adjusted: Previously properties like <code>chat</code> or <code>thread</code> could hold a primitive value (usually a string) because they actually contained IDs. This has been confusing and all such properties have been renamed to have an <code>Id</code> suffix now. For example: <code>chat</code> was renamed to <code>chatId</code>, and <code>thread</code> was renamed to <code>threadId</code>.</p></li><li><p><code>updateCustomer</code> method now returns a Promise. Additionally, customer data is not sent automatically in the <code>login</code> request. If you still need to send customer data during the <code>login</code> request, you will need to provide a <code>customerDataProvider</code> in the configuration passed in the <code>init</code> call. This provider will be called before sending any <code>login</code> request.</p></li><li><p><code>connected</code> event no longer contains any chat information. You should use <code>getChatsSummary</code> and <code>getChatHistory</code> appropriately to fetch it.</p></li><li><p><code>getChatHistory</code> now returns an array of threads instead of an array of events.</p></li><li><p><code>sendEvent</code> can no longer activate an existing chat. You should use the <code>activateChat</code> method for that purpose.</p></li><li><p><code>new_event</code> event has been renamed to <code>incoming_event</code>.</p></li><li><p><code>customer_updated</code> doesn't provide the whole Customer object anymore. You will only receive the data that has actually been changed.</p></li><li><p>Chat summary & incoming chat objects used to contain an array of user IDs. This has been changed to align with the API and you can now expect complete user objects in those objects.</p></li><li><p><code>getPredictedAgent</code> method requires a group argument now.</p></li><li><p><code>updateLastSeenTimestamp</code> method has been changed to <code>markEventsAsSeen</code>.</p></li><li><p><code>sendPostback</code> method has been changed to <code>sendRichMessagePostback</code>.</p></li></ul><h4 class="heading"><a id="removed-2" href="#removed-2" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#removed-2"><span class="icon icon-link"></span></a>Removed</a></h4><ul><li><p><code>reconnected</code> event got removed. You should just use a single <code>connected</code> handler for both initial connection and reconnets.</p></li><li><p><code>thread_summary</code> event got removed.</p></li><li><p><code>sendMessage</code> method has been removed. You can just use <code>sendEvent</code> to send any of the supported types of events.</p></li><li><p><code>user_is_typing</code> and <code>user_stopped_typing</code> events have been removed. You can use <code>incoming_typing_indicator</code> to receive those informations - it comes with a <code>isTyping</code> property.</p></li><li><p><code>user_joined_chat</code> and <code>user_left_chat</code> events have been renamed to <code>chat_user_added</code> and <code>chat_user_removed</code> respectively.</p></li><li><p><code>sendFile</code> method has been removed. You should use the new <code>uploadFile</code> method instead.</p></li><li><p>Events of type <code>"annotation"</code> don't exist anymore. They were only used for rating events and now those are automatically added to a chat upon rating in a form of system events.</p></li></ul><h4 class="heading"><a id="added-7" href="#added-7" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#added-7"><span class="icon icon-link"></span></a>Added</a></h4><ul><li><p><code>incoming_typing_indicator</code> event replaced <code>user_is_typing</code> and <code>user_stopped_typing</code> events.</p></li><li><p>optional <code>queue</code> property has been added on thread objects.</p></li><li><p><code>chat_user_added</code> and <code>chat_user_removed</code> events replaced <code>user_joined_chat</code> and <code>user_left_chat</code> events respectively.</p></li><li><p><code>getForm</code> and <code>sendTicketForm</code> have been added.</p></li><li><p><code>deleteChatProperties</code>, <code>deleteChatThreadProperties</code> and <code>deleteEventProperties</code> methods have been added with accompanying <code>chat_properties_deleted</code>, <code>chat_thread_properties_deleted</code> and <code>event_properties_deleted</code> events.</p></li><li><p><code>acceptGreeting</code> and <code>cancelGreeting</code> have been added with accompanying <code>incoming_greeting</code>, <code>greeting_accepted</code> and <code>greeting_canceled</code> events.</p></li><li><p><code>getCustomer</code> method has been added.</p></li><li><p><code>setCustomerSessionFields</code> method has been added.</p></li><li><p><code>cancelRate</code> method has been added.</p></li><li><p><code>getGroupsStatus</code> method has been added.</p></li><li><p><code>uploadFile</code> method has been added. It replaces <code>sendFile</code> and doesn't add an event of type <code>"file"</code> to a chat but rather returns a URL which you can then use to send a <code>"file"</code> event using the <code>sendEvent</code> method.</p></li><li><p><code>queue_position_updated</code> event has been added.</p></li><li><p><code>availability_changed</code> event has been added.</p></li><li><p><code>event_updated</code> event has been added.</p></li><li><p><code>access_set</code> event has been added.</p></li><li><p><code>chat_transferred</code> event has been added.</p></li><li><p><code>connection_recovered</code> and <code>connection_unstable</code> have been added.</p></li><li><p>All possible errors and disconnection reasons have been documented.</p></li><li><p>SDK automatically reconnects to the correct region, but it's advised to pass the correct region of your license explicitly to the <code>init</code> function. <code>dal</code> is the default.</p></li><li><p>Users of type <code>"agent"</code> got a <code>jobTitle</code> property.</p></li><li><p>Events of type <code>"file"</code> got a <code>name</code> property.</p></li><li><p>New types of rich message buttons have been added and some of them have additional properties. Buttons of type <code>"webview"</code> come with a <code>webviewHeight</code> and buttons of type <code>"url"</code> come with a <code>target</code>.</p></li><li><p><code>connected</code> event payload has a new <code>availability</code> property.</p></li><li><p>You can send custom system message events using <code>sendEvent</code>.</p></li></ul><h3 class="heading"><a id="v200-alpha0---2018-08-17" href="#v200-alpha0---2018-08-17" class="reference css-180507a"><a href="/docs/extending-chat-widget/customer-sdk#v200-alpha0---2018-08-17"><span class="icon icon-link"></span></a>[v2.0.0-alpha.0] - 2018-08-17</a></h3><p>Initial alpha release.</p><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://x.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 11 4 C 7.1456661 4 4 7.1456661 4 11 L 4 39 C 4 42.854334 7.1456661 46 11 46 L 39 46 C 42.854334 46 46 42.854334 46 39 L 46 11 C 46 7.1456661 42.854334 4 39 4 L 11 4 z M 11 6 L 39 6 C 41.773666 6 44 8.2263339 44 11 L 44 39 C 44 41.773666 41.773666 44 39 44 L 11 44 C 8.2263339 44 6 41.773666 6 39 L 6 11 C 6 8.2263339 8.2263339 6 11 6 z M 13.085938 13 L 22.308594 26.103516 L 13 37 L 15.5 37 L 23.4375 27.707031 L 29.976562 37 L 37.914062 37 L 27.789062 22.613281 L 36 13 L 33.5 13 L 26.660156 21.009766 L 21.023438 13 L 13.085938 13 z M 16.914062 15 L 19.978516 15 L 34.085938 35 L 31.021484 35 L 16.914062 15 z"></path></svg></i><div>X (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/customer-sdk","query":{},"buildId":"SzDcSB4SOV9RvDUdpbGME","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-50bee04d1dc61f8adf5b.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-06a3a99d73e91e62445b.js" async=""></script><script src="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" async=""></script><script src="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.de74f486eb1da22b5155.js" async=""></script><script src="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.37b3e3ef116317d8771b.js" async=""></script><script src="/docs/_next/static/chunks/pages/extending-chat-widget/customer-sdk-b0a318e763892498ec28.js" async=""></script><script src="/docs/_next/static/SzDcSB4SOV9RvDUdpbGME/_buildManifest.js" async=""></script><script src="/docs/_next/static/SzDcSB4SOV9RvDUdpbGME/_ssgManifest.js" async=""></script></body></html>