CINXE.COM

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Rich Messages | Text Platform Docs & API Reference</title><link rel="canonical" href="https://platform.text.com/docs/extending-chat-widget/rich-messages"/><link rel="preconnect" href="https://LATDYRDX9J-dsn.algolia.net" crossorigin="true"/><meta name="description" content="Engage better with your Customers using interactive and visually appealing affluent messages."/><meta property="og:title" content="Rich Messages"/><meta property="og:description" content="Engage better with your Customers using interactive and visually appealing affluent messages."/><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="Rich Messages"/><meta name="twitter:description" content="Engage better with your Customers using interactive and visually appealing affluent messages."/><meta name="twitter:image" content="https://platform.text.com/docs/images/livechat-docs-og.png"/><script type="text/javascript"> window.__lc = window.__lc || {}; window.__lc.license = 1520; ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice)) </script><meta name="next-head-count" content="17"/><link rel="preload" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" as="style"/><link rel="stylesheet" href="/docs/_next/static/css/5c94b719b441ef6e576e.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/docs/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/_app-06a3a99d73e91e62445b.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.de74f486eb1da22b5155.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.37b3e3ef116317d8771b.js" as="script"/><link rel="preload" href="/docs/_next/static/chunks/pages/extending-chat-widget/rich-messages-939267b8b7391bfc7f15.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="bdpnbet4tppjwz5tayka-f-c768379ba-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":"a058015","ak.r":6099,"ak.a2":n,"ak.m":"b","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":36702,"ak.gh":"124.155.222.151","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"bbr","ak.t":"1739785748","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==gD2YrkGvnx7rgBNf5gPGZ2FyOb88fuMgpBHL5UCpME2JhVz4uUt2Xg2XvNsvkpLaWxRz1FAdtIGJV8yzMCGykBu5hIMIoBVxVmX2/nrmls2iYe5aCHbgjUNIcLHce5bkyY14TuAc8o8n4VV7cfmn6sZoTPxapLnwjHIsmcBa2cVql8wH0W5D0qcM5M8513FaIMi276wp/TIH8xx4epsmaebqZ4HwKiSpGZGV6Z2VqZSv3q8ZidRmnuYfGJeUurdE2eLODAeGCOlvD2mf+GTN+il3NReEcU5nkgHujYXXG7cOzcQxtCHZxWhuUnG/zEZAx0VV//7N0Cq0PP/s2oO9f3mGStwSYpe6z2YOK2T0UrPRcKi9j/tpwKSDIlynQg/bsfbvk5fiVc7Q6eXkahH4JQ03//Et3DSMdAl+n2f9c2Q=","ak.pv":"60","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head><body><div id="__next"><style data-emotion-css="cvn8wj">.css-cvn8wj{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;background-color:#4a4a55;height:60px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;width:100%;z-index:99;}@media (min-width:768px){.css-cvn8wj{height:60px;}}</style><div class="css-cvn8wj"><style data-emotion-css="y9662z">.css-y9662z{background:#4a4a55;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}</style><div class="css-y9662z"><style data-emotion-css="qqcdow">.css-qqcdow{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:15px;margin:0 20px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;}.css-qqcdow > a > svg{margin:0;display:block;height:24px;}</style><nav class="css-qqcdow"><style data-emotion-css="c2yzgf">.css-c2yzgf{color:white;-webkit-text-decoration:none;text-decoration:none;font-weight:500;white-space:nowrap;margin-left:8px;}.css-c2yzgf:hover{-webkit-text-decoration:none;text-decoration:none;color:white;}</style><a href="https://text.com/" class="css-c2yzgf"><style data-emotion-css="ofqsza">.css-ofqsza{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.8em;height:40px;}.css-ofqsza .logo{margin:0;font-size:2em;font-weight:500;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-ofqsza .adjacent{margin:0;font-size:1.8em;font-weight:500;line-height:34px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-letter-spacing:-0.5px;-moz-letter-spacing:-0.5px;-ms-letter-spacing:-0.5px;letter-spacing:-0.5px;}.css-ofqsza .carrier{font-weight:500;-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:0.9s;animation-duration:0.9s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}</style><header class="css-ofqsza"><span class="logo">text<span class="carrier">|</span></span></header></a><a href="/docs" class="css-c2yzgf">Platform Docs</a></nav><style data-emotion-css="16b59id">.css-16b59id{margin:0;padding:0;max-width:calc(100% - 60px);width:calc(100% - 60px);overflow-x:auto;overflow-y:hidden;display:none;margin-right:10px;margin-left:40px;}@media (min-width:1024px){.css-16b59id{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:32px;}}</style><div class="css-16b59id"><style data-emotion-css="11hjr56">.css-11hjr56{font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT, Gill Sans,Corbel,Arial,sans-serif;position:relative;display:inline-block;height:100%;color:#ffffff;font-weight:400;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-11hjr56:hover{cursor:default;}</style><div class="css-11hjr56">Platform<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">APIs & SDKs<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div><div class="css-11hjr56">Resources<svg width="24" height="24" fill="#FFFFFF" class="rmi rmi-chevron-down undefined" viewBox="0 0 24 24"><path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"></path></svg></div></div><style data-emotion-css="1hppjzv">.css-1hppjzv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1hppjzv"><style data-emotion-css="7wgbw1">.css-7wgbw1{display:none;}@media (min-width:1024px){.css-7wgbw1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:192px;margin-right:16px;}}</style><div class="DocSearch-Button-Desktop css-7wgbw1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><style data-emotion-css="1i8rrts">.css-1i8rrts{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;}@media (min-width:1024px){.css-1i8rrts{display:none;}}</style><div class="DocSearch-Button-Mobile css-1i8rrts"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><style data-emotion-css="pskeb7">@media (min-width:1024px){.css-pskeb7{display:none;}}</style><style data-emotion-css="19rp0xe">.css-19rp0xe{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:16px;cursor:pointer;}@media (min-width:1024px){.css-19rp0xe{display:none;}}@media (min-width:1024px){.css-19rp0xe{display:none;}}</style><svg width="32px" height="28px" fill="#ffffff" class="rmi rmi-menu css-19rp0xe" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"></path></svg></div></div></div><style data-emotion-css="ov1ktg">.css-ov1ktg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-ov1ktg"><style data-emotion-css="hpx2k5">.css-hpx2k5{border-right:1px solid #e2e2e4;height:50px;position:fixed;-webkit-transition:height 300ms;transition:height 300ms;display:block;bottom:0%;width:100%;opacity:1;z-index:10;box-shadow:0px 0px 8px rgba(0,0,0,0.25);background-color:white;}@media (min-width:768px){.css-hpx2k5{box-shadow:none;height:100vh;max-height:100vh;position:-webkit-sticky;position:sticky;top:60px;-webkit-transition:all 0s;transition:all 0s;width:260px;}}</style><aside class="css-hpx2k5"><style data-emotion-css="y8dejn">.css-y8dejn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;padding:10px 14px;cursor:pointer;}@media (min-width:768px){.css-y8dejn{display:none;}}</style><div class="css-y8dejn"><svg style="transform:rotate(270deg);transition:transform 300ms" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>Rich Messages</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><div class="css-1psvkz3"><a class="css-19nl305"><div class="css-2hhlpj"><div class="css-oe3dsw"><svg fill="#ABABB1" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><path d="M1.5,0.5 C0.675,0.5 0.0075,1.175 0.0075,2 L0,14 C0,14.825 0.6675,15.5 1.4925,15.5 L10.5,15.5 C11.325,15.5 12,14.825 12,14 L12,5 L7.5,0.5 L1.5,0.5 Z M6.75,5.75 L6.75,1.625 L10.875,5.75 L6.75,5.75 Z" fill-rule="nonzero" fill="currentColor"></path></svg></div>Chat Widget Moments</div></a></div><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>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="rich-messages" class="css-12qxxrf"><span>Rich Messages</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/rich-messages#introduction"><span class="icon icon-link"></span></a>Introduction</a></h2><p><a href="https://www.livechat.com/help/rich-messages/">Rich Messages</a> are more than just plain text. Those interactive blocks make use of images, buttons, and text to improve your work in multiple ways. With Rich Messages you can, for example:</p><ul><li>Let your Customers get more details about your business.</li><li>Quickly send responses to your messages.</li><li>Make phone calls.</li><li>Open small apps called <a href="/docs/extending-ui/extending-chat-widget/chat-widget-moments">Moments</a>.</li></ul><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="wcs7gb">.css-wcs7gb{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(800 / 800 * 100%);}</style><div class="css-wcs7gb"><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="LiveChat Rich Messages" src="/docs/images/extending-chat-widget/livechat-rich-messages.png" decoding="async" class="css-5r33xa"/></div></div><p>Rich Messages are also the core feature of our <strong>ChatBot</strong> integration. If you're not familiar with ChatBot,<br/>the <a href="https://www.livechat.com/help/chatbots-explained/">Chatbots explained</a> article will come in handy.</p><h2 class="heading css-1679d3t"><a id="rich-messages-overview" href="#rich-messages-overview" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#rich-messages-overview"><span class="icon icon-link"></span></a>Rich Messages overview</a></h2><p>Rich Messages are built with three basic building blocks: <strong>text</strong>, <strong>image</strong>, and <strong>buttons</strong>. Combining them in different configurations creates numerous opportunities. Following that, at LiveChat, we have grouped them into the following categories.</p><h3 class="heading"><a id="cards" href="#cards" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#cards"><span class="icon icon-link"></span></a>Cards</a></h3><p>Cards are single-message blocks, which can contain an image, a title, a subtitle, and buttons. Neither of these elements is mandatory, so you could create a card containing just a picture, just text, or only buttons.</p><div class="css-v3memn"><style data-emotion-css="1yuy88b">.css-1yuy88b{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(400 / 800 * 100%);}</style><div class="css-1yuy88b"><img alt="Card" src="/docs/images/extending-chat-widget/card-preview.png" decoding="async" class="css-5r33xa"/></div></div><h3 class="heading"><a id="carousels" href="#carousels" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#carousels"><span class="icon icon-link"></span></a>Carousels</a></h3><p>Carousels are a combination of multiple cards. For example, by just showing a title and image, you can present multiple products in a more attractive way.</p><div class="css-v3memn"><style data-emotion-css="psti1a">.css-psti1a{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(500 / 800 * 100%);}</style><div class="css-psti1a"><img alt="Carousel" src="/docs/images/extending-chat-widget/carousel-preview.png" decoding="async" class="css-5r33xa"/></div></div><h3 class="heading"><a id="quick-replies" href="#quick-replies" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#quick-replies"><span class="icon icon-link"></span></a>Quick Replies</a></h3><p>Quick Replies are a specific type of buttons - they are smaller. As a result, many more of them can fit on the screen. They might be useful when you want your users to choose one of the predefined responses.</p><div class="css-v3memn"><div class="css-1yuy88b"><img alt="Quick Replies" src="/docs/images/extending-chat-widget/quick-replies-preview.png" decoding="async" class="css-5r33xa"/></div></div><h2 class="heading css-1679d3t"><a id="getting-started" href="#getting-started" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#getting-started"><span class="icon icon-link"></span></a>Getting started</a></h2><p>As mentioned before, Rich Messages are a combination of the basic building blocks. How do we know what to show, then? We base that on the JSON object received via the <a href="/docs/messaging/customer-chat-api/data-structures#rich-message">Customer Chat API</a>. Apart from the author and other strictly messaging-related data, the core of the Rich Messages looks like that:</p><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="ju12u0">.css-ju12u0{min-height:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;overflow:scroll;}.css-ju12u0 code{display:inline-block;}</style><div class="css-ju12u0"><div class="remark-highlight"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"template_id"</span><span class="token operator">:</span> <span class="token string">"cards"</span><span class="token punctuation">,</span> <span class="token property">"elements"</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">"Title"</span><span class="token punctuation">,</span> <span class="token property">"subtitle"</span><span class="token operator">:</span> <span class="token string">"Subtitle"</span><span class="token punctuation">,</span> <span class="token property">"image"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"example.png"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://images.pexels.com/photos/34950/pexels-photo.jpg"</span><span class="token punctuation">,</span> <span class="token property">"content_type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span><span class="token punctuation">,</span> <span class="token property">"size"</span><span class="token operator">:</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token property">"width"</span><span class="token operator">:</span> <span class="token number">640</span><span class="token punctuation">,</span> <span class="token property">"height"</span><span class="token operator">:</span> <span class="token number">480</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"buttons"</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">"message"</span><span class="token punctuation">,</span> <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token property">"postback_id"</span><span class="token operator">:</span> <span class="token string">"send_message"</span><span class="token punctuation">,</span> <span class="token property">"user_ids"</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">"value"</span><span class="token operator">:</span> <span class="token string">"text"</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>This is how it would look in the Chat Widget:</p><div class="rm-preview"><div style="display:flex;justify-content:center"><div class="lc-zlkg8f emwkn670"><div name="example.png" class="lc-1ioj23f evmhqt80"><div class="lc-zjv1by e9ztsyy1"><img alt="" src="https://images.pexels.com/photos/34950/pexels-photo.jpg" class="lc-194a1s2 e9ztsyy0"/></div></div><div class="lc-14py9nr e1ykjxgu0"><div class="lc-1ja91m6 e9xf8br0">Title</div><div class="lc-11f3o7c e1fut3qs0">Subtitle</div></div><div class="lc-izun0c edowbh60"><button class="e121y1dq0 lc-1hrf8az e1972fzd0">text</button></div></div></div></div><p>Let's go through each element:</p><ul><li><code>template_id</code> - defines how every Rich Message will be presented. It could be either <code>cards</code>, which covers both Cards and Carousels, or <code>quick_replies</code>, which corresponds to Quick Replies. This is a required parameter.</li><li><code>elements</code> - optional; an array of elements included in a Rich Message, for example, multiple Cards. The maximum number of elements is 10.</li><li><code>elements.title</code> and <code>elements.subtitle</code> - both optional; display formatted text on Cards.</li><li><code>elements.image</code> - optional; displays images on Cards. Optional parameters are the following: <code>name</code>, <code>url</code>, <code>content_type</code>, <code>size</code>, <code>width</code>, <code>height</code>.</li><li><code>elements.buttons</code> - optional; an array of displayed buttons. The maximum number of buttons is 11 (13 if using API in version 3.3 and above). They can have the following parameters (all required if the <code>elements.buttons</code> is included):<ul><li><code>elements.buttons.text</code> - text to be displayed on the button.</li><li><code>elements.buttons.type</code> - defines the behavior after a user clicks the button. It might have the following values:<ul><li><code>webview</code> - opens a <a href="/docs/extending-ui/extending-chat-widget/chat-widget-moments">Moment</a>.</li><li><code>message</code> - sends a message postback in the chat.</li><li><code>url</code> - opens a given URL in a new tab.</li><li><code>phone</code> - allows Customers to call the number given directly from the chat.</li></ul></li><li><code>elements.buttons.postback_id</code> - a description of the sent action.</li><li><code>elements.buttons.user_ids</code> - an array of the users who clicked the button. It can be empty.</li><li><code>elements.buttons.value</code> - defines what value the button should have depending on its type. It's either a URL to be opened in a Moment or in a new tab, or a phone number to call. For the <code>message</code> type, it is not a message that would be sent after clicking. In this case, the message is always equal to the <code>label</code> property.</li><li><code>elements.buttons.webview_height</code> - required only if the <code>type</code> of the button is set to <code>webview</code>. It defines the size of the Moment shown to the user. It might be set to <code>compact</code>, <code>tall</code> or <code>full</code>.</li></ul></li></ul><p>Since most of these parameters are optional, you have a lot of freedom and a number of possibilities to unleash your creativity.</p><h2 class="heading css-1679d3t"><a id="usage-examples" href="#usage-examples" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#usage-examples"><span class="icon icon-link"></span></a>Usage examples</a></h2><p>Now, when the power of Rich Messages is revealed, we can test out some of the opportunities they give us.</p><h3 class="heading"><a id="predefined-answers-to-choose-from" href="#predefined-answers-to-choose-from" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#predefined-answers-to-choose-from"><span class="icon icon-link"></span></a>Predefined answers to choose from</a></h3><p>Imagine that you repeatedly ask your Customers the same questions, and there's a limited number of answers you get. For example, if you run the support, it might be "Which OS are you using?". You'd like to know if it's "Windows", "MacOS" or "Other", so you can easily guide Customers through the process of gaining data. You can use <code>quick_replies</code> to do that:</p><div class="css-16prjg8"><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">"template_id"</span><span class="token operator">:</span> <span class="token string">"quick_replies"</span><span class="token punctuation">,</span> <span class="token property">"elements"</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">"What OS are you using?"</span><span class="token punctuation">,</span> <span class="token property">"buttons"</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">"message"</span><span class="token punctuation">,</span> <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"Windows"</span><span class="token punctuation">,</span> <span class="token property">"postback_id"</span><span class="token operator">:</span> <span class="token string">"send_message"</span><span class="token punctuation">,</span> <span class="token property">"user_ids"</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">"value"</span><span class="token operator">:</span> <span class="token string">"Windows"</span> <span class="token punctuation">}</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">"message"</span><span class="token punctuation">,</span> <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"MacOS"</span><span class="token punctuation">,</span> <span class="token property">"postback_id"</span><span class="token operator">:</span> <span class="token string">"send_message"</span><span class="token punctuation">,</span> <span class="token property">"user_ids"</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">"value"</span><span class="token operator">:</span> <span class="token string">"MacOS"</span> <span class="token punctuation">}</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">"message"</span><span class="token punctuation">,</span> <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"Other"</span><span class="token punctuation">,</span> <span class="token property">"postback_id"</span><span class="token operator">:</span> <span class="token string">"send_message"</span><span class="token punctuation">,</span> <span class="token property">"user_ids"</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">"value"</span><span class="token operator">:</span> <span class="token string">"Other"</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>After sending, this is how it would look in the Chat Widget:</p><div class="rm-preview"><div style="max-width:300px;margin-left:auto;margin-right:auto"><div class="lc-5t9o7j emwkn670"><div class="lc-1glynz2 eovu8nx0"><span class="Linkify">What OS are you using?</span></div></div><div class="lc-581xgb e1dnb9qc0"><button value="0" class="ecz5hmt0 lc-14tumxj e1gt5po80">Windows</button><button value="1" class="ecz5hmt0 lc-14tumxj e1gt5po80">MacOS</button><button value="2" class="ecz5hmt0 lc-14tumxj e1gt5po80">Other</button></div></div></div><p>Now, after a user clicks the button, it will send the appropriate message right in the chat. Easy!</p><h3 class="heading"><a id="leaving-contact-info" href="#leaving-contact-info" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#leaving-contact-info"><span class="icon icon-link"></span></a>Leaving contact info</a></h3><p>Sometimes, your process involves calls with Customers. What you could do is send your phone number as text, but it can lead to misunderstandings if someone copies the number incorrectly. Use Rich Messages to tackle this problem, and improve your communication with Customers.</p><div class="css-16prjg8"><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">"template_id"</span><span class="token operator">:</span> <span class="token string">"cards"</span><span class="token punctuation">,</span> <span class="token property">"elements"</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">"Support"</span><span class="token punctuation">,</span> <span class="token property">"subtitle"</span><span class="token operator">:</span> <span class="token string">"Click 'Call' button to connect directly with our support. We work 24/7!"</span><span class="token punctuation">,</span> <span class="token property">"buttons"</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">"phone"</span><span class="token punctuation">,</span> <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"Call"</span><span class="token punctuation">,</span> <span class="token property">"postback_id"</span><span class="token operator">:</span> <span class="token string">"action_call"</span><span class="token punctuation">,</span> <span class="token property">"user_ids"</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">"value"</span><span class="token operator">:</span> <span class="token string">"0123456789"</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>This will display a Card with a button that opens Customers' default phone application:</p><div class="rm-preview"><div style="display:flex;justify-content:center"><div class="lc-zlkg8f emwkn670"><div class="lc-14py9nr e1ykjxgu0"><div class="lc-1ja91m6 e9xf8br0">Support</div><div class="lc-11f3o7c e1fut3qs0">Click 'Call' button to connect directly with our support. We work 24/7!</div></div><div class="lc-izun0c edowbh60"><a href="tel:0123456789" rel="nofollow noopener" target="_parent" class="e121y1dq0 lc-1hrf8az e1972fzd0">Call</a></div></div></div></div><h3 class="heading"><a id="showing-off-your-products" href="#showing-off-your-products" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#showing-off-your-products"><span class="icon icon-link"></span></a>Showing off your products</a></h3><p>If you run an online shop, there must be dozens of situations when Customers ask for your advice. With the use of Rich Messages, you can present your goods with links in the form of a Carousel:</p><div class="css-16prjg8"><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">"template_id"</span><span class="token operator">:</span> <span class="token string">"cards"</span><span class="token punctuation">,</span> <span class="token property">"elements"</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">"Tomatoes"</span><span class="token punctuation">,</span> <span class="token property">"subtitle"</span><span class="token operator">:</span> <span class="token string">"The tomato is the edible, often red, berry of the plant Solanum lycopersicum, commonly known as a tomato plant. They are also very tasty!"</span><span class="token punctuation">,</span> <span class="token property">"image"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://images.pexels.com/photos/1327838/pexels-photo-1327838.jpeg"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"buttons"</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">"url"</span><span class="token punctuation">,</span> <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"Open link"</span><span class="token punctuation">,</span> <span class="token property">"postback_id"</span><span class="token operator">:</span> <span class="token string">"open_url"</span><span class="token punctuation">,</span> <span class="token property">"user_ids"</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">"value"</span><span class="token operator">:</span> <span class="token string">"https://example.org/?product1"</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 property">"title"</span><span class="token operator">:</span> <span class="token string">"Cucumber"</span><span class="token punctuation">,</span> <span class="token property">"subtitle"</span><span class="token operator">:</span> <span class="token string">"There are three main varieties of cucumber: slicing, pickling, and seedless. Within these varieties, several cultivars have been created."</span><span class="token punctuation">,</span> <span class="token property">"image"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://images.pexels.com/photos/37528/cucumber-salad-food-healthy-37528.jpeg"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"buttons"</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">"url"</span><span class="token punctuation">,</span> <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"Open link"</span><span class="token punctuation">,</span> <span class="token property">"postback_id"</span><span class="token operator">:</span> <span class="token string">"open_url"</span><span class="token punctuation">,</span> <span class="token property">"user_ids"</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">"value"</span><span class="token operator">:</span> <span class="token string">"https://example.org/?product2"</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 property">"title"</span><span class="token operator">:</span> <span class="token string">"Potatoe"</span><span class="token punctuation">,</span> <span class="token property">"subtitle"</span><span class="token operator">:</span> <span class="token string">"Potatoe is a root vegetable, very popular around the world. With the potatoe, you can do a lot, for example prepare awesome french fries."</span><span class="token punctuation">,</span> <span class="token property">"image"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://images.pexels.com/photos/144248/potatoes-vegetables-erdfrucht-bio-144248.jpeg"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"buttons"</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">"url"</span><span class="token punctuation">,</span> <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"Open link"</span><span class="token punctuation">,</span> <span class="token property">"postback_id"</span><span class="token operator">:</span> <span class="token string">"open_url"</span><span class="token punctuation">,</span> <span class="token property">"user_ids"</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">"value"</span><span class="token operator">:</span> <span class="token string">"https://example.org/?product3"</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>Here's what your Customer will see in the Chat Widget:</p><div class="rm-preview"><div style="max-width:300px;margin-left:auto;margin-right:auto;border:1px solid rgba(0, 0, 0, 0.1);border-radius:10px;width:100%;box-shadow:rgba(0, 0, 0, 0.25) 0px 4px 16px"><div style="margin:3px"><div class="lc-1c6iwss epptpc30"><div class="lc-1ki88ka epptpc31"><div class="lc-1dy741i epptpc32"><div class="lc-zlkg8f emwkn670"><div class="lc-1ioj23f evmhqt80"><div class="lc-zjv1by e9ztsyy1"><img alt="" src="https://images.pexels.com/photos/1327838/pexels-photo-1327838.jpeg" class="lc-194a1s2 e9ztsyy0"/></div></div><div class="lc-14py9nr e1ykjxgu0"><div class="lc-1ja91m6 e9xf8br0">Tomatoes</div><div class="lc-11f3o7c e1fut3qs0">The tomato is the edible, often red, berry of the plant Solanum lycopersicum, commonly known as a tomato plant. They are also very tasty!</div></div><div class="lc-izun0c edowbh60"><a href="https://example.org/?product1" rel="nofollow noopener" target="_blank" class="e121y1dq0 lc-1hrf8az e1972fzd0">Open link</a></div></div></div><div class="lc-1dy741i epptpc32"><div class="lc-zlkg8f emwkn670"><div class="lc-1ioj23f evmhqt80"><div class="lc-zjv1by e9ztsyy1"><img alt="" src="https://images.pexels.com/photos/37528/cucumber-salad-food-healthy-37528.jpeg" class="lc-194a1s2 e9ztsyy0"/></div></div><div class="lc-14py9nr e1ykjxgu0"><div class="lc-1ja91m6 e9xf8br0">Cucumber</div><div class="lc-11f3o7c e1fut3qs0">There are three main varieties of cucumber: slicing, pickling, and seedless. Within these varieties, several cultivars have been created.</div></div><div class="lc-izun0c edowbh60"><a href="https://example.org/?product2" rel="nofollow noopener" target="_blank" class="e121y1dq0 lc-1hrf8az e1972fzd0">Open link</a></div></div></div><div class="lc-1dy741i epptpc32"><div class="lc-zlkg8f emwkn670"><div class="lc-1ioj23f evmhqt80"><div class="lc-zjv1by e9ztsyy1"><img alt="" src="https://images.pexels.com/photos/144248/potatoes-vegetables-erdfrucht-bio-144248.jpeg" class="lc-194a1s2 e9ztsyy0"/></div></div><div class="lc-14py9nr e1ykjxgu0"><div class="lc-1ja91m6 e9xf8br0">Potatoe</div><div class="lc-11f3o7c e1fut3qs0">Potatoe is a root vegetable, very popular around the world. With the potatoe, you can do a lot, for example prepare awesome french fries.</div></div><div class="lc-izun0c edowbh60"><a href="https://example.org/?product3" rel="nofollow noopener" target="_blank" class="e121y1dq0 lc-1hrf8az e1972fzd0">Open link</a></div></div></div></div></div></div></div></div><p>This way, they can visit product pages and review them much more easily!</p><h3 class="heading"><a id="sharing-knowledge-with-your-customer" href="#sharing-knowledge-with-your-customer" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#sharing-knowledge-with-your-customer"><span class="icon icon-link"></span></a>Sharing knowledge with your Customer</a></h3><p><a href="/docs/extending-ui/extending-chat-widget/chat-widget-moments">Moments</a> are powerful apps with the button type <code>webview</code>. However, <code>webview</code> can also contain static websites. Let's assume, once again, that you run a support team and would like to share an article explaining simple steps to follow:</p><div class="css-16prjg8"><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">"template_id"</span><span class="token operator">:</span> <span class="token string">"cards"</span><span class="token punctuation">,</span> <span class="token property">"elements"</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">"How to?"</span><span class="token punctuation">,</span> <span class="token property">"subtitle"</span><span class="token operator">:</span> <span class="token string">"Let me guide you through the simple steps you should follow."</span><span class="token punctuation">,</span> <span class="token property">"buttons"</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">"webview"</span><span class="token punctuation">,</span> <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"Open link"</span><span class="token punctuation">,</span> <span class="token property">"postback_id"</span><span class="token operator">:</span> <span class="token string">"open_url"</span><span class="token punctuation">,</span> <span class="token property">"user_ids"</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">"value"</span><span class="token operator">:</span> <span class="token string">"https://example.org/?how-to"</span><span class="token punctuation">,</span> <span class="token property">"webview_height"</span><span class="token operator">:</span> <span class="token string">"full"</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>It will show a simple Card with a button, which opens the article right in the chat upon clicking:</p><div class="rm-preview"><div style="display:flex;justify-content:center"><div class="lc-zlkg8f emwkn670"><div class="lc-14py9nr e1ykjxgu0"><div class="lc-1ja91m6 e9xf8br0">How to?</div><div class="lc-11f3o7c e1fut3qs0">Let me guide you through the simple steps you should follow.</div></div><div class="lc-izun0c edowbh60"><button class="e121y1dq0 lc-1hrf8az e1972fzd0">Open link</button></div></div></div></div><h2 class="heading css-1679d3t"><a id="how-to-use-rich-messages-in-livechat" href="#how-to-use-rich-messages-in-livechat" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#how-to-use-rich-messages-in-livechat"><span class="icon icon-link"></span></a>How to use Rich Messages in LiveChat?</a></h2><p>Currently, there are several ways to use Rich Messages in LiveChat.</p><h3 class="heading"><a id="chatbot" href="#chatbot" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#chatbot"><span class="icon icon-link"></span></a>ChatBot</a></h3><p>Rich Messages are an essential feature of <a href="https://www.livechat.com/chatbot/">ChatBot</a>. Thanks to Rich Messages, communication between Bots and Customers is less complicated. You can make sure that Customers follow the exact interactions you thought of. With <a href="https://www.livechat.com/help/rich-messages/">Rich Messages</a> and an easy-to-use ChatBot configurator, your Customers' chatting experience will be smooth and satisfying.</p><div class="css-v3memn"><style data-emotion-css="m4nlwc">.css-m4nlwc{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(690 / 800 * 100%);}</style><div class="css-m4nlwc"><img alt="Chatbot integration" src="/docs/images/extending-chat-widget/chatbot-integration.png" decoding="async" class="css-5r33xa"/></div></div><h3 class="heading"><a id="marketplace" href="#marketplace" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#marketplace"><span class="icon icon-link"></span></a>Marketplace</a></h3><p>There's a lot of apps on the LiveChat <a href="https://www.livechat.com/marketplace/">Marketplace</a> that make use of Rich Messages.</p><p>If you have used BigCommerce to set up your online store and LiveChat to communicate with Customers, you should try out our <a href="https://www.livechat.com/help/product-cards-bigcommerce/">Product Cards for Big Commerce</a> app. After installation, you can send the previews of your products to Customers directly from the Agent App. They'll be presented as Cards or Carousels:</p><div class="css-v3memn"><style data-emotion-css="10rllon">.css-10rllon{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(465 / 800 * 100%);}</style><div class="css-10rllon"><img alt="Product Cards" src="/docs/images/extending-chat-widget/product-cards.png" decoding="async" class="css-5r33xa"/></div></div><p>Another app that might be useful if you have an account on <a target="_blank" href="https://www.knowledgebase.com/">KnowledgeBase</a>, is the <a href="https://www.livechat.com/marketplace/apps/knowledge-base/">KnowledgeBase integration</a>. It allows you to send your articles as Cards, making them much more engaging for your Customers.</p><p>There's also the <a href="https://www.livechat.com/marketplace/apps/calendly/">Calendly integration</a>. It sends a Rich Message opening a Moment app, which allows your Customers to schedule a meeting within the chat:</p><div class="css-v3memn"><style data-emotion-css="49s4rl">.css-49s4rl{box-sizing:border-box;display:block;max-width:100%;padding-top:calc(450 / 800 * 100%);}</style><div class="css-49s4rl"><img alt="Calendly Integration" src="/docs/images/extending-chat-widget/calendly.png" decoding="async" class="css-5r33xa"/></div></div><p>The <a href="https://www.livechat.com/marketplace/apps/joinme/">Join.me integration</a> is yet another example. It allows you to send to Customers invitations to sessions. The invitations are in the form of Cards with buttons. Upon clicking, the button opens screen sharing, which makes the whole experience simple and seamless!</p><p>If you feel inspired to create your own app, be sure to check our tutorial on <a href="/docs/getting-started/livechat-apps">Building LiveChat apps</a>!</p><h3 class="heading"><a id="agent-app-sdk" href="#agent-app-sdk" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#agent-app-sdk"><span class="icon icon-link"></span></a>Agent App SDK</a></h3><p>Agent App SDK introduces the MessageBox integration. This is where you can create your own application that will give Agents a possibility to send all Rich Messages you want. The documentation is available <a href="/docs/extending-agent-app/agent-app-sdk#messagebox">here</a>. Keep in mind that this would require some programming knowledge.</p><h3 class="heading"><a id="agent-chat-and-customer-chat-apis" href="#agent-chat-and-customer-chat-apis" class="reference css-180507a"><a href="/docs/extending-chat-widget/rich-messages#agent-chat-and-customer-chat-apis"><span class="icon icon-link"></span></a>Agent Chat and Customer Chat APIs</a></h3><p>Both the <a href="/docs/messaging/agent-chat-api">Agent Chat API</a> and <a href="/docs/messaging/customer-chat-api">Customer Chat API</a> handle Rich Messages. Whether you decide to build your own chat or create your own Bot, you can make use of them.</p><style data-emotion-css="1fsewzh">.css-1fsewzh{margin-top:50px;}.css-1fsewzh > label{margin:0 0 5px 0;}.css-1fsewzh label + div{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}</style></article></div><p>...</p></div><style data-emotion-css="1mpu5jj">.css-1mpu5jj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#f6f6f7;color:#424d57;min-height:248px;margin-bottom:45px;}@media (min-width:768px){.css-1mpu5jj{margin-bottom:0px;}}</style><div class="css-1mpu5jj"><style data-emotion-css="dtzkur">.css-dtzkur{width:100%;padding:20px;}@media (min-width:768px){.css-dtzkur{margin-top:75px;padding:0;width:160px;}}</style><div class="css-dtzkur"><style data-emotion-css="r8rj3w">.css-r8rj3w{font-weight:600;font-size:16px;line-height:24px;color:#424d57;}</style><div class="css-r8rj3w">Join the community</div><style data-emotion-css="1ws0nkq">.css-1ws0nkq{font-weight:400;font-size:12px;line-height:20px;color:#424d57;}</style><div class="css-1ws0nkq">Get in direct contact with us through Discord.</div><style data-emotion-css="652pjx">.css-652pjx:hover{-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://discord.gg/MGFyhbdFxt" target="_blank" rel="noopener noreferrer" class="css-652pjx"><style data-emotion-css="y77wuh">.css-y77wuh{margin-top:5px;}</style><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_613_10386)"><path d="M16.9308 1.63294C15.6561 1.04804 14.2892 0.617109 12.8599 0.370298C12.8339 0.365535 12.8079 0.377439 12.7945 0.401247C12.6187 0.713926 12.4239 1.12184 12.2876 1.44246C10.7503 1.21232 9.22099 1.21232 7.71527 1.44246C7.57887 1.11471 7.37707 0.713926 7.20048 0.401247C7.18707 0.378233 7.16107 0.366329 7.13504 0.370298C5.70659 0.616321 4.33963 1.04725 3.06411 1.63294C3.05307 1.6377 3.04361 1.64564 3.03732 1.65595C0.444493 5.52959 -0.265792 9.30801 0.0826501 13.0396C0.0842267 13.0578 0.0944749 13.0753 0.108665 13.0864C1.81934 14.3427 3.47642 15.1054 5.10273 15.6109C5.12876 15.6188 5.15634 15.6093 5.1729 15.5879C5.55761 15.0625 5.90054 14.5086 6.19456 13.926C6.21192 13.8919 6.19535 13.8514 6.15989 13.838C5.61594 13.6316 5.098 13.38 4.59977 13.0943C4.56037 13.0713 4.55721 13.015 4.59347 12.988C4.69831 12.9094 4.80318 12.8277 4.9033 12.7451C4.92141 12.7301 4.94665 12.7269 4.96794 12.7364C8.24107 14.2308 11.7846 14.2308 15.0191 12.7364C15.0404 12.7261 15.0657 12.7293 15.0846 12.7443C15.1847 12.8269 15.2895 12.9094 15.3952 12.988C15.4314 13.015 15.4291 13.0713 15.3897 13.0943C14.8914 13.3856 14.3735 13.6316 13.8288 13.8372C13.7933 13.8507 13.7775 13.8919 13.7949 13.926C14.0952 14.5078 14.4381 15.0617 14.8157 15.5871C14.8315 15.6093 14.8599 15.6188 14.8859 15.6109C16.5201 15.1054 18.1772 14.3427 19.8879 13.0864C19.9028 13.0753 19.9123 13.0586 19.9139 13.0404C20.3309 8.72626 19.2154 4.97883 16.9568 1.65674C16.9513 1.64564 16.9419 1.6377 16.9308 1.63294ZM6.68335 10.7674C5.69792 10.7674 4.88594 9.86274 4.88594 8.75167C4.88594 7.6406 5.68217 6.7359 6.68335 6.7359C7.69239 6.7359 8.49651 7.64855 8.48073 8.75167C8.48073 9.86274 7.68451 10.7674 6.68335 10.7674ZM13.329 10.7674C12.3435 10.7674 11.5316 9.86274 11.5316 8.75167C11.5316 7.6406 12.3278 6.7359 13.329 6.7359C14.338 6.7359 15.1421 7.64855 15.1264 8.75167C15.1264 9.86274 14.338 10.7674 13.329 10.7674Z" fill="#424D57"></path></g><defs><clipPath id="clip0_613_10386"><rect width="20" height="15.493" fill="white" transform="translate(0 0.25354)"></rect></clipPath></defs></svg></i><div>Discord</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Follow us</div><div class="css-1ws0nkq">Follow our insightful tweets and interact with our content.</div><a href="https://x.com/TextPlatform" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 11 4 C 7.1456661 4 4 7.1456661 4 11 L 4 39 C 4 42.854334 7.1456661 46 11 46 L 39 46 C 42.854334 46 46 42.854334 46 39 L 46 11 C 46 7.1456661 42.854334 4 39 4 L 11 4 z M 11 6 L 39 6 C 41.773666 6 44 8.2263339 44 11 L 44 39 C 44 41.773666 41.773666 44 39 44 L 11 44 C 8.2263339 44 6 41.773666 6 39 L 6 11 C 6 8.2263339 8.2263339 6 11 6 z M 13.085938 13 L 22.308594 26.103516 L 13 37 L 15.5 37 L 23.4375 27.707031 L 29.976562 37 L 37.914062 37 L 27.789062 22.613281 L 36 13 L 33.5 13 L 26.660156 21.009766 L 21.023438 13 L 13.085938 13 z M 16.914062 15 L 19.978516 15 L 34.085938 35 L 31.021484 35 L 16.914062 15 z"></path></svg></i><div>X (Twitter)</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contribute</div><div class="css-1ws0nkq">See something that's wrong or unclear? Submit a pull request.</div><a href="https://github.com/livechat/livechat-public-docs" target="_blank" rel="noopener noreferrer" class="css-652pjx"><button class="lc-btn lc-btn--secondary lc-btn--compact css-y77wuh" type="button"><i class="lc-btn__icon lc-btn__icon-left"><svg width="24" height="24" class="rmi rmi-github undefined" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"></path></svg></i><div>GitHub</div></button></a></div><div class="css-dtzkur"><div class="css-r8rj3w">Contact us</div><div class="css-1ws0nkq">Want to share feedback? Reach us at: <a href="mailto:developers@text.com">developers@text.com</a></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/extending-chat-widget/rich-messages","query":{},"buildId":"SzDcSB4SOV9RvDUdpbGME","assetPrefix":"/docs","runtimeConfig":{},"nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/docs/_next/static/chunks/polyfills-c2dc1d9251306528e50c.js"></script><script src="/docs/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js" async=""></script><script src="/docs/_next/static/chunks/framework.57a22ac5870571c2eff5.js" async=""></script><script src="/docs/_next/static/chunks/commons.0889bf71124535c6c4cd.js" async=""></script><script src="/docs/_next/static/chunks/main-7bb61c4f8d40f1e634e9.js" async=""></script><script src="/docs/_next/static/chunks/pages/_app-06a3a99d73e91e62445b.js" async=""></script><script src="/docs/_next/static/chunks/f66b9295.f9eceaafe4216b86326e.js" async=""></script><script src="/docs/_next/static/chunks/b31dc3a52fd33fe1943f491eae223576a0413e10.de74f486eb1da22b5155.js" async=""></script><script src="/docs/_next/static/chunks/067aff065064306958fa97cea949633bebf95d70.37b3e3ef116317d8771b.js" async=""></script><script src="/docs/_next/static/chunks/pages/extending-chat-widget/rich-messages-939267b8b7391bfc7f15.js" async=""></script><script src="/docs/_next/static/SzDcSB4SOV9RvDUdpbGME/_buildManifest.js" async=""></script><script src="/docs/_next/static/SzDcSB4SOV9RvDUdpbGME/_ssgManifest.js" async=""></script></body></html>