{"componentChunkName":"component---src-pages-experimental-chatbot-flows-mdx","path":"/experimental/chatbot/flows/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Chatbots","description":"Use a chatbot when a user would benefit from requesting information on-demand with natural language. They should receive a useful and trustworthy response related to their question or task.","tabs":["Overview","Usage","Flows","Content"]},"relativePagePath":"/experimental/chatbot/flows.mdx","titleType":"prepend","MdxNode":{"id":"62b27275-1f56-55ba-a46f-6c7319840abf","children":[],"parent":"a49936a3-c6da-5cb1-b166-f731b48d3cbe","internal":{"content":"---\ntitle: Chatbots\ndescription: Use a chatbot when a user would benefit from requesting information on-demand with natural language. They should receive a useful and trustworthy response related to their question or task.\ntabs: ['Overview', 'Usage', 'Flows', 'Content']\n---\n\n### Depending on the complexity of the use case and user needs, chatbots may require other interactions that supplement the conversational experience.\n\n<InlineNotification>\n\n**Note:** This page documents some common chatbot scenarios in IBM products and their recommended best practices. Flows still under consideration are marked with \"Experimental\".\n\n</InlineNotification>\n\n<AnchorLinks>\n\n<AnchorLink>Launching a bot</AnchorLink>\n<AnchorLink>Multiple threads</AnchorLink>\n<AnchorLink>Expanding cards</AnchorLink>\n<AnchorLink>Error states</AnchorLink>\n\n</AnchorLinks>\n\n## Launching a bot\n\nBots should be launched from a button positioned at the bottom right of the screen, or from a button embedded within the UI. See Carbon Chatbot Add-on Design Kit for the appropriate variants.\n\n![Launching a bot](images/chatbot-5.png)\n\n## Multiple threads (Experimental)\n\nWhen a bot cannot complete a request, the bot detects frustration, or the user would simply prefer interacting with a person, it becomes necessary to connect the user to a human agent.\n\n### User initiates change\n\nSometimes, a user indicates that they would like to chat with a human. Other times, this process can be suggested if a bot is repeatedly unsuccessful in answering a user’s question.\n\n![User initiates change](images/chatbot-12.png)\n\n### Notify the user\n\nUse a toast notification bar to indicate when the user is in a new conversation context, or that a new user has joined the the chat. Call out any significant changes with in-conversation status messages.\n\n![Notify the user](images/chatbot-13.png)\n\n### Multiple users\n\nCombining two or more human agents into the same thread is a common practice. Where necessary, call out significant changes in who the user is addressing (particularly if they have different purposes).\n\n![Multiple users](images/chatbot-14.png)\n\n### Incoming messages\n\nFor new messages appearing in another thread, be sure to use dots above the Threads icon to alert the user of new messages. Then, within the menu, indicate the amount of new messages on the specific thread. Visually distinguish threads with new messages.\n\n![Incoming messages](images/chatbot-15.png)\n\n## Expanding cards (Experimental)\n\nWhere needed, use expanding cards to progressively disclose content. Use a full page view to show a very large amount of content to the user.\n\n### Default state\n\nCall out critical information in the default state. Provide a trigger to expand the card.\n\n![Default state](images/chatbot-16.png)\n\n### Expanded state\n\nProvide more detailed information in the expanded state. Only if absolutely necessary, provide a way to access the full view of the content.\n\n![Expanded state](images/chatbot-17.png)\n\n### Full view\n\nThe full view is a generic container that can be used to display long-form content that would otherwise crowd a conversation thread.\n\n![Full view](images/chatbot-18.png)\n\n## Error states (Experimental)\n\nBe sure to indicate to a user when their message has not been sent due to a connectivity or server problem. When in a connected state, temporarily show the success notification, and then remove it along with any message error indicators.\n\n![Chatbot error notification](images/chatbot-6.png)\n","type":"Mdx","contentDigest":"b8c6bcd38a402f238853bb09c9e1115b","counter":1420,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Chatbots","description":"Use a chatbot when a user would benefit from requesting information on-demand with natural language. They should receive a useful and trustworthy response related to their question or task.","tabs":["Overview","Usage","Flows","Content"]},"exports":{},"rawBody":"---\ntitle: Chatbots\ndescription: Use a chatbot when a user would benefit from requesting information on-demand with natural language. They should receive a useful and trustworthy response related to their question or task.\ntabs: ['Overview', 'Usage', 'Flows', 'Content']\n---\n\n### Depending on the complexity of the use case and user needs, chatbots may require other interactions that supplement the conversational experience.\n\n<InlineNotification>\n\n**Note:** This page documents some common chatbot scenarios in IBM products and their recommended best practices. Flows still under consideration are marked with \"Experimental\".\n\n</InlineNotification>\n\n<AnchorLinks>\n\n<AnchorLink>Launching a bot</AnchorLink>\n<AnchorLink>Multiple threads</AnchorLink>\n<AnchorLink>Expanding cards</AnchorLink>\n<AnchorLink>Error states</AnchorLink>\n\n</AnchorLinks>\n\n## Launching a bot\n\nBots should be launched from a button positioned at the bottom right of the screen, or from a button embedded within the UI. See Carbon Chatbot Add-on Design Kit for the appropriate variants.\n\n![Launching a bot](images/chatbot-5.png)\n\n## Multiple threads (Experimental)\n\nWhen a bot cannot complete a request, the bot detects frustration, or the user would simply prefer interacting with a person, it becomes necessary to connect the user to a human agent.\n\n### User initiates change\n\nSometimes, a user indicates that they would like to chat with a human. Other times, this process can be suggested if a bot is repeatedly unsuccessful in answering a user’s question.\n\n![User initiates change](images/chatbot-12.png)\n\n### Notify the user\n\nUse a toast notification bar to indicate when the user is in a new conversation context, or that a new user has joined the the chat. Call out any significant changes with in-conversation status messages.\n\n![Notify the user](images/chatbot-13.png)\n\n### Multiple users\n\nCombining two or more human agents into the same thread is a common practice. Where necessary, call out significant changes in who the user is addressing (particularly if they have different purposes).\n\n![Multiple users](images/chatbot-14.png)\n\n### Incoming messages\n\nFor new messages appearing in another thread, be sure to use dots above the Threads icon to alert the user of new messages. Then, within the menu, indicate the amount of new messages on the specific thread. Visually distinguish threads with new messages.\n\n![Incoming messages](images/chatbot-15.png)\n\n## Expanding cards (Experimental)\n\nWhere needed, use expanding cards to progressively disclose content. Use a full page view to show a very large amount of content to the user.\n\n### Default state\n\nCall out critical information in the default state. Provide a trigger to expand the card.\n\n![Default state](images/chatbot-16.png)\n\n### Expanded state\n\nProvide more detailed information in the expanded state. Only if absolutely necessary, provide a way to access the full view of the content.\n\n![Expanded state](images/chatbot-17.png)\n\n### Full view\n\nThe full view is a generic container that can be used to display long-form content that would otherwise crowd a conversation thread.\n\n![Full view](images/chatbot-18.png)\n\n## Error states (Experimental)\n\nBe sure to indicate to a user when their message has not been sent due to a connectivity or server problem. When in a connected state, temporarily show the success notification, and then remove it along with any message error indicators.\n\n![Chatbot error notification](images/chatbot-6.png)\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/experimental/chatbot/flows.mdx"}}}}