CINXE.COM

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Agent App SDK | Text Platform Docs & API Reference</title><link rel="canonical" href="https://platform.text.com/docs/extending-agent-app/products-sdk/agent-app-sdk"/><link rel="preconnect" href="https://LATDYRDX9J-dsn.algolia.net" crossorigin="true"/><meta name="description" content="Extend the interface of the Agent App, and introduce new functionalities. Use the Agent App SDK to build your own widgets."/><meta property="og:title" content="Agent App SDK"/><meta property="og:description" content="Extend the interface of the Agent App, and introduce new functionalities. Use the Agent App SDK to build your own widgets."/><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="Agent App SDK"/><meta name="twitter:description" content="Extend the interface of the Agent App, and introduce new functionalities. Use the Agent App SDK to build your own widgets."/><meta name="twitter:image" content="https://platform.text.com/docs/images/livechat-docs-og.png"/><script type="text/javascript"> window.__lc = window.__lc || {}; window.__lc.license = 1520; ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/staging/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice)) </script><meta name="next-head-count" content="17"/><link rel="preload" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" as="style"/><link rel="stylesheet" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/docs/_next/static/chunks/webpack-af19fbe32e13fc779465.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/_app-cdbe91fdfdbd305577ef.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.ac30430b2138b8fefed8.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.dede6f8249fbb82aff52.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/extending-agent-app/products-sdk/agent-app-sdk-ad3b689d6540fed589e7.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="bdpnbet4tppcaz2b6tmq-f-b4e908cb7-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":"e30af9e","ak.r":6099,"ak.a2":n,"ak.m":"b","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":36440,"ak.gh":"124.155.222.130","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732375769","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==C1mPQcrgu3TKZtpOuBMIryWrDgn/YKoeVpUqTCG1XGM9o1+JcZu2fjSWK+G7+NpklCz9OOgfRmog64/ZNwd6/O6epAaMIeQwUPBHZTtyJMBLcAtHpXbN2w4GN1+1kmIS5PTPRNo0jrsXW1Z1ZLzXjMuzKxXZjLYiVcLYjWD2T/5iKcyP+XQ62aOHmyBgqMBbTRrX+WSGFjsQdZAhcJjRwSwl71140Jz2OHmlDqV0qUMw4sTbBeVVOyzsU8Bgy6ZaNphZbMbRXaArHS7ISHTywBOnMl5ZWxsod7R2tNmBJiuThY7DkUagR8ugT6A8q/Vl6W0ZvY5jYEVFhkHB2lIC2MMbyi0zYK8wSOkXZX1Z5DN24DFnNygfp2ddh6XZ2DitdI1nhwc5lMbopmjAZy9+xjTDm2mNCFKU85tWqnl3AQw=","ak.pv":"55","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head><body><div id="__next"><style data-emotion-css="cvn8wj">.css-cvn8wj{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;background-color:#4a4a55;height:60px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;width:100%;z-index:99;}@media (min-width:768px){.css-cvn8wj{height:60px;}}</style><div class="css-cvn8wj"><style data-emotion-css="y9662z">.css-y9662z{background:#4a4a55;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}</style><div class="css-y9662z"><style data-emotion-css="qqcdow">.css-qqcdow{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:15px;margin:0 20px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;}.css-qqcdow > a > svg{margin:0;display:block;height:24px;}</style><nav class="css-qqcdow"><style data-emotion-css="c2yzgf">.css-c2yzgf{color:white;-webkit-text-decoration:none;text-decoration:none;font-weight:500;white-space:nowrap;margin-left:8px;}.css-c2yzgf:hover{-webkit-text-decoration:none;text-decoration:none;color:white;}</style><a href="https://text.com/" class="css-c2yzgf"><style data-emotion-css="ofqsza">.css-ofqsza{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.8em;height:40px;}.css-ofqsza .logo{margin:0;font-size:2em;font-weight:500;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-ofqsza .adjacent{margin:0;font-size:1.8em;font-weight:500;line-height:34px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-letter-spacing:-0.5px;-moz-letter-spacing:-0.5px;-ms-letter-spacing:-0.5px;letter-spacing:-0.5px;}.css-ofqsza .carrier{font-weight:500;-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:0.9s;animation-duration:0.9s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}</style><header class="css-ofqsza"><span class="logo">text<span class="carrier">|</span></span></header></a><a href="/docs" class="css-c2yzgf">Platform Docs</a></nav><style data-emotion-css="16b59id">.css-16b59id{margin:0;padding:0;max-width:calc(100% - 60px);width:calc(100% - 60px);overflow-x:auto;overflow-y:hidden;display:none;margin-right:10px;margin-left:40px;}@media (min-width:1024px){.css-16b59id{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:32px;}}</style><div class="css-16b59id"><style data-emotion-css="11hjr56">.css-11hjr56{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;position:relative;display:inline-block;height:100%;color:#ffffff;font-weight:400;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-11hjr56:hover{cursor:default;}</style><div class="css-11hjr56">Platform<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">APIs & SDKs<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">Resources<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div></div><style data-emotion-css="1hppjzv">.css-1hppjzv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1hppjzv"><style data-emotion-css="7wgbw1">.css-7wgbw1{display:none;}@media (min-width:1024px){.css-7wgbw1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:192px;margin-right:16px;}}</style><div class="DocSearch-Button-Desktop css-7wgbw1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><style data-emotion-css="1i8rrts">.css-1i8rrts{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;}@media (min-width:1024px){.css-1i8rrts{display:none;}}</style><div class="DocSearch-Button-Mobile css-1i8rrts"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><p>...</p><style data-emotion-css="pskeb7">@media (min-width:1024px){.css-pskeb7{display:none;}}</style><style data-emotion-css="19rp0xe">.css-19rp0xe{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:16px;cursor:pointer;}@media (min-width:1024px){.css-19rp0xe{display:none;}}@media (min-width:1024px){.css-19rp0xe{display:none;}}</style><svg width="32px" height="28px" fill="#ffffff" class="rmi rmi-menu css-19rp0xe" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"></path></svg></div></div></div><style data-emotion-css="ov1ktg">.css-ov1ktg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-ov1ktg"><style data-emotion-css="hpx2k5">.css-hpx2k5{border-right:1px solid #e2e2e4;height:50px;position:fixed;-webkit-transition:height 300ms;transition:height 300ms;display:block;bottom:0%;width:100%;opacity:1;z-index:10;box-shadow:0px 0px 8px rgba(0,0,0,0.25);background-color:white;}@media (min-width:768px){.css-hpx2k5{box-shadow:none;height:100vh;max-height:100vh;position:-webkit-sticky;position:sticky;top:60px;-webkit-transition:all 0s;transition:all 0s;width:260px;}}</style><aside class="css-hpx2k5"><style data-emotion-css="y8dejn">.css-y8dejn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;padding:10px 14px;cursor:pointer;}@media (min-width:768px){.css-y8dejn{display:none;}}</style><div class="css-y8dejn"><svg style="transform:rotate(270deg);transition:transform 300ms" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>Agent App 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>Products SDK</div></a><style data-emotion-css="5opgc4">.css-5opgc4{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(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:-webkit-transform 300ms;-webkit-transition:transform 300ms;transition:transform 300ms;cursor:pointer;}</style><div class="css-5opgc4"><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><a class="css-19nl305"><style data-emotion-css="1hg01uv">.css-1hg01uv{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 30px;margin-right:10px;font-weight:500;font-size:16px;border-radius:0px 8px 8px 0px;width:100%;}.css-1hg01uv:hover{background-color:#f6f6f7;}</style><div class="css-1hg01uv"><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><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"><style data-emotion-css="yqezgo">.css-yqezgo{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 30px;margin-right:10px;font-weight:600;font-size:16px;border-radius:0px 8px 8px 0px;width:100%;}.css-yqezgo:hover{background-color:#f6f6f7;}</style><div class="css-yqezgo"><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>Agent App SDK</div></a><a class="css-19nl305"><div class="css-1hg01uv"><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>HelpDesk SDK</div></a><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>Design System</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>Product Cards</div></a></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="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="agent-app-sdk" class="css-12qxxrf"><span>Agent App 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-agent-app/products-sdk/agent-app-sdk#introduction"><span class="icon icon-link"></span></a>Introduction</a></h2><p>Agent App Widgets are web applications loaded inside the <strong>LiveChat Agent App</strong> user interface. Read about their possible locations in the <a href="/docs/extending-agent-app#app-locations">App locations</a> guide. The Agent App SDK is currently the primary way to develop your own widgets and can be used in a <a href="/docs/extending-agent-app/agent-app-sdk#basic-use">basic</a> or <a href="/docs/extending-agent-app/agent-app-sdk#advanced-use">advanced</a> way.</p><h3 class="heading"><a id="use-cases" href="#use-cases" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#use-cases"><span class="icon icon-link"></span></a>Use cases</a></h3><p>Widgets are primary elements of the Agent App user interface. You can use them to:</p><ul><li>embed and display static content, for example, knowledge base articles, conversation prompts, or context information.</li><li>embed your SaaS service or web app as part of the agents' workspace.</li><li>query external services with visitor's email or LiveChat group ID (CRM, marketing automation, etc.).</li><li>create a store with <a href="/docs/monetization/billing-api">in-app purchases</a> to sell additional services or features of your app.</li><li>query LiveChat APIs to do basically anything with the visitor, agent, or chat.</li></ul><h3 class="heading"><a id="before-you-start" href="#before-you-start" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#before-you-start"><span class="icon icon-link"></span></a>Before you start</a></h3><p>From a technical point of view, widgets are regular web applications. For that reason, you need to have some knowledge of HTML, CSS, and JavaScript to build your own widget.</p><p>Bear in mind that widgets are front-end elements of the LiveChat Agent App. If your intention is to build a server-side app, we encourage you to check out the <a href="/docs/messaging">Messaging APIs</a>.</p><h2 class="heading css-1679d3t"><a id="getting-started" href="#getting-started" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#getting-started"><span class="icon icon-link"></span></a>Getting started</a></h2><p>Follow the intructions to create a basic LiveChat Widget. Before you start, make sure you <a target="_blank" href="https://accounts.livechat.com">have an account</a>.</p><ol><li>Go to the Apps section in <a href="https://platform.text.com/console/" target="_blank" rel="noopener noreferrer">Developer Console</a>.</li><li>Click <strong>Create new app +</strong> and give your app a name.</li><li>Decide which product you want to build your app for.</li><li>Go to <strong>Building blocks</strong> and add a new <strong>LiveChat Widgets</strong> block.<ul><li>Enter the <strong>Widget source URL</strong>, which is the address of your application. If it's not ready yet, you can use our <a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#sample-apps">sample apps</a> to play around.</li><li>Choose the <strong>widget placement</strong>. It allows you to decide where exactly in the LiveChat App you want to display your integration. Currently, the possible locations are: the Details section, Message Box, App Settings, Fullscreen Apps (main menu). <a href="/docs/extending-ui/extending-agent-app#app-locations">Read more</a> about app locations. </li></ul></li><li>Additionally, you can configure your app's short decription and add an icon for better visibility in the LiveChat App. You can do that in the <strong>Display details</strong> tab.</li><li>Go to the <strong>Private installation</strong> tab and install the app on your account.</li></ol><p>After the successful installation, you'll see the widget in your LiveChat App.</p><h3 class="heading"><a id="sample-apps" href="#sample-apps" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#sample-apps"><span class="icon icon-link"></span></a>Sample apps</a></h3><p>If you'd like to experiment with some of the already existing apps, make sure to check out the repository we've prepared. Once installed, these widgets will be displayed in the right sidebar of the Agent App.</p><ul><li><a href="https://github.com/livechat/tag-master">Tag Master</a>: allows user to create, view, and delete tags and canned responses in easy and predictable way.</li><li><a href="https://github.com/livechat/progress-app">Progress</a>: creates reports based on data from chats.</li><li><a href="https://github.com/livechat/supervisor-app">Supervisor</a>: helps to monitor the weekly progress of your agents, as well as their availability.</li></ul><h3 class="heading"><a id="installing-the-sdk" href="#installing-the-sdk" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#installing-the-sdk"><span class="icon icon-link"></span></a>Installing the SDK</a></h3><p>You can download the SDK directly from NPM as an ES6 or CommonJS module.</p><p>Install the SDK from NPM...</p><style data-emotion-css="17buymi">.css-17buymi{width:100%;}@media (min-width:768px){.css-17buymi{padding:25px 25px 30px 0px;}}</style><div class="css-17buymi"><style data-emotion-css="16prjg8">.css-16prjg8{border:1px solid #e8e8e8;border-radius:6px;background-color:#505671;color:white;margin:0 0 20px;max-width:100%;--code-color:#f5fbff;--code-background:#505671;--code-string-color:#56d4bc;}</style><div class="css-16prjg8"><style data-emotion-css="13hnul0">.css-13hnul0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:5px 15px;background-color:#383f54;border-radius:8px 8px 0 0;color:#dee5e8;}.css-13hnul0 code{font-size:12px;max-width:100%;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;word-break:break-all;}.css-13hnul0 .code-sample-header{border:none;background-color:#383f54;color:#dee5e8;padding:0.2em 0;}</style><div class="css-13hnul0"><code class="code-sample-header">INSTALL THE SDK FORM NPM</code><style data-emotion-css="1sg2lsz">.css-1sg2lsz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1sg2lsz"><style data-emotion-css="1wp1vo7">.css-1wp1vo7{position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:45px;}</style><div class="css-1wp1vo7"><style data-emotion-css="xnt8k0">.css-xnt8k0{position:relative;min-height:18px;}</style><div class="css-xnt8k0"><style data-emotion-css="6oazep">.css-6oazep{position:absolute;top:0;left:0;right:0;text-align:right;text-transform:capitalize;line-height:20px;font-size:13px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;opacity:0;-webkit-transition-delay:0.25s;transition-delay:0.25s;-webkit-transition:none;transition:none;}</style><div class="css-6oazep"><style data-emotion-css="11ycufd">.css-11ycufd{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;max-width:100%;overflow-x:auto;}</style><div class="css-11ycufd">Copied!</div></div><style data-emotion-css="139ndot">.css-139ndot{position:absolute;top:0;right:0;text-align:right;max-width:24px;opacity:1;-webkit-transition-delay:0.25;transition-delay:0.25;-webkit-transition:opacity 0.25s ease-in-out;transition:opacity 0.25s ease-in-out;}.css-139ndot:hover{cursor:pointer;}</style><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><style data-emotion-css="ju12u0">.css-ju12u0{min-height:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;overflow:scroll;}.css-ju12u0 code{display:inline-block;}</style><div class="css-ju12u0"><div class="remark-highlight"><pre><code>npm install @livechat/agent-app-sdk </code></pre></div></div></div></div><p>...then import the ES6 module...</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">IMPORT THE ES6 MODULE</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">LiveChat</span></span> <span class="token keyword module">from</span> <span class="token string">"@livechat/agent-app-sdk"</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><p>...or require the CommonJS.</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">REQUIRE THE COMMONJS</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token maybe-class-name">LiveChat</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@livechat/agent-app-sdk"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><p>You can also use the UMD build of the SDK directly in the browser.</p><p>You can also use the UMD build:</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">USE UMD BUILD</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/@livechat/agent-app-sdk@1.6.3/dist/agentapp.umd.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token maybe-class-name">LiveChat</span><span class="token punctuation">.</span><span class="token method function property-access">createDetailsWidget</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 keyword">function</span><span class="token punctuation">(</span><span class="token parameter">widget</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// do something with widget</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre></div></div></div></div><h2 class="heading css-1679d3t"><a id="basic-use" href="#basic-use" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#basic-use"><span class="icon icon-link"></span></a>Basic use</a></h2><p>The specific usage of the Agent App SDK depends on the type of widget you want to create. The currently available widget types are the following:</p><ul><li><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#details-widgets">Details widget</a></li><li><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#messagebox">MessageBox</a></li><li><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#fullscreen-widgets">Fullscreen widget</a></li></ul><p>All widgets created with the Agent App SDK share a common interface, which lets you listen for the events happening in the Agent App.</p><p>Supposing that <code>widget</code> is a widget instance:</p><div class="css-16prjg8"><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">handleEvent</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// perform logic when event happens,</span> <span class="token comment">// you can also use the data attached to the event</span> <span class="token punctuation">}</span> <span class="token comment">// Subscribe to event</span> widget<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">"event"</span><span class="token punctuation">,</span> handleEvent<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Unsubscribe from event</span> widget<span class="token punctuation">.</span><span class="token method function property-access">off</span><span class="token punctuation">(</span><span class="token string">"event"</span><span class="token punctuation">,</span> handleEvent<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><p>Each widget type offers a different set of events that you can listen for.</p><h3 class="heading"><a id="details-widgets" href="#details-widgets" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#details-widgets"><span class="icon icon-link"></span></a>Details widgets</a></h3><p>If you want to use your app in the Details section, you should use the <code>createDetailsWidget</code> function. It returns a promise resolving to a details widget instance.</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">DETAILS WIDGETS</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createDetailsWidget <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"@livechat/agent-app-sdk"</span><span class="token punctuation">;</span> <span class="token function">createDetailsWidget</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">widget</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// build your logic around the widget</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h4 class="heading"><a id="events" href="#events" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#events"><span class="icon icon-link"></span></a>Events</a></h4><h5 class="heading"><a id="customer_profile" href="#customer_profile" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#customer_profile"><span class="icon icon-link"></span></a><code>customer_profile</code></a></h5><p>Emitted when an agent opens a conversation within Chats or Archives, or when an agents selects the customer profile in the Customers sections. The handler will get the customer profile object as an argument.</p><p>Listen for the customer profile changes:</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">CUSTOMER_PROFILE</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">"customer_profile"</span><span class="token punctuation">,</span> <span class="token parameter">profile</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// read the new profile</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><p>The customer profile object will have the following shape:</p><style data-emotion-css="q76ucn">.css-q76ucn{width:100%;overflow-x:auto;}</style><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Description</th></tr></thead><tbody><tr><td><code>id</code></td><td>Unique ID of a visitor</td></tr><tr><td><code>name</code></td><td>Visitor name (if provided)</td></tr><tr><td><code>email</code></td><td>Visitor email (if provided)</td></tr><tr><td><code>chat</code></td><td>Object with three properties: <code>chat_id</code> (unique chat id), <code>groupID</code> (unique group id), and <code>id</code> (unique thread id); this object may be empty when a visitor is not currently chatting</td></tr><tr><td><code>source</code></td><td>String representing the source of an event; possible values: <code>chats</code>, <code>customers</code>, <code>archives</code></td></tr><tr><td><code>geolocation</code></td><td>Object containing detailed information about customer's geolocation</td></tr><tr><td><code>customVariables</code></td><td>Object containing <a href="https://www.livechat.com/help/custom-variables-configuration/">custom variables</a> for given customer/chat (if provided)</td></tr></tbody></table></div><h5 class="heading"><a id="customer_details_section_button_click" href="#customer_details_section_button_click" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#customer_details_section_button_click"><span class="icon icon-link"></span></a><code>customer_details_section_button_click</code></a></h5><p>Emitted when you click a button located in a section in Customer Details. The handler gets the following payload:</p><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Description</th></tr></thead><tbody><tr><td><code>buttonId</code></td><td>The <code>id</code> of the button taken from the section definition</td></tr></tbody></table></div><p>React to button clicks within Customer Details widgets</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">CUSTOMER_DETAILS_SECTION_BUTTON_CLICK</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">"customer_details_section_button_click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> buttonId <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 comment">// perform an action when the button is clicked</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h4 class="heading"><a id="methods" href="#methods" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#methods"><span class="icon icon-link"></span></a>Methods</a></h4><h5 class="heading"><a id="get-the-customer-profile" href="#get-the-customer-profile" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#get-the-customer-profile"><span class="icon icon-link"></span></a>Get the customer profile</a></h5><p>If you want to access the current customer profile, you should use the <code>getCustomerProfile</code> method.</p><p>Get the current customer profile</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">GET THE CURRENT CUSTOMER PROFILE</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> profile <span class="token operator">=</span> widget<span class="token punctuation">.</span><span class="token method function property-access">getCustomerProfile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><p>The returned profile will be an object identical to the one emitted by the <code>customer_profile</code> event. It can also be <code>null</code> if no profile was recorded.</p><h5 class="heading"><a id="append-text-to-the-message-box" href="#append-text-to-the-message-box" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#append-text-to-the-message-box"><span class="icon icon-link"></span></a>Append text to the message box</a></h5><p>You can add any text to the current chat message box by using the <code>putMessage</code> method. The method returns a promise.</p><p>Append text to the message box</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">APPEND TEXT TO THE MESSAGE BOX</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">putMessage</span><span class="token punctuation">(</span><span class="token string">"this text will be appended"</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 comment">// the text should be appended now</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h5 class="heading"><a id="modify-customer-details-widgets-state" href="#modify-customer-details-widgets-state" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#modify-customer-details-widgets-state"><span class="icon icon-link"></span></a>Modify Customer Details widget's state</a></h5><p>If you configured a <a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#creating-a-customer-details-widget">Customer Details widget</a>, you can modify its section state using the <code>modifySection</code> method. The method accepts the section state definition as its only parameter, and returns a promise.</p><p>You can look up the <a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#component-types">component types</a> to see how to create the state definition.</p><p>The <code>title</code> of a given section has to match the one specified in the initial state. Otherwise, the section won't change. Also, the Agent App ignores the commands without valid section definitions. Make sure that the definition you're sending is correct.</p><p>Modify the Customer Details widget's state</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">MODIFY CUSTOMER DETAILS WIDGET STATE</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget <span class="token punctuation">.</span><span class="token method function property-access">modifySection</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"My widget"</span><span class="token punctuation">,</span> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"title"</span><span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"The title will be modified"</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 comment">// the widget should be modified now</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h3 class="heading"><a id="messagebox" href="#messagebox" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#messagebox"><span class="icon icon-link"></span></a>MessageBox</a></h3><p>The <code>createMessageBoxWidget</code> function creates a widget instance to be used in MessageBox.</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">MESSAGEBOX</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createMessageBoxWidget <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> ‘@livechat<span class="token operator">/</span>agent<span class="token operator">-</span>app<span class="token operator">-</span>sdk’<span class="token punctuation">;</span> <span class="token function">createMessageBoxWidget</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">widget</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// do something with the widget</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h4 class="heading"><a id="methods-1" href="#methods-1" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#methods-1"><span class="icon icon-link"></span></a>Methods</a></h4><h5 class="heading"><a id="set-a-message-to-be-stored-by-messagebox" href="#set-a-message-to-be-stored-by-messagebox" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#set-a-message-to-be-stored-by-messagebox"><span class="icon icon-link"></span></a>Set a message to be stored by MessageBox</a></h5><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SET A MESSAGE TO BE STORED BY MESSAGEBOX</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre><code>putMessage(msg: IRichMessage ): Promise<void> </code></pre></div></div></div></div><p>Calling this method does not automatically send the message right away. The message is sent once an agent clicks the <em>Send</em> button. The message accepts the rich message type, which must implement the <code>IRichMessage</code> interface.</p><p>Set a message to be stored by MessageBox</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SET A MESSAGE TO BE STORED BY MESSAGEBOX</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> richMessage <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">template_id</span><span class="token operator">:</span> <span class="token string">"cards"</span><span class="token punctuation">,</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"My cat photo"</span><span class="token punctuation">,</span> <span class="token literal-property property">image</span><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://example.org/imgs/john-the-cat.jpg"</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> widget<span class="token punctuation">.</span><span class="token method function property-access">putMessage</span><span class="token punctuation">(</span>richMessage<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h5 class="heading"><a id="rich-message-object-format" href="#rich-message-object-format" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#rich-message-object-format"><span class="icon icon-link"></span></a>Rich Message object format</a></h5><ul><li><code>custom_id</code>, <code>properties</code> and <code>elements</code> are optional</li><li><code>elements</code> may contain 1-10 element objects</li><li>all <code>elements</code> properties are optional: <code>title</code>, <code>subtitle</code>, <code>image</code>, and <code>buttons</code></li><li>property <code>url</code> on <code>image</code> is required</li><li>optional <code>image</code> properties: <code>name</code>, <code>content_type</code>, <code>size</code>, <code>width</code>, and <code>height</code></li><li><code>buttons</code> may contain 1-11 button objects (1-13 if using API version 3.3 and above)</li><li><code>template_id</code> describes how the event should be presented in an app</li><li><code>elements.buttons.postback_id</code> describes the action sent via the <code>send_rich_message_postback</code> method</li><li>multiple buttons (even from different elements) can contain the same <code>postback_id</code>; calling <code>send_rich_message_postback</code> with this id will add a user to all these buttons at once.</li><li><code>elements.buttons.user_ids</code> describes users who sent the postback with <code>"toggled": true</code></li></ul><style data-emotion-css="9mlxei">.css-9mlxei{font-weight:600;cursor:pointer;}.css-9mlxei:after{content:"";width:16px;height:16px;display:inline-block;vertical-align:middle;margin-bottom:1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z' fill='%232200ff'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");}</style><a class="css-9mlxei">Read more about Rich Messages</a><h3 class="heading"><a id="fullscreen-widgets" href="#fullscreen-widgets" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#fullscreen-widgets"><span class="icon icon-link"></span></a>Fullscreen widgets</a></h3><p>If you want to connect a Fullscreen widget to the LiveChat Agent App, you should use the <code>createFullscreenWidget</code> function. It returns a promise resolving to a Fullscreen widget instance.</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">FULLSCREEN WIDGETS</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createFullscreenWidget <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"@livechat/agent-app-sdk"</span><span class="token punctuation">;</span> <span class="token function">createFullscreenWidget</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">widget</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// build your logic around the widget</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h4 class="heading"><a id="events-1" href="#events-1" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#events-1"><span class="icon icon-link"></span></a>Events</a></h4><h5 class="heading"><a id="page_data" href="#page_data" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#page_data"><span class="icon icon-link"></span></a><code>page_data</code></a></h5><p>Emitted when the widget is initialized. The handler will get the main window page data object as an argument.</p><p>Listen for the page data changes:</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">PAGE_DATA</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">"page_data"</span><span class="token punctuation">,</span> <span class="token parameter">pageData</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// read the page data</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h4 class="heading"><a id="methods-2" href="#methods-2" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#methods-2"><span class="icon icon-link"></span></a>Methods</a></h4><ul><li><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#set-notification-badge">Set notification badge</a></li><li><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#navigate-to-pathname">Navigate to pathname</a></li><li><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#set-reports-filters">Set Reports filters</a></li><li><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#get-page-data">Get page data</a></li></ul><h5 class="heading"><a id="set-notification-badge" href="#set-notification-badge" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#set-notification-badge"><span class="icon icon-link"></span></a>Set notification badge</a></h5><p>If you want to notify Agents there’s something important inside the widget, use the <code>setNotificationBadge</code> method.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SET NOTIFICATION BADGE</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">setNotificationBadge</span><span class="token punctuation">(</span><span class="token number">26</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><p>It displays a notification badge on top of your app’s icon:</p><p style="max-width:70px"><style data-emotion-css="v3memn">.css-v3memn{display:block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin-top:0;margin-left:0;margin-right:0;margin-bottom:10px;}</style><div class="css-v3memn"><style data-emotion-css="1ddnemu">.css-1ddnemu{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(190 / 70 * 100%);}</style><div class="css-1ddnemu"><style data-emotion-css="5r33xa">.css-5r33xa{position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;}</style><img alt="Fullscreen widget badge" src="/docs/images/extending-agent-app/fullscreen-widget-badge.png" decoding="async" class="css-5r33xa"/></div></div></p><p>If you want to remove the badge, invoke the method with the <code>null</code> parameter.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">REMOVE NOTIFICATION BADGE</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">setNotificationBadge</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><p>Make sure Agents can dismiss the notification to avoid cluttered UI.</p><h5 class="heading"><a id="navigate-to-pathname" href="#navigate-to-pathname" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#navigate-to-pathname"><span class="icon icon-link"></span></a>Navigate to pathname</a></h5><p>Navigates LiveChat App to a given pathname.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">NAVIGATE TO PATHNAME</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">navigate</span><span class="token punctuation">(</span><span class="token string">'/archives/?rate=rated_good'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h5 class="heading"><a id="set-reports-filters" href="#set-reports-filters" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#set-reports-filters"><span class="icon icon-link"></span></a>Set Reports filters</a></h5><p>Updates "Reports" section filters to a given <code>filters</code> object.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SET REPORTS FILTERS</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">setReportsFilters</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">tag</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'chatbot'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h5 class="heading"><a id="get-page-data" href="#get-page-data" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#get-page-data"><span class="icon icon-link"></span></a>Get page data</a></h5><p>Gets the most recently recorded main window page data and returns the <code>IPageData</code> object (identical to the one emitted by the <code>page_data</code> event). If no data was recorded, it returns <code>null</code>.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">GET PAGE DATA</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">getPageData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h3 class="heading"><a id="settings-widgets" href="#settings-widgets" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#settings-widgets"><span class="icon icon-link"></span></a>Settings widgets</a></h3><p>If you want to connect a Settings widget to the LiveChat App, you should use the <code>createSettingsWidget</code> function. It returns a promise resolving to a Settings widget instance.</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SETTINGS WIDGETS</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createSettingsWidget <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"@livechat/agent-app-sdk"</span><span class="token punctuation">;</span> <span class="token function">createSettingsWidget</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">widget</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// build your logic around the widget</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h4 class="heading"><a id="events-2" href="#events-2" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#events-2"><span class="icon icon-link"></span></a>Events</a></h4><h5 class="heading"><a id="page_data-1" href="#page_data-1" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#page_data-1"><span class="icon icon-link"></span></a><code>page_data</code></a></h5><p>Emitted when the widget is initialized. The handler will get the main window page data object as an argument.</p><p>Listen for the page data changes:</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">PAGE_DATA</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">"page_data"</span><span class="token punctuation">,</span> <span class="token parameter">pageData</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// read the page data</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h4 class="heading"><a id="methods-3" href="#methods-3" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#methods-3"><span class="icon icon-link"></span></a>Methods</a></h4><h5 class="heading"><a id="get-page-data-1" href="#get-page-data-1" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#get-page-data-1"><span class="icon icon-link"></span></a>Get page data</a></h5><p>Gets the most recently recorded main window page data and returns the <code>IPageData</code> object (identical to the one emitted by the <code>page_data</code> event). If no data was recorded, it returns <code>null</code>.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">GET PAGE DATA</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js">widget<span class="token punctuation">.</span><span class="token method function property-access">getPageData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h5 class="heading"><a id="redirect" href="#redirect" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#redirect"><span class="icon icon-link"></span></a>Redirect</a></h5><p>Redirects using the main window. Calling this method will send <code>postMessage</code> to the LiveChat App, which will be handled there. After that, a redirect using a window object is performed.</p><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">REDIRECT</code><div class="css-1sg2lsz"><div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> target <span class="token operator">=</span> <span class="token string">'https://example.com'</span><span class="token punctuation">;</span> widget<span class="token punctuation">.</span><span class="token method function property-access">redirect</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><h2 class="heading css-1679d3t"><a id="advanced-use" href="#advanced-use" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#advanced-use"><span class="icon icon-link"></span></a>Advanced use</a></h2><h3 class="heading"><a id="developing-your-own-widget" href="#developing-your-own-widget" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#developing-your-own-widget"><span class="icon icon-link"></span></a>Developing your own widget</a></h3><p>If you're building your own widget and you need to interact with the Agent App, be sure to use the <a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#top">Agent App SDK</a>.</p><h3 class="heading"><a id="accessing-livechat-data" href="#accessing-livechat-data" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#accessing-livechat-data"><span class="icon icon-link"></span></a>Accessing LiveChat data</a></h3><p>You can leverage the OAuth 2.1 authorization flow to use all of LiveChat APIs. Head to <a href="/docs/getting-started/authorization/sign-in-with-livechat">Sign in with LiveChat</a> docs for more information.</p><h3 class="heading"><a id="layout-and-styling" href="#layout-and-styling" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#layout-and-styling"><span class="icon icon-link"></span></a>Layout and Styling</a></h3><p>If you're using React, you can use the <a href="/docs/extending-ui/extending-agent-app/design-system">LiveChat Design System</a>, which is a component library used directly in the LiveChat user interface.</p><h3 class="heading"><a id="hosting-the-widget" href="#hosting-the-widget" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#hosting-the-widget"><span class="icon icon-link"></span></a>Hosting the widget</a></h3><p>You can host your widget locally or on a dedicated server. The hosted content has to be served over the <strong>HTTPS Protocol</strong>.</p><p>During development, you can use a self-signed certificate for <code>localhost</code> or upload your widget to an SSL-enabled host. You can also leverage bundlers like <a href="https://webpack.js.org/configuration/dev-server/">Webpack</a> to use an https-enabled development server.</p><p>If you need a quick way to <strong>deploy</strong> your widget, you can use <a href="https://platform.text.com/blog/widget-hosting-on-netlify/">Netlify Drop</a>.</p><h3 class="heading"><a id="creating-a-customer-details-widget" href="#creating-a-customer-details-widget" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#creating-a-customer-details-widget"><span class="icon icon-link"></span></a>Creating a Customer Details widget</a></h3><p>When developing an app in the <strong>Details</strong> section, you can add some content to the <strong>Customer Details</strong> view and display it as a widget. This way you turn it into a <strong>Customer Details widget</strong>.</p><p>Let's define the terms we use in this document:</p><ul><li><strong>Section</strong> - an element of <strong>Customer Details</strong>. It contains a complete set of information grouped under a single widget.</li><li><strong>Component</strong> - a single line in a section. It can have one of the pre-defined formats and be filled with data from the app.</li></ul><h4 class="heading"><a id="how-to-add-a-widget" href="#how-to-add-a-widget" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#how-to-add-a-widget"><span class="icon icon-link"></span></a>How to add a widget</a></h4><p>To display a widget, first, you need to declare the initial state of a section. Go to <strong>Apps</strong> in <a href="https://platform.text.com/console/apps">Developer Console</a> and create a new <strong>Details</strong> widget or update an exisiting one. The initial state of a section can be added using the <code>Initial state</code> input.</p><p>Example of the initial state JSON:</p><style data-emotion-css="1vuwrgc">.css-1vuwrgc{border:1px solid #e8e8e8;border-radius:6px;background-color:#f1f6f8;min-height:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:0 0 20px;max-width:100%;}.css-1vuwrgc .remark-highlight{min-height:0;}.css-1vuwrgc pre{min-height:0;}</style><div class="css-1vuwrgc"><style data-emotion-css="iwgofq">.css-iwgofq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:5px 15px;height:42px;background-color:#dee5e8;border-radius:5px 5px 0 0;font-size:13px;text-transform:uppercase;-webkit-letter-spacing:0.04em;-moz-letter-spacing:0.04em;-ms-letter-spacing:0.04em;letter-spacing:0.04em;}</style><div class="css-iwgofq"><style data-emotion-css="w6gvpm">.css-w6gvpm{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><span class="css-w6gvpm">Response</span> <div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"customerDetailsSections"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Example section"</span><span class="token punctuation">,</span> <span class="token property">"components"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"button"</span><span class="token punctuation">,</span> <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"Example button"</span><span class="token punctuation">,</span> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"example-button"</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> </code></pre></div></div></div><p>You can define as many sections as you want. Once your widget is running within the Agent App, you can't add nor remove any sections. However, you can still modify the components within any section.</p><p>Also, the <code>title</code> attribute in the section initial state acts as a section ID. You <strong>should not</strong> modify it.</p><h4 class="heading"><a id="how-to-update-a-section" href="#how-to-update-a-section" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#how-to-update-a-section"><span class="icon icon-link"></span></a>How to update a section</a></h4><p>You can control your widget and change its components using the Agent App SDK. Please refer to the <a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#modify-customer-details-widgets-state">Modify the Customer Details widget</a>.</p><h4 class="heading"><a id="component-types" href="#component-types" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#component-types"><span class="icon icon-link"></span></a>Component types</a></h4><p>Here's the list of all the components you can use to build the Customer Details app.</p><h5 class="heading"><a id="section" href="#section" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#section"><span class="icon icon-link"></span></a>Section</a></h5><p>Section is a container for components.</p><p>Example of a section component</p><div class="css-1vuwrgc"><div class="css-iwgofq"><span class="css-w6gvpm">Response</span> <div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"card with image"</span><span class="token punctuation">,</span> <span class="token property">"components"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token property">"imgUrl"</span><span class="token operator">:</span> <span class="token string">"https://www.gstatic.com/webp/gallery/4.jpg"</span><span class="token punctuation">,</span> <span class="token property">"openApp"</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> </code></pre></div></div></div><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Required</th><th>Type</th></tr></thead><tbody><tr><td><code>title</code></td><td>Yes</td><td>string</td></tr><tr><td><code>components</code></td><td>Yes</td><td>array of components</td></tr><tr><td><code>imgUrl</code></td><td>No</td><td>string</td></tr><tr><td><code>openApp</code></td><td>No</td><td>boolean</td></tr></tbody></table></div><h5 class="heading"><a id="title" href="#title" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#title"><span class="icon icon-link"></span></a>Title</a></h5><p>Title could be used in several cases. Component look depends on the given data.</p><p>Example of a title component</p><div class="css-1vuwrgc"><div class="css-iwgofq"><span class="css-w6gvpm">Response</span> <div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"title"</span><span class="token punctuation">,</span> <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"title"</span><span class="token punctuation">,</span> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"value"</span><span class="token punctuation">,</span> <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"description"</span><span class="token punctuation">,</span> <span class="token property">"imgUrl"</span><span class="token operator">:</span> <span class="token string">"https://www.gstatic.com/webp/gallery/4.jpg"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div></div></div><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Required</th><th>Type</th><th>Note</th></tr></thead><tbody><tr><td><code>title</code></td><td>Yes</td><td>string</td><td></td></tr><tr><td><code>value</code></td><td>No</td><td>string</td><td></td></tr><tr><td><code>description</code></td><td>No</td><td>string</td><td></td></tr><tr><td><code>imgUrl</code></td><td>No</td><td>string</td><td></td></tr><tr><td><code>imgSize</code></td><td>No</td><td>Value: "small" or "big" (default)</td><td></td></tr><tr><td><code>link</code></td><td>No</td><td>string</td><td>URL added when the title is a link</td></tr><tr><td><code>id</code></td><td>No</td><td>string</td><td>ID passed to the widget on click</td></tr><tr><td><code>clickable</code></td><td>No</td><td>boolean</td><td>Adds a border and makes it clickable</td></tr><tr><td><code>openApp</code></td><td>No</td><td>boolean</td><td>Opens widget on click</td></tr></tbody></table></div><h5 class="heading"><a id="button" href="#button" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#button"><span class="icon icon-link"></span></a>Button</a></h5><p>Simple button component</p><p>Example of a button component</p><div class="css-1vuwrgc"><div class="css-iwgofq"><span class="css-w6gvpm">Response</span> <div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"button"</span><span class="token punctuation">,</span> <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"second-button"</span><span class="token punctuation">,</span> <span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"second button"</span><span class="token punctuation">,</span> <span class="token property">"openApp"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"primary"</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div></div></div><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Required</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>id</code></td><td>Yes</td><td>string</td><td></td></tr><tr><td><code>label</code></td><td>Yes</td><td>string</td><td></td></tr><tr><td><code>openApp</code></td><td>No</td><td>boolean</td><td>Default value: <code>false</code></td></tr><tr><td><code>primary</code></td><td>No</td><td>boolean</td><td>Default value: <code>false</code></td></tr><tr><td><code>secondary</code></td><td>No</td><td>boolean</td><td>Default value: <code>false</code></td></tr></tbody></table></div><h6 class="heading"><a id="click-events" href="#click-events" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#click-events"><span class="icon icon-link"></span></a>Click events</a></h6><p>You can listen for button clicks using the SDK. Note that <code>buttonId</code> will be the same as the <code>id</code> from the schema. If you want to capture a specific click, you need to make sure that the <code>id</code> is unique across all definitions.</p><h5 class="heading"><a id="label-with-value" href="#label-with-value" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#label-with-value"><span class="icon icon-link"></span></a>Label with value</a></h5><p>Example of label with value component</p><div class="css-1vuwrgc"><div class="css-iwgofq"><span class="css-w6gvpm">Response</span> <div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"label_value"</span><span class="token punctuation">,</span> <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"Name"</span><span class="token punctuation">,</span> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"Stefan"</span><span class="token punctuation">,</span> <span class="token property">"iconUrl"</span><span class="token operator">:</span> <span class="token string">"https://www.gstatic.com/webp/gallery/4.jpg"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div></div></div><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Required</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>label</code></td><td>No</td><td>string</td><td></td></tr><tr><td><code>value</code></td><td>No</td><td>string</td><td></td></tr><tr><td><code>iconUrl</code></td><td>No</td><td>string</td><td></td></tr><tr><td><code>url</code></td><td>No</td><td>string</td><td></td></tr></tbody></table></div><h5 class="heading"><a id="link" href="#link" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#link"><span class="icon icon-link"></span></a>Link</a></h5><p>Example of a link component</p><div class="css-1vuwrgc"><div class="css-iwgofq"><span class="css-w6gvpm">Response</span> <div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"link"</span><span class="token punctuation">,</span> <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"click me"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://google.com"</span><span class="token punctuation">,</span> <span class="token property">"inline"</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div></div></div><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Required</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>url</code></td><td>Yes</td><td>string</td><td></td></tr><tr><td><code>value</code></td><td>No</td><td>string</td><td></td></tr><tr><td><code>inline</code></td><td>No</td><td>boolean</td><td>default: <code>true</code></td></tr></tbody></table></div><h5 class="heading"><a id="line" href="#line" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#line"><span class="icon icon-link"></span></a>Line</a></h5><p>Line could be used to separate section content. It has no components inside.</p><p>Example of a line component</p><div class="css-1vuwrgc"><div class="css-iwgofq"><span class="css-w6gvpm">Response</span> <div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"line"</span> <span class="token punctuation">}</span> </code></pre></div></div></div><h5 class="heading"><a id="customer" href="#customer" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#customer"><span class="icon icon-link"></span></a>Customer</a></h5><p>Renders a line with a customer's avatar, name, and email.</p><div class="css-1vuwrgc"><div class="css-iwgofq"><span class="css-w6gvpm">SAMPLE CUSTOMER COMPONENT</span> <div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"customer"</span> <span class="token punctuation">}</span> </code></pre></div></div></div><h5 class="heading"><a id="tags" href="#tags" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#tags"><span class="icon icon-link"></span></a>Tags</a></h5><p>Renders a list of tags with an optional label.</p><div class="css-1vuwrgc"><div class="css-iwgofq"><span class="css-w6gvpm">SAMPLE TAG COMPONENT</span> <div class="css-1wp1vo7"><div class="css-xnt8k0"><div class="css-6oazep"><div class="css-11ycufd">Copied!</div></div><div class="css-139ndot"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" fill="currentColor"></path></svg></div></div></div></div><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"tags"</span><span class="token punctuation">,</span> <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"tags"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"new"</span><span class="token punctuation">,</span> <span class="token string">"important"</span><span class="token punctuation">,</span> <span class="token string">"private"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"Tags:"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div></div></div><div class="css-q76ucn"><table><thead><tr><th>Property</th><th>Required</th><th>Type</th></tr></thead><tbody><tr><td><code>tags</code></td><td>Yes</td><td>array of strings</td></tr><tr><td><code>label</code></td><td>No</td><td>string</td></tr></tbody></table></div><h2 class="heading css-1679d3t"><a id="troubleshooting" href="#troubleshooting" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#troubleshooting"><span class="icon icon-link"></span></a>Troubleshooting</a></h2><h3 class="heading"><a id="there-are-errors-in-the-console" href="#there-are-errors-in-the-console" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#there-are-errors-in-the-console"><span class="icon icon-link"></span></a>There are errors in the console</a></h3><p>Check out your browser's console to see if there are any of the errors listed below.</p><div class="css-q76ucn"><table><thead><tr><th>Error</th><th>Explanation</th></tr></thead><tbody><tr><td><em>Mixed Content: The page at '<a href="https://my.livechatinc.com/'">https://my.livechatinc.com/'</a> was loaded over HTTPS, but requested an insecure resource '...'. This request has been blocked; the content must be served over HTTPS.</em></td><td>For security reasons the Agent App is served over HTTPS and so must be the extension. Learn more on why we need SSL-enabled address in MDN article about <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content">mixed content</a>.</td></tr><tr><td><em>Refused to display '...' in a frame because an ancestor violates the following Content Security Policy directive: "...".</em></td><td>The host that serves the plugin has specific <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> set up.</td></tr><tr><td><em>Refused to display '...' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.</em></td><td>The host serving the content of the plugin has specific <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options">X-Frame-Options</a> header set up.</td></tr></tbody></table></div><h2 class="heading css-1679d3t"><a id="contact-us" href="#contact-us" class="reference css-180507a"><a href="/docs/extending-agent-app/products-sdk/agent-app-sdk#contact-us"><span class="icon icon-link"></span></a>Contact us</a></h2><p>If you have any feature requests related to the App Widgets, let us know! We're open to your insights and suggestions. Feel free to drop us an email at <a href="mailto:developers@text.com">developers@text.com</a> or <a target="_blank" href="https://discord.com/invite/NcfJu3a9kM">join our community on Discord</a> and ask us your questions there.</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://twitter.com/TextPlatform" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="24" height="24" class="rmi rmi-twitter undefined" viewBox="0 0 24 24"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path></svg></i><div>Twitter</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contribute</div><div class="css-1ws0nkq">See something that's wrong or unclear? Submit a pull request.</div><a href="https://github.com/livechat/livechat-public-docs" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="24" height="24" class="rmi rmi-github undefined" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"></path></svg></i><div>GitHub</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contact us</div><div class="css-1ws0nkq">Want to share feedback? Reach us at: <a href="mailto:developers@text.com">developers@text.com</a></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/extending-agent-app/products-sdk/agent-app-sdk","query":{},"buildId":"mT926s0W5VyhfFaApGsyO","assetPrefix":"/docs","runtimeConfig":{},"nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/docs/_next/static/chunks/polyfills-c2dc1d9251306528e50c.js"></script><script src="/docs/_next/static/chunks/webpack-af19fbe32e13fc779465.js" async=""></script><script src="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" async=""></script><script src="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" async=""></script><script src="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" async=""></script><script src="/docs/_next/static/chunks/pages/_app-cdbe91fdfdbd305577ef.js" async=""></script><script src="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" async=""></script><script src="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.ac30430b2138b8fefed8.js" async=""></script><script src="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.dede6f8249fbb82aff52.js" async=""></script><script src="/docs/_next/static/chunks/pages/extending-agent-app/products-sdk/agent-app-sdk-ad3b689d6540fed589e7.js" async=""></script><script src="/docs/_next/static/mT926s0W5VyhfFaApGsyO/_buildManifest.js" async=""></script><script src="/docs/_next/static/mT926s0W5VyhfFaApGsyO/_ssgManifest.js" async=""></script></body></html>