text: (window.webpackJsonp=window.webpackJsonp||[]).push([[1923],{"013z":function(e,t,a){"use strict";var i=a("q1tI"),n=a.n(i),s=a("NmYn"),c=a.n(s),b=a("Wbzz"),o=a("Xrax"),r=a("a7k6"),l=a("TSYQ"),g=a.n(l),p=a("QH2O"),d=a("qKvR");var A=({title:e,tabs:t=[]})=>Object(d.b)("div",{className:g()(p.pageHeader,{[p.withTabs]:t.length})},Object(d.b)("div",{className:"bx--grid"},Object(d.b)("div",{className:"bx--row"},Object(d.b)("div",{className:"bx--col-lg-12"},Object(d.b)("h1",{id:"page-title",className:p.text},e))))),m=a("BAC9");var h=({relativePagePath:e,repository:t})=>{const{site:{siteMetadata:{repository:a}}}=Object(b.useStaticQuery)("1364590287"),{baseUrl:i,subDirectory:n,branch:s}=t||a,c=`${i}/edit/${s}${n}/src/pages${e}`;return i?Object(d.b)("div",{className:"bx--row "+m.row},Object(d.b)("div",{className:"bx--col"},Object(d.b)("a",{className:m.link,href:c},"Edit this page on GitHub"))):null},u=a("FCXl"),f=a("I8xM");class w extends n.a.Component{render(){const{tabs:e,slug:t}=this.props,a=t.split("/").filter(Boolean).slice(-1)[0],i=e.map(e=>{const i=c()(e,{lower:!0,strict:!0}),n=i===a,s=new RegExp(a+"/?(#.*)?$"),o=t.replace(s,i);return Object(d.b)("li",{key:e,className:g()({[f.selectedItem]:n},f.listItem)},Object(d.b)(b.Link,{className:f.link,to:""+o},e))});return Object(d.b)("div",{className:f.tabsContainer},Object(d.b)("div",{className:"bx--grid"},Object(d.b)("div",{className:"bx--row"},Object(d.b)("div",{className:"bx--col-lg-12 bx--col-no-gutter"},Object(d.b)("nav",null,Object(d.b)("ul",{className:f.list},i))))))}}var y=w,O=a("MjG9");t.a=({pageContext:e,children:t,location:a,Title:i})=>{const{frontmatter:n={},relativePagePath:s,titleType:l}=e,{tabs:g,title:p,theme:m,description:f,keywords:w}=n,{site:{pathPrefix:x}}=Object(b.useStaticQuery)("2456312558"),v=x?a.pathname.replace(x,""):a.pathname,j=g?v.split("/").filter(Boolean).slice(-1)[0]||c()(g[0],{lower:!0}):"";return Object(d.b)(r.a,{tabs:g,homepage:!1,theme:m,pageTitle:p,pageDescription:f,pageKeywords:w,titleType:l},Object(d.b)(A,{title:i?Object(d.b)(i,null):p,label:"label",tabs:g}),g&&Object(d.b)(y,{slug:v,tabs:g,currentTab:j}),Object(d.b)(O.a,{padded:!0},t,Object(d.b)(h,{relativePagePath:s})),Object(d.b)(u.a,{pageContext:e,location:a,slug:v,tabs:g,currentTab:j}),Object(d.b)(o.a,null))}},BAC9:function(e,t,a){e.exports={bxTextTruncateEnd:"EditLink-module--bx--text-truncate--end--2pqje",bxTextTruncateFront:"EditLink-module--bx--text-truncate--front--3_lIE",link:"EditLink-module--link--1qzW3",row:"EditLink-module--row--1B9Gk"}},I8xM:function(e,t,a){e.exports={bxTextTruncateEnd:"PageTabs-module--bx--text-truncate--end--267NA",bxTextTruncateFront:"PageTabs-module--bx--text-truncate--front--3xEQF",tabsContainer:"PageTabs-module--tabs-container--8N4k0",list:"PageTabs-module--list--3eFQc",listItem:"PageTabs-module--list-item--nUmtD",link:"PageTabs-module--link--1mDJ1",selectedItem:"PageTabs-module--selected-item--YPVr3"}},QH2O:function(e,t,a){e.exports={bxTextTruncateEnd:"PageHeader-module--bx--text-truncate--end--mZWeX",bxTextTruncateFront:"PageHeader-module--bx--text-truncate--front--3zvrI",pageHeader:"PageHeader-module--page-header--3hIan",withTabs:"PageHeader-module--with-tabs--3nKxA",text:"PageHeader-module--text--o9LFq"}},g7BS:function(e,t,a){"use strict";a.r(t),a.d(t,"_frontmatter",(function(){return b})),a.d(t,"default",(function(){return m}));a("3bBZ"),a("q1tI");var i=a("7ljp"),n=a("013z");a("qKvR");function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var i in a)Object.prototype.hasOwnProperty.call(a,i)&&(e[i]=a[i])}return e}).apply(this,arguments)}function c(e,t){if(null==e)return{};var a,i,n=function(e,t){if(null==e)return{};var a,i,n={},s=Object.keys(e);for(i=0;i<s.length;i++)a=s[i],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i<s.length;i++)a=s[i],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}const b={},o=e=>function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),Object(i.b)("div",t)},r=o("PageDescription"),l=o("InlineNotification"),g=o("AnchorLinks"),p=o("AnchorLink"),d={_frontmatter:b},A=n.a;function m(e){let{components:t}=e,a=c(e,["components"]);return Object(i.b)(A,s({},d,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)(r,{mdxType:"PageDescription"},Object(i.b)("p",null,"Depending on the complexity of the use case and user needs, chatbots may require\nother interactions that supplement the conversational experience.")),Object(i.b)(l,{mdxType:"InlineNotification"},Object(i.b)("p",null,Object(i.b)("strong",{parentName:"p"},"Note:")," This page documents some common chatbot scenarios in IBM products and\ntheir recommended best practices. Flows still under consideration are marked\nwith “Experimental”.")),Object(i.b)(g,{mdxType:"AnchorLinks"},Object(i.b)(p,{mdxType:"AnchorLink"},"Launching a bot"),Object(i.b)(p,{mdxType:"AnchorLink"},"Multiple threads"),Object(i.b)(p,{mdxType:"AnchorLink"},"Expanding cards"),Object(i.b)(p,{mdxType:"AnchorLink"},"Error states")),Object(i.b)("h2",null,"Launching a bot"),Object(i.b)("p",null,"Bots should be launched from a button positioned at the bottom right of the\nscreen, or from a button embedded within the UI. See Carbon Chatbot Add-on\nDesign Kit for the appropriate variants."),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"50%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAA00lEQVQoz6WSXQ6CMBCEvf89fPAgJp7B8AABjQ+ayF9bCtuRgaCUGIpxk0mh3f0623aHPpxzqwrlzNd3a8ki4hXwf6m/gF3XwVrriXObgUyegIymaVBVFeq6HsRvQn8C0uUUxhjkeY6iKN7iJkHg1OoSqHsgXSmlBoebgPPDduIDldJI0xRJEiPLLiiLZ99y0OFYLOKgGoI/F0NnURQhjglMcbvnUDrkcCh2eJSC/dEQPWxCsT22qvQ4fzhZnK/jpUio5bbtUOv26zvk2VLGchTP4QuXRhQKto+xewAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Launching a bot",title:"Launching a bot",src:"/static/e5b4f571dfb3845d9b14adc51ee6ca3c/3cbba/chatbot-5.png",srcSet:["/static/e5b4f571dfb3845d9b14adc51ee6ca3c/7fc1e/chatbot-5.png 288w","/static/e5b4f571dfb3845d9b14adc51ee6ca3c/a5df1/chatbot-5.png 576w","/static/e5b4f571dfb3845d9b14adc51ee6ca3c/3cbba/chatbot-5.png 1152w","/static/e5b4f571dfb3845d9b14adc51ee6ca3c/0b124/chatbot-5.png 1728w","/static/e5b4f571dfb3845d9b14adc51ee6ca3c/4ea69/chatbot-5.png 2304w","/static/e5b4f571dfb3845d9b14adc51ee6ca3c/25a5b/chatbot-5.png 2400w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)("h2",null,"Multiple threads (Experimental)"),Object(i.b)("p",null,"When a bot cannot complete a request, the bot detects frustration, or the user\nwould simply prefer interacting with a person, it becomes necessary to connect\nthe user to a human agent."),Object(i.b)("h3",null,"User initiates change"),Object(i.b)("p",null,"Sometimes, a user indicates that they would like to chat with a human. Other\ntimes, this process can be suggested if a bot is repeatedly unsuccessful in\nanswering a user’s question."),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"48.958333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAA10lEQVQoz6WSvQ6CMBSFeXQm3oEHYWMjTKxODqhgiGCw2B8o0HKENhoHdagnbdqe3H45yb0ePmhZFrM3EaYwyHF9ayilXv57zbu870B7L2qOS3OF6DkYY5imyQ34POUgIIQA5xY4z7NrQltMKUUYhvB9H0EQoK5r42ut3YBt2yLLMiRJgjRNTUq3hLAf6J0iP+SIoghxHJvEzsBtEUJwLkucTkdUVYXx36YwLtZUHLeuw51cV1fZCXAFil6Cst6AdsWIfWUTatcub2MipVzNGXmjUbbLT+ADA8sOgRqBUDAAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"User initiates change",title:"User initiates change",src:"/static/7d5036d55a193da011d303f158aa4b0f/3cbba/chatbot-12.png",srcSet:["/static/7d5036d55a193da011d303f158aa4b0f/7fc1e/chatbot-12.png 288w","/static/7d5036d55a193da011d303f158aa4b0f/a5df1/chatbot-12.png 576w","/static/7d5036d55a193da011d303f158aa4b0f/3cbba/chatbot-12.png 1152w","/static/7d5036d55a193da011d303f158aa4b0f/0b124/chatbot-12.png 1728w","/static/7d5036d55a193da011d303f158aa4b0f/99571/chatbot-12.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)("h3",null,"Notify the user"),Object(i.b)("p",null,"Use a toast notification bar to indicate when the user is in a new conversation\ncontext, or that a new user has joined the the chat. Call out any significant\nchanges with in-conversation status messages."),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"48.958333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAAy0lEQVQoz62STQrCMBCFe2033sCthxD3eg43gogWUYKFtvltm6bJM02riBTB1oEww8zjYya8CIPh4JwLlS4VnDV9v/EjP/vQvEc0iGuFvXi5STFfSyy2DrOVxv7WhL61vwL7TLISZyIRE4HjlUMW9Ws2ClgVEqXiPgufGRozESilBOMcnAswxlDXE4FKKQghwvsLsAVRSv2GHNQD9VjgU0zzHMmdIM2y8IewdWebKSe3pzpTYReXOJDOk3bshsYYVFoHU58Si0vqvgIfz8QTGQLQV6QAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Notify the user",title:"Notify the user",src:"/static/7c4f2a84e1d9dd043b87efca322263a7/3cbba/chatbot-13.png",srcSet:["/static/7c4f2a84e1d9dd043b87efca322263a7/7fc1e/chatbot-13.png 288w","/static/7c4f2a84e1d9dd043b87efca322263a7/a5df1/chatbot-13.png 576w","/static/7c4f2a84e1d9dd043b87efca322263a7/3cbba/chatbot-13.png 1152w","/static/7c4f2a84e1d9dd043b87efca322263a7/0b124/chatbot-13.png 1728w","/static/7c4f2a84e1d9dd043b87efca322263a7/99571/chatbot-13.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)("h3",null,"Multiple users"),Object(i.b)("p",null,"Combining two or more human agents into the same thread is a common practice.\nWhere necessary, call out significant changes in who the user is addressing\n(particularly if they have different purposes)."),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"48.958333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAABWElEQVQoz5WSS0sDMRSF+4u7Km7dFirqjxBBRHDlxroTCq3FKS4cu5iF0s4D5pXJZJ7J8SbTimBpa+ASSHK+nJybHn4NpZSZ27aFEPnPmpQSTVNTVZuDsqutZqPTo7cLWFcVfG+NnKCcC8g6x+OC4+QqwuihwuldifuXDi5Jow4BtUPOORhjSNMUIucIwgzOKoEbFgiYQpK3WoHO4EFgY0CMZQaqq64KzKcT3N5cm1p+vHcOKY6DwIYchmEIliaUpUBZliRUGI+fMBqdYTgcYjqb/QPYNFivV7Be57AsC47jIKcIoigyF1WUsY5le34vcLtp2zYGgwH6/T7OLy5Npr7nGWgcx+C5+KPZ61A7cV0XQRDQu0rTGJeAnu+joO6rRkAdDaxrxOQkocYUIsOzXcILucmUZyl1WmCyLI93qGftsiKw/hqLTwkmJFr63Eq2SIXC25fcCfwG7acA4YWJPAoAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Multiple users",title:"Multiple users",src:"/static/93489695aae43e7f2c98739080335372/3cbba/chatbot-14.png",srcSet:["/static/93489695aae43e7f2c98739080335372/7fc1e/chatbot-14.png 288w","/static/93489695aae43e7f2c98739080335372/a5df1/chatbot-14.png 576w","/static/93489695aae43e7f2c98739080335372/3cbba/chatbot-14.png 1152w","/static/93489695aae43e7f2c98739080335372/0b124/chatbot-14.png 1728w","/static/93489695aae43e7f2c98739080335372/99571/chatbot-14.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)("h3",null,"Incoming messages"),Object(i.b)("p",null,"For new messages appearing in another thread, be sure to use dots above the\nThreads icon to alert the user of new messages. Then, within the menu, indicate\nthe amount of new messages on the specific thread. Visually distinguish threads\nwith new messages."),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"48.958333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAABPUlEQVQoz5VSXWvCMBT15wsO3J/Q1v/QvQ1E+jDGHjr24phgU0v6ka/WNslZElF8kE0vhHBvcs/9OGeCK7PWhtsYg77vgm+MxagN9DjA6OHy7s8555znbXILcBgG5CRH2zbgnENJjn3J8ZbtUNIKjHFIKe8HHMcRVUXRKRHAvdUNQ3GgkIJD+461vvz/F9AYje/tFqtVjDiOkCQJhuMRm80acRRhuYyQZdll/D8Bz49bBzifP2M2m2GxWIRYkrw4/wnT6RRpmt4HeD1yVfl9sRDzu6ydTynF0XX70Mh+bwUhIbmuazAuHEEtiqIIRXxMSPUAKa56WZbI830Agu4c08L5BIQU6DsJOyrYR1humsadFr1j+vWzB6ECzMlI8BY5VVh/9fd36G8PepKMxfuPAVMncVungFZZfOxuC/sXNGADHCOz0e8AAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Incoming messages",title:"Incoming messages",src:"/static/205db7c5224c1b9be270bc38b1a62127/3cbba/chatbot-15.png",srcSet:["/static/205db7c5224c1b9be270bc38b1a62127/7fc1e/chatbot-15.png 288w","/static/205db7c5224c1b9be270bc38b1a62127/a5df1/chatbot-15.png 576w","/static/205db7c5224c1b9be270bc38b1a62127/3cbba/chatbot-15.png 1152w","/static/205db7c5224c1b9be270bc38b1a62127/0b124/chatbot-15.png 1728w","/static/205db7c5224c1b9be270bc38b1a62127/99571/chatbot-15.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)("h2",null,"Expanding cards (Experimental)"),Object(i.b)("p",null,"Where needed, use expanding cards to progressively disclose content. Use a full\npage view to show a very large amount of content to the user."),Object(i.b)("h3",null,"Default state"),Object(i.b)("p",null,"Call out critical information in the default state. Provide a trigger to expand\nthe card."),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"48.958333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAAo0lEQVQoz62SSwvCMBCE+/9/nzfBQy42rUXS3Tya15hElB5EoWZgWZhdPmZhB3xQzrlV1Z0i3OarixjT29/v7DX8AoqRIacZxmgQEbz3x4Cv7gyDC2hdCUqp/4HMXGBrS1d7X2CPhFrrBq1nqx4JqUCkHFtK2wXIGvNtgbWuOKlUwHN89GTjQHorLI+T2HC+xjZLR/8whADnarqIy5QglvwV+AAAZBaAOOHRXgAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Default state",title:"Default state",src:"/static/8a5416789797b5e86202f444571900ec/3cbba/chatbot-16.png",srcSet:["/static/8a5416789797b5e86202f444571900ec/7fc1e/chatbot-16.png 288w","/static/8a5416789797b5e86202f444571900ec/a5df1/chatbot-16.png 576w","/static/8a5416789797b5e86202f444571900ec/3cbba/chatbot-16.png 1152w","/static/8a5416789797b5e86202f444571900ec/0b124/chatbot-16.png 1728w","/static/8a5416789797b5e86202f444571900ec/99571/chatbot-16.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)("h3",null,"Expanded state"),Object(i.b)("p",null,"Provide more detailed information in the expanded state. Only if absolutely\nnecessary, provide a way to access the full view of the content."),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"48.958333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAAsklEQVQoz6WSzQrCMBCE+/7P503w0IumxWqbv22ymzFJUXoQhWZgWNiEj9lsOnxRSqm66KEZtIbSBbN8+vs7e3X/gP3N4KZGOGegtUYI4RjwXclbWLvB5mVuBxpjMU0TtDGgZUFsBZZkSil475GYwTG2Aa1z1SICLs7QtpFzwnFQtZYtx9gEFFgfMLsMqhzJZmzHh0cmPDVl1opTv+J83d5Qjv7DmJdARDXZZRD09/QT+ALr0xc+/5hhxAAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Expanded state",title:"Expanded state",src:"/static/12f7b07d0076764f4244a259626eac51/3cbba/chatbot-17.png",srcSet:["/static/12f7b07d0076764f4244a259626eac51/7fc1e/chatbot-17.png 288w","/static/12f7b07d0076764f4244a259626eac51/a5df1/chatbot-17.png 576w","/static/12f7b07d0076764f4244a259626eac51/3cbba/chatbot-17.png 1152w","/static/12f7b07d0076764f4244a259626eac51/0b124/chatbot-17.png 1728w","/static/12f7b07d0076764f4244a259626eac51/99571/chatbot-17.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)("h3",null,"Full view"),Object(i.b)("p",null,"The full view is a generic container that can be used to display long-form\ncontent that would otherwise crowd a conversation thread."),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"48.958333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAAmklEQVQoz62SbQuFIAyF+/9/MqI01HyBFEStc9ngXvoQBNcOjMGUZ5vHATc6z5ODdBwHaq0opaC19qtf71w1PAH3fYeUEt57BlKDLqC1FvM8QwjB0O/Z30ClFKZp4kzw7gm3bWMYvSPVuoHGGKzryjmE0G+K1hrjOGJZFjaHjOkC0lTOOcQYkVJ6Z2VymdZ+xRT60DlnzhRPwA9P0RTOYo8wJAAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Full view",title:"Full view",src:"/static/ab95d9039ed5c64f85783ebf6a26d2e6/3cbba/chatbot-18.png",srcSet:["/static/ab95d9039ed5c64f85783ebf6a26d2e6/7fc1e/chatbot-18.png 288w","/static/ab95d9039ed5c64f85783ebf6a26d2e6/a5df1/chatbot-18.png 576w","/static/ab95d9039ed5c64f85783ebf6a26d2e6/3cbba/chatbot-18.png 1152w","/static/ab95d9039ed5c64f85783ebf6a26d2e6/0b124/chatbot-18.png 1728w","/static/ab95d9039ed5c64f85783ebf6a26d2e6/99571/chatbot-18.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)("h2",null,"Error states (Experimental)"),Object(i.b)("p",null,"Be sure to indicate to a user when their message has not been sent due to a\nconnectivity or server problem. When in a connected state, temporarily show the\nsuccess notification, and then remove it along with any message error\nindicators."),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"48.958333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAABWklEQVQoz42SX0/CMBTF+bBqwgsJX0rDk+++EOXJKEPBBTMDBIiMjTFY16770/bYbjBNNEKTs3t6mv56b7IGDkspI1V6wgGeKUhlVOU813lSeZMJWd3R30OtVuMbqGrgcrXCbPoOEs4hsgBFusU+2mH8biNwHb3fIGMepMjru38Cj53mPASNfMRRAEo2YHSvwXvQ3RzhZqHPXHDqQRQngMcDxjgiEoPEtKyUMvA0054h1p4Qk1MIIc4Dcp4gjg2I1jVN04OvRAg5H0gigvV6Dc/z4Pu+7pghYYnOvDIzIiQ6HxiGIYbDIUajESaTiR6dlVDbtsvccRwE21AD5Wng8dVOp4Nms4lWq4UP+7HMHno9tNttXFxeoXt3W2ZSqv+BRnmeYzqbwbL6eHp+wfV9gKyQcN0V+tYAb68WbrpLfO4qkDw1suny56uDhf6VCqG7kXU2doEgVr9G/gJalABSXkgkKAAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Chatbot error notification",title:"Chatbot error notification",src:"/static/34af964999a53cfc8a2884c35865ee05/3cbba/chatbot-6.png",srcSet:["/static/34af964999a53cfc8a2884c35865ee05/7fc1e/chatbot-6.png 288w","/static/34af964999a53cfc8a2884c35865ee05/a5df1/chatbot-6.png 576w","/static/34af964999a53cfc8a2884c35865ee05/3cbba/chatbot-6.png 1152w","/static/34af964999a53cfc8a2884c35865ee05/0b124/chatbot-6.png 1728w","/static/34af964999a53cfc8a2884c35865ee05/99571/chatbot-6.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))}m.isMDXComponent=!0}}]);