CINXE.COM

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Chat Widget Moments | Text Platform Docs & API Reference</title><link rel="canonical" href="https://platform.text.com/docs/extending-chat-widget/chat-widget-moments"/><link rel="preconnect" href="https://LATDYRDX9J-dsn.algolia.net" crossorigin="true"/><meta name="description" content="Showing any web application during a chat is possible - all you need to do is use Moments."/><meta property="og:title" content="Chat Widget Moments"/><meta property="og:description" content="Showing any web application during a chat is possible - all you need to do is use Moments."/><meta property="og:type" content="website"/><meta property="og:image" content="https://platform.text.com/docs/images/text-docs-og.png"/><link rel="icon" href="/docs/images/favicon.ico"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@textplatform"/><meta name="twitter:title" content="Chat Widget Moments"/><meta name="twitter:description" content="Showing any web application during a chat is possible - all you need to do is use Moments."/><meta name="twitter:image" content="https://platform.text.com/docs/images/livechat-docs-og.png"/><script type="text/javascript"> window.__lc = window.__lc || {}; window.__lc.license = 1520; ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/staging/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice)) </script><meta name="next-head-count" content="17"/><link rel="preload" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" as="style"/><link rel="stylesheet" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/docs/_next/static/chunks/webpack-af19fbe32e13fc779465.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/_app-cdbe91fdfdbd305577ef.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.ac30430b2138b8fefed8.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.dede6f8249fbb82aff52.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/extending-chat-widget/chat-widget-moments-b986417836ded5978414.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="bdpnbeqxglupez2cdhcq-f-9bb82712e-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":0,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"20e1604","ak.r":40747,"ak.a2":n,"ak.m":"b","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":53184,"ak.gh":"104.88.70.118","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732385221","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==crTHRJlrVd010NbS8CphzMjxjKIpfRgrwQGUT14j5N1beMIhSQ3QPkMnyaTqijisb7PVOSeQhDI7bhiX38UXU7w+ZtIeQ+c3OuNTkhR6DhSfofnfExYpzjGQEUHTQeGfYMHSD2QSU1l3iiZVbLaCfz/xvmgkbQ3vQnccWltR0wAzTqhExnj2bS7TASyfSrS4HkiPXFJ1rAojgYo2mjZUkHp9Co0AsXTV/Fi4+72r7zwFNVa1MmaqJep+lpUu43AgskhFGAdv1Pprlod2L3ELwOVK1g+RFlCgRRNhBWOelNij4fZz5V2+okJVaHoRWrNidPto0zPliOueTERrnWKub5qGlZWlTQn/+u7hqPe0Q4aeePrzjoRWT5+MOx+Zf8LBlWvlRjf56BNd6Sx9hwh6vlzt5cZMB5uTBdaXr9pZoWw=","ak.pv":"55","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head><body><div id="__next"><style data-emotion-css="cvn8wj">.css-cvn8wj{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;background-color:#4a4a55;height:60px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;width:100%;z-index:99;}@media (min-width:768px){.css-cvn8wj{height:60px;}}</style><div class="css-cvn8wj"><style data-emotion-css="y9662z">.css-y9662z{background:#4a4a55;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}</style><div class="css-y9662z"><style data-emotion-css="qqcdow">.css-qqcdow{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:15px;margin:0 20px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;}.css-qqcdow > a > svg{margin:0;display:block;height:24px;}</style><nav class="css-qqcdow"><style data-emotion-css="c2yzgf">.css-c2yzgf{color:white;-webkit-text-decoration:none;text-decoration:none;font-weight:500;white-space:nowrap;margin-left:8px;}.css-c2yzgf:hover{-webkit-text-decoration:none;text-decoration:none;color:white;}</style><a href="https://text.com/" class="css-c2yzgf"><style data-emotion-css="ofqsza">.css-ofqsza{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.8em;height:40px;}.css-ofqsza .logo{margin:0;font-size:2em;font-weight:500;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-ofqsza .adjacent{margin:0;font-size:1.8em;font-weight:500;line-height:34px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-letter-spacing:-0.5px;-moz-letter-spacing:-0.5px;-ms-letter-spacing:-0.5px;letter-spacing:-0.5px;}.css-ofqsza .carrier{font-weight:500;-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:0.9s;animation-duration:0.9s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}</style><header class="css-ofqsza"><span class="logo">text<span class="carrier">|</span></span></header></a><a href="/docs" class="css-c2yzgf">Platform Docs</a></nav><style data-emotion-css="16b59id">.css-16b59id{margin:0;padding:0;max-width:calc(100% - 60px);width:calc(100% - 60px);overflow-x:auto;overflow-y:hidden;display:none;margin-right:10px;margin-left:40px;}@media (min-width:1024px){.css-16b59id{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:32px;}}</style><div class="css-16b59id"><style data-emotion-css="11hjr56">.css-11hjr56{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;position:relative;display:inline-block;height:100%;color:#ffffff;font-weight:400;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-11hjr56:hover{cursor:default;}</style><div class="css-11hjr56">Platform<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">APIs & SDKs<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">Resources<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div></div><style data-emotion-css="1hppjzv">.css-1hppjzv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1hppjzv"><style data-emotion-css="7wgbw1">.css-7wgbw1{display:none;}@media (min-width:1024px){.css-7wgbw1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:192px;margin-right:16px;}}</style><div class="DocSearch-Button-Desktop css-7wgbw1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><style data-emotion-css="1i8rrts">.css-1i8rrts{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;}@media (min-width:1024px){.css-1i8rrts{display:none;}}</style><div class="DocSearch-Button-Mobile css-1i8rrts"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><p>...</p><style data-emotion-css="pskeb7">@media (min-width:1024px){.css-pskeb7{display:none;}}</style><style data-emotion-css="19rp0xe">.css-19rp0xe{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:16px;cursor:pointer;}@media (min-width:1024px){.css-19rp0xe{display:none;}}@media (min-width:1024px){.css-19rp0xe{display:none;}}</style><svg width="32px" height="28px" fill="#ffffff" class="rmi rmi-menu css-19rp0xe" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"></path></svg></div></div></div><style data-emotion-css="ov1ktg">.css-ov1ktg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-ov1ktg"><style data-emotion-css="hpx2k5">.css-hpx2k5{border-right:1px solid #e2e2e4;height:50px;position:fixed;-webkit-transition:height 300ms;transition:height 300ms;display:block;bottom:0%;width:100%;opacity:1;z-index:10;box-shadow:0px 0px 8px rgba(0,0,0,0.25);background-color:white;}@media (min-width:768px){.css-hpx2k5{box-shadow:none;height:100vh;max-height:100vh;position:-webkit-sticky;position:sticky;top:60px;-webkit-transition:all 0s;transition:all 0s;width:260px;}}</style><aside class="css-hpx2k5"><style data-emotion-css="y8dejn">.css-y8dejn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;padding:10px 14px;cursor:pointer;}@media (min-width:768px){.css-y8dejn{display:none;}}</style><div class="css-y8dejn"><svg style="transform:rotate(270deg);transition:transform 300ms" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>Chat Widget Moments</div><style data-emotion-css="v8mm6">.css-v8mm6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (min-width:768px){.css-v8mm6{display:none;}}</style><div class="css-v8mm6"><style data-emotion-css="1pjh3pd">.css-1pjh3pd{width:100%;color:#62626D;}.css-1pjh3pd:hover{cursor:pointer;-webkit-text-decoration:none;text-decoration:none;background-color:#f6f6f7;}</style><a class="css-1pjh3pd"><style data-emotion-css="1yw2pv4">.css-1yw2pv4{padding:4px 14px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:16px;}</style><div class="css-1yw2pv4"><style data-emotion-css="5c7uuc">.css-5c7uuc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;}</style><div class="css-5c7uuc"><svg width="24" height="20px" fill="#62626D" class="rmi rmi-home undefined" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"></path></svg></div>Home</div></a></div><style data-emotion-css="1ln71vl">.css-1ln71vl{overflow:scroll;height:calc(100% - 90px);}@media (min-width:768px){.css-1ln71vl{height:calc(100% - 60px);position:fixed;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:100vh;position:-webkit-sticky;position:-webkit-sticky;position:sticky;top:0;margin-top:8px;}}</style><div class="css-1ln71vl"><style data-emotion-css="1psvkz3">.css-1psvkz3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-right:10px;font-weight:500;font-size:16px;border-radius:0px 8px 8px 0px;}.css-1psvkz3:hover{background-color:#f6f6f7;}</style><div class="css-1psvkz3"><style data-emotion-css="19nl305">.css-19nl305{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#62626D;width:100%;}.css-19nl305:hover{color:#4284F5;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;}</style><a class="css-19nl305"><style data-emotion-css="2hhlpj">.css-2hhlpj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:6px 16px 6px 20px;margin-right:10px;font-weight:500;font-size:16px;border-radius:0px 8px 8px 0px;width:100%;}.css-2hhlpj:hover{background-color:#f6f6f7;}</style><div class="css-2hhlpj"><style data-emotion-css="oe3dsw">.css-oe3dsw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:8px;}</style><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Overview</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Chat Widget JS API</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Customer SDK</div></a></div><style data-emotion-css="1gg9bms">.css-1gg9bms{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-right:10px;font-weight:600;font-size:16px;border-radius:0px 8px 8px 0px;}.css-1gg9bms:hover{background-color:#f6f6f7;}</style><div class="css-1gg9bms"><style data-emotion-css="17iyluq">.css-17iyluq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#4284F5;width:100%;}.css-17iyluq:hover{color:#4284F5;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;}</style><a class="css-17iyluq"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Chat Widget Moments</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Rich Messages</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Custom Identity Provider</div></a></div><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Chat Widget Adapters</div></a><style data-emotion-css="155ms1k">.css-155ms1k{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-right:5px;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 300ms;-webkit-transition:transform 300ms;transition:transform 300ms;cursor:pointer;}</style><div class="css-155ms1k"><svg width="24" height="24px" fill="#62626D" weight="24px" class="rmi rmi-chevron-right undefined" viewBox="0 0 24 24"><path d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z"></path></svg></div></div></div></aside><style data-emotion-css="1g06r20">.css-1g06r20{padding-bottom:30vh;position:relative;width:100%;}@media (min-width:768px){.css-1g06r20{width:calc(100% - 258px);max-width:900px;}}</style><div class="css-1g06r20"><style data-emotion-css="c8i9h7">.css-c8i9h7{margin-top:120px;padding:0px 30px;}@media (min-width:768px){.css-c8i9h7{padding:0px 60px;}}.css-c8i9h7.redoc{margin-top:60px;display:block;}</style><article class=" css-c8i9h7"><style data-emotion-css="1lyzzun">.css-1lyzzun{margin:3em 0 1em;padding:2em 0 1em;}</style><div class="css-1lyzzun"><style data-emotion-css="12qxxrf">.css-12qxxrf{margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;font-weight:500;text-rendering:optimizeLegibility;font-size:2.25rem;line-height:1.1;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;}@media (min-width:768px){.css-12qxxrf{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}</style><h2 id="chat-widget-moments" class="css-12qxxrf"><span>Chat Widget Moments</span><style data-emotion-css="1g0dr3m">.css-1g0dr3m{margin-top:8px;}.css-1g0dr3m > label{margin:0 0 5px 0;}.css-1g0dr3m label + div{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}</style></h2></div><style data-emotion-css="1679d3t">.css-1679d3t{border-bottom:1px solid #e0e4e9;padding-bottom:0.5em;}</style><h2 class="heading css-1679d3t"><style data-emotion-css="180507a">.css-180507a{color:inherit;-webkit-text-decoration:none;text-decoration:none;position:relative;}.css-180507a:hover{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-180507a:hover:before{content:"#";position:absolute;font-weight:300;left:-1em;top:1px;opacity:0.3;}.css-180507a:focus-visible{outline-width:0px;}</style><a id="introduction" href="#introduction" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#introduction"><span class="icon icon-link"></span></a>Introduction</a></h2><p>Moments allow you to show any web application during a chat and let customers perform specific actions.</p><video src="https://cdn-staging.livechat-static.com/api/file/lc/att/1520/34fb66f74b2f18394a199dbf0b6c4e9f/chw.mp4" autoplay="true" loop="" muted=""></video><h3 class="heading"><a id="is-it-for-me" href="#is-it-for-me" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#is-it-for-me"><span class="icon icon-link"></span></a>Is it for me?</a></h3><p>Think about Moments as a solution for difficult tasks to handle during a conversation. When a specific task is hard to perform using text messages or it requires a lot of effort from your customer to provide requested data, Moments can make your process much more accessible. The feature allows you to solve a problem without the need to leave a chat. From a technical point of view, it's a web page embedded in an iframe shown during a chat.</p><div><iframe src="https://secure-labs.livechatinc.com/customer/action/open_chat?license_id=100016461&group=1" style="border:1px solid rgba(0, 0, 0, 0.1);width:100%;max-width:300px;height:550px;display:block;margin:1em auto"></iframe></div><h3 class="heading"><a id="how-it-works" href="#how-it-works" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#how-it-works"><span class="icon icon-link"></span></a>How it works?</a></h3><ol><li>The customer receives a rich message with the webview button</li><li>The customer clicks button</li><li>Moments show, web applications loads</li><li>Customer performs activities in the web application</li><li>The moment is closed either by:<ul><li>Web application (method call)</li><li>User (close button)</li></ul></li></ol><h2 class="heading css-1679d3t"><a id="sample-use-cases" href="#sample-use-cases" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#sample-use-cases"><span class="icon icon-link"></span></a>Sample use cases</a></h2><p><strong>Schedule meeting</strong> - give the customer an option to choose the available term. Send a message with “choose term” button, open web application with data picker component, then send back chosen term to chat conversation as customer’s message.</p><p><strong>Payment system</strong> - send customer “Pay” button, open web application with payment provider billing form, send payment id to chat after successful fulfillment.</p><p><strong>Seat picker</strong> - let the customer choose a seat in stadium or restaurant. Prepare custom component with seat’s placement visualization, send back preferred option to the agent.</p><p><strong>Articles view</strong> - send case-related materials from your knowledge base. Let customer quickly read them without the need of opening a new tab.</p><p>Moments let you embed almost every web application in chat widget, but it shouldn’t be treated as a place to surf the web. Moments should allow a customer to focus on a particular task, complete it in a straightforward way and back to the chat. You shouldn’t redirect the customer to the complex web application with multiple views, complicated forms or web.</p><h2 class="heading css-1679d3t"><a id="examples" href="#examples" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#examples"><span class="icon icon-link"></span></a>Examples</a></h2><h3 class="heading"><a id="calendly-integration" href="#calendly-integration" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#calendly-integration"><span class="icon icon-link"></span></a>Calendly integration</a></h3><p>Calendly - integration available to install in <a href="https://www.livechat.com/marketplace/apps/calendly/">LiveChat Marketplace</a>, allowing customers to schedule meetings directly from the Chat widget. It consists of two parts:</p><ul><li><a href="/docs/extending-ui/extending-agent-app/agent-app-sdk#messagebox">Agent App Widget</a> application, attached to the Message box, allowing an agent to send a Rich message with an invitation</li><li>Calendly Moment app, integrating Calendly JavaScript API with Moments SDK, allowing prefilling customer name and email and sending booking confirmation to a chat.</li></ul><h3 class="heading"><a id="date-picker" href="#date-picker" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#date-picker"><span class="icon icon-link"></span></a>Date picker</a></h3><p>Data picker - app written in Vue, allows a customer to pick any date from datepicker. It sends a chosen option back to a chat.</p><p>Source code is available on <a href="https://github.com/livechat/moments-apps-examples/tree/master/examples/datepicker">github</a>, preview is deployed <a href="https://cdn.livechat-static.com/moments-apps-examples/datepicker/">here</a>.</p><h3 class="heading"><a id="network-tester" href="#network-tester" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#network-tester"><span class="icon icon-link"></span></a>Network tester</a></h3><p>Network tester - app written in React, performing a test of the connection status of client connection with specific servers.</p><h2 class="heading css-1679d3t"><a id="moments-in-livechat" href="#moments-in-livechat" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#moments-in-livechat"><span class="icon icon-link"></span></a>Moments in LiveChat</a></h2><p>Moments can be triggered only by <a href="https://www.livechat.com/help/rich-messages/">rich message's</a> buttons. Currently, LiveChat supports rich messages delivered by chatbots using our <a href="https://chatbot.com">ChatBot</a> product, a <a href="/docs/extending-ui/extending-agent-app/agent-app-sdk#messagebox">MessageBox</a> integration in Agent App, or by sending a rich message using our <a href="/docs/messaging/agent-chat-api">Agent Chat API</a>.</p><h2 class="heading css-1679d3t"><a id="moments-sdk" href="#moments-sdk" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#moments-sdk"><span class="icon icon-link"></span></a>Moments SDK</a></h2><p>Moments SDK is the library to integrate web application used as Moments with Chat Widget. It's not necessary to use Moments SDK inside Moments web applications, but it provides more chat widget integration options - it allows you to send messages as a visitor, set visitor attributes or close Moment.</p><h3 class="heading"><a id="methods" href="#methods" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#methods"><span class="icon icon-link"></span></a>Methods</a></h3><h4 class="heading"><a id="createmomentssdk" href="#createmomentssdk" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#createmomentssdk"><span class="icon icon-link"></span></a>createMomentsSDK</a></h4><p>Default method exported by the library. It's initializing connection with chat widget. You can pass additional properties:</p><style data-emotion-css="q76ucn">.css-q76ucn{width:100%;overflow-x:auto;}</style><div class="css-q76ucn"><table><thead><tr><th>param</th><th>type</th><th>description</th></tr></thead><tbody><tr><td>title</td><td>string</td><td>Application title; will be placed on the Moment's title bar.</td></tr><tr><td>icon</td><td>string</td><td>URL to the application icon; will be placed on the Moment's title bar.</td></tr><tr><td>isFragile</td><td>boolean</td><td>When set to true, the LiveChat Chat Widget will require additional confirmation from the user in order to close the Moment.</td></tr></tbody></table></div><h4 class="heading"><a id="using-npm" href="#using-npm" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#using-npm"><span class="icon icon-link"></span></a>Using npm</a></h4><p>To simply get started with creating your Moments App add <code>@livechat/moments-sdk</code> as dependency to your project:</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">START WITH MOMENTS APP USING 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/moments-sdk </code></pre></div></div></div></div><p>and then import <code>createMomentsSDK</code> function which is exported as default from package.</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">IMPORT CREATE MOMENTS SDK</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">createMomentsSDK</span> <span class="token keyword module">from</span> <span class="token string">"@livechat/moments-sdk"</span><span class="token punctuation">;</span> <span class="token function">createMomentsSDK</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 App"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">momentsSDK</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// your code</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="using-script-tag" href="#using-script-tag" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#using-script-tag"><span class="icon icon-link"></span></a>Using script tag</a></h4><p>To simply get started with creating your Moments App add to your page, at the bottom of <code>body</code> section, <code>script</code> tag with <code>src</code> atribute set to our moments-sdk.</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">USING SCRIPT TAG</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://cdn.livechat-static.com/moments-sdk/moments-sdk-1.9.0.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> </code></pre></div></div></div></div><p>In your code before <code>moments-sdk</code> is loaded assign to window function called <code>onMomentAsyncInit</code>. It is used as a hook to let you know when sdk is loaded. You will get <code>createMomentsSDK</code> function as an argument of that call. Using UMD build you should reference to <code>window.MomentsSDK</code> instead of <code>momentsSDK</code> to access methods.</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">ASSIGNING FUNCTION</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 dom variable">window</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onMomentAsyncInit</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">createMomentsSDK</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">createMomentsSDK</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 App"</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">// your code</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></div><h4 class="heading"><a id="sendmessage" href="#sendmessage" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#sendmessage"><span class="icon icon-link"></span></a>sendMessage</a></h4><p>Sends a message as a visitor in currently active chat. Parameters:</p><ul><li><code>text</code> - Message text</li></ul><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SEND MESSAGE</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">momentsSDK<span class="token punctuation">.</span><span class="token method function property-access">sendMessage</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Chosen date: 19.12.2009"</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="sendsystemmessage" href="#sendsystemmessage" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#sendsystemmessage"><span class="icon icon-link"></span></a>sendSystemMessage</a></h4><p>Sends a system message in the currently active chat. Parameteres:</p><ul><li><code>text</code> - Message text</li><li><code>recipients</code> - Optional, defines those who can display the message: <code>all</code> (default) or <code>agents</code></li></ul><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SEND SYSTEM MESSAGE</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">momentsSDK<span class="token punctuation">.</span><span class="token method function property-access">sendSystemMessage</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Survey submitted"</span><span class="token punctuation">,</span> <span class="token literal-property property">recipients</span><span class="token operator">:</span> <span class="token string">"agents"</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></div><h4 class="heading"><a id="setattributes" href="#setattributes" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#setattributes"><span class="icon icon-link"></span></a>setAttributes</a></h4><p>Set customer's properties. Parameters:</p><ul><li><code>customProperties</code> - Customer's additional data object</li></ul><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SET ATTRIBUTES</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">momentsSDK<span class="token punctuation">.</span><span class="token method function property-access">setAttributes</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">clientId</span><span class="token operator">:</span> <span class="token string">"SJ3CJ6JVNMK42A"</span><span class="token punctuation">,</span> <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"Organic"</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="setexternallink" href="#setexternallink" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#setexternallink"><span class="icon icon-link"></span></a>setExternalLink</a></h4><p>Sets the external link for the fullscreen version of the app, which will be opened in the new tab. Parameters:</p><ul><li><code>link</code> - URL of the fullscreen version</li></ul><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SET EXTERNAL LINK</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">momentsSDK<span class="token punctuation">.</span><span class="token method function property-access">setExternalLink</span><span class="token punctuation">(</span><span class="token string">"https://livechat.com"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div></div><h4 class="heading"><a id="close" href="#close" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#close"><span class="icon icon-link"></span></a>close</a></h4><p>Close Moment app.</p><p>This method has no parameters.</p><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">CLOSE</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">momentsSDK<span class="token punctuation">.</span><span class="token method function property-access">close</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="setisfragile" href="#setisfragile" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#setisfragile"><span class="icon icon-link"></span></a>setIsFragile</a></h4><p>Set <code>isFragile</code> value. It can be provided as part of initialization data and changed later with this function. Parameters:</p><ul><li><code>value</code> - Boolean</li></ul><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">SET ISFRAGILE</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">momentsSDK<span class="token punctuation">.</span><span class="token method function property-access">setIsFragile</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> </code></pre></div></div></div></div><h4 class="heading"><a id="updatecustomerdata" href="#updatecustomerdata" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#updatecustomerdata"><span class="icon icon-link"></span></a>updateCustomerData</a></h4><p>Update customer's name or email. Parameters:</p><ul><li><code>name</code> - Customer's name</li><li><code>email</code> - Customer's email</li></ul><div class="css-17buymi"><div class="css-16prjg8"><div class="css-13hnul0"><code class="code-sample-header">UPDATE CUSTOMER 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">momentsSDK<span class="token punctuation">.</span><span class="token method function property-access">updateCustomerData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John Doe'</span><span class="token punctuation">,</span> <span class="token literal-property property">email</span><span class="token operator">:</span> <span class="token string">'johndoe@example.com'</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="launcherdata" href="#launcherdata" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#launcherdata"><span class="icon icon-link"></span></a>LauncherData</a></h3><p>Data passed from the Chat Widget. It is available right after the SDK initialization. It consists of:</p><ul><li><code>licenseId</code> - ID of the license for which a Moment has been initialized</li><li><code>chatId</code> - ID of a customer's chat (returns <code>undefined</code> if there's no chat)</li><li><code>groupId</code> - ID of a customer's group</li></ul><h3 class="heading"><a id="how-to-start" href="#how-to-start" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#how-to-start"><span class="icon icon-link"></span></a>How to start</a></h3><p>You should start by preparing your first Moment app. You can use one of our examples or use our bootstrap project build on Glitch platform - it’s ready to publish, integrated with Moments SDK and easy to fork and adjust to own needs.</p><p>If you want to use simple static page in moment instead of web app you can use <code>moment-title</code> parameter in URL to specify the title that should be displayed for your Moment.</p><h5 class="heading"><a id="example" href="#example" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#example"><span class="icon icon-link"></span></a>Example:</a></h5><p><code>https://example.com?moment-title=MyApp</code></p><p>To try Moments out, head to the <a href="https://chatbot.com">ChatBot website</a> to sign up for a 14-day free trial. If you already have an account go to our article on how to integrate ChatBot with Livechat. Configure story, add bot response “Card”, add the button with “webview” widget and fill in your application URL. Test your story in LiveChat chat widget.</p><p>Alternatively you can setup the <a href="/docs/extending-ui/extending-agent-app/agent-app-sdk#messagebox">MessageBox</a> integration in Agent App and use your Moment app there.</p><h3 class="heading"><a id="resources" href="#resources" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#resources"><span class="icon icon-link"></span></a>Resources</a></h3><ul><li><a href="https://www.livechat.com/kb/rich-messages/">What are rich messages?</a></li><li><a href="https://www.livechat.com/kb/chatbots-explained/">Chatbots explained</a></li><li><a href="https://www.livechat.com/kb/chatbot-integration/">Chatbot: add a bot to LiveChat</a></li><li><a href="/docs/extending-ui/extending-agent-app/agent-app-sdk#messagebox">Agent App MessageBox</a></li></ul><hr/><h3 class="heading"><a id="changelog" href="#changelog" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#changelog"><span class="icon icon-link"></span></a>Changelog</a></h3><h4 class="heading"><a id="v190---2023-12-11" href="#v190---2023-12-11" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#v190---2023-12-11"><span class="icon icon-link"></span></a>[v1.9.0] - 2023-12-11</a></h4><h5 class="heading"><a id="added" href="#added" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#added"><span class="icon icon-link"></span></a>Added</a></h5><ul><li>New LauncherData property: <code>groupId</code></li></ul><h4 class="heading"><a id="v110---2019-12-17" href="#v110---2019-12-17" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#v110---2019-12-17"><span class="icon icon-link"></span></a>[v1.1.0] - 2019-12-17</a></h4><h5 class="heading"><a id="added-1" href="#added-1" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#added-1"><span class="icon icon-link"></span></a>Added</a></h5><ul><li>New methods: <code>setExternalLink</code> and <code>sendSystemMessage</code></li></ul><h4 class="heading"><a id="v001---2019-02-20" href="#v001---2019-02-20" class="reference css-180507a"><a href="/docs/extending-chat-widget/chat-widget-moments#v001---2019-02-20"><span class="icon icon-link"></span></a>[v0.0.1] - 2019-02-20</a></h4><ul><li>First public Release.</li></ul><style data-emotion-css="1fsewzh">.css-1fsewzh{margin-top:50px;}.css-1fsewzh > label{margin:0 0 5px 0;}.css-1fsewzh label + div{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}</style></article></div><p>...</p></div><style data-emotion-css="1mpu5jj">.css-1mpu5jj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#f6f6f7;color:#424d57;min-height:248px;margin-bottom:45px;}@media (min-width:768px){.css-1mpu5jj{margin-bottom:0px;}}</style><div class="css-1mpu5jj"><style data-emotion-css="dtzkur">.css-dtzkur{width:100%;padding:20px;}@media (min-width:768px){.css-dtzkur{margin-top:75px;padding:0;width:160px;}}</style><div class="css-dtzkur"><style data-emotion-css="r8rj3w">.css-r8rj3w{font-weight:600;font-size:16px;line-height:24px;color:#424d57;}</style><div class="css-r8rj3w">Join the community</div><style data-emotion-css="1ws0nkq">.css-1ws0nkq{font-weight:400;font-size:12px;line-height:20px;color:#424d57;}</style><div class="css-1ws0nkq">Get in direct contact with us through Discord.</div><style data-emotion-css="652pjx">.css-652pjx:hover{-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://discord.gg/MGFyhbdFxt" target="_blank" rel="noopener noreferrer" class="css-652pjx"><style data-emotion-css="y77wuh">.css-y77wuh{margin-top:5px;}</style><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_613_10386)"><path d="M16.9308 1.63294C15.6561 1.04804 14.2892 0.617109 12.8599 0.370298C12.8339 0.365535 12.8079 0.377439 12.7945 0.401247C12.6187 0.713926 12.4239 1.12184 12.2876 1.44246C10.7503 1.21232 9.22099 1.21232 7.71527 1.44246C7.57887 1.11471 7.37707 0.713926 7.20048 0.401247C7.18707 0.378233 7.16107 0.366329 7.13504 0.370298C5.70659 0.616321 4.33963 1.04725 3.06411 1.63294C3.05307 1.6377 3.04361 1.64564 3.03732 1.65595C0.444493 5.52959 -0.265792 9.30801 0.0826501 13.0396C0.0842267 13.0578 0.0944749 13.0753 0.108665 13.0864C1.81934 14.3427 3.47642 15.1054 5.10273 15.6109C5.12876 15.6188 5.15634 15.6093 5.1729 15.5879C5.55761 15.0625 5.90054 14.5086 6.19456 13.926C6.21192 13.8919 6.19535 13.8514 6.15989 13.838C5.61594 13.6316 5.098 13.38 4.59977 13.0943C4.56037 13.0713 4.55721 13.015 4.59347 12.988C4.69831 12.9094 4.80318 12.8277 4.9033 12.7451C4.92141 12.7301 4.94665 12.7269 4.96794 12.7364C8.24107 14.2308 11.7846 14.2308 15.0191 12.7364C15.0404 12.7261 15.0657 12.7293 15.0846 12.7443C15.1847 12.8269 15.2895 12.9094 15.3952 12.988C15.4314 13.015 15.4291 13.0713 15.3897 13.0943C14.8914 13.3856 14.3735 13.6316 13.8288 13.8372C13.7933 13.8507 13.7775 13.8919 13.7949 13.926C14.0952 14.5078 14.4381 15.0617 14.8157 15.5871C14.8315 15.6093 14.8599 15.6188 14.8859 15.6109C16.5201 15.1054 18.1772 14.3427 19.8879 13.0864C19.9028 13.0753 19.9123 13.0586 19.9139 13.0404C20.3309 8.72626 19.2154 4.97883 16.9568 1.65674C16.9513 1.64564 16.9419 1.6377 16.9308 1.63294ZM6.68335 10.7674C5.69792 10.7674 4.88594 9.86274 4.88594 8.75167C4.88594 7.6406 5.68217 6.7359 6.68335 6.7359C7.69239 6.7359 8.49651 7.64855 8.48073 8.75167C8.48073 9.86274 7.68451 10.7674 6.68335 10.7674ZM13.329 10.7674C12.3435 10.7674 11.5316 9.86274 11.5316 8.75167C11.5316 7.6406 12.3278 6.7359 13.329 6.7359C14.338 6.7359 15.1421 7.64855 15.1264 8.75167C15.1264 9.86274 14.338 10.7674 13.329 10.7674Z" fill="#424D57"></path></g><defs><clipPath id="clip0_613_10386"><rect width="20" height="15.493" fill="white" transform="translate(0 0.25354)"></rect></clipPath></defs></svg></i><div>Discord</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Follow us</div><div class="css-1ws0nkq">Follow our insightful tweets and interact with our content.</div><a href="https://twitter.com/TextPlatform" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="24" height="24" class="rmi rmi-twitter undefined" viewBox="0 0 24 24"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path></svg></i><div>Twitter</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contribute</div><div class="css-1ws0nkq">See something that's wrong or unclear? Submit a pull request.</div><a href="https://github.com/livechat/livechat-public-docs" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="24" height="24" class="rmi rmi-github undefined" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"></path></svg></i><div>GitHub</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contact us</div><div class="css-1ws0nkq">Want to share feedback? Reach us at: <a href="mailto:developers@text.com">developers@text.com</a></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/extending-chat-widget/chat-widget-moments","query":{},"buildId":"mT926s0W5VyhfFaApGsyO","assetPrefix":"/docs","runtimeConfig":{},"nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/docs/_next/static/chunks/polyfills-c2dc1d9251306528e50c.js"></script><script src="/docs/_next/static/chunks/webpack-af19fbe32e13fc779465.js" async=""></script><script src="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" async=""></script><script src="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" async=""></script><script src="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" async=""></script><script src="/docs/_next/static/chunks/pages/_app-cdbe91fdfdbd305577ef.js" async=""></script><script src="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" async=""></script><script src="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.ac30430b2138b8fefed8.js" async=""></script><script src="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.dede6f8249fbb82aff52.js" async=""></script><script src="/docs/_next/static/chunks/pages/extending-chat-widget/chat-widget-moments-b986417836ded5978414.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>