{"componentChunkName":"component---src-pages-experimental-chatbot-usage-mdx","path":"/experimental/chatbot/usage/","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/usage.mdx","titleType":"prepend","MdxNode":{"id":"adcd7cbe-7832-583d-8e6e-dc146d0d5aad","children":[],"parent":"888ba44d-6ee8-569b-8c76-80035fd24a7a","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\nimport {\n StructuredListWrapper,\n StructuredListHead,\n StructuredListRow,\n StructuredListCell,\n StructuredListBody,\n UnorderedList,\n ListItem,\n} from 'carbon-components-react';\n\n\n\n Anatomy \n Requesting information \n Best practices \n\n\n\n## Anatomy\n\nThe following diagram outlines the primary components within the chatbot pattern.\n\n\n\n\n \n \n Component\n Usage\n Variants\n \n \n \n \n Chatbot header\n \n The chatbot header contains the title of the chat and up to four action\n buttons that control the chatbot application. Typically, the “close”\n icon must always be included.\n \n \n \n Tight\n Regular\n Regular (with avatar)\n Large\n \n \n \n \n System message\n \n System Messages represent the bot's response to the user. Past messages\n will have a faded treatment, whereas active messages have an indicator\n applied (see below)\n \n \n \n Tight\n Regular\n \n \n \n \n User message\n \n A user message indicates what the user has input via text input,\n structured response, or voice.\n \n \n \n Tight\n Regular\n \n \n \n \n Structured response\n \n Structured responses present choices to the user that are easy for the\n bot to understand. When selected, a structured response will change its\n visual appearance and a user message will appear with the same content.\n \n \n \n Default\n \n \n \n \n Chatbot input\n \n The Chatbot input is comprised of a text input field, a configurable\n button for other input (e.g., voice) and a submit button.\n \n \n \n Tight\n Regular\n \n \n \n \n Launch button (not shown)\n \n Launch buttons are the means by which a user initiates a conversation\n with your bot and are the first interaction of the bot experience.\n \n \n \n Primary\n Alternate\n \n \n \n \n Chatbot cards\n \n Cards are used to display more information (including text and images)\n about a significant action that a user can take. They can also be used\n to display text and image together for a purely informational purpose.\n \n \n \n Card with text (Hero)\n Card with text (Large)\n Card with text (Mini)\n Card with image (Avatar)\n Card with image (Large)\n Card with image (Mini)\n Card with data (Table)\n Card with data (Visualization)\n \n \n \n \n\n\n## Requesting information\n\nThe following flow shows a typical exchange between a user and a bot. This model can be used as a baseline to start building useful conversational experiences.\n\n\n\n## Best practices\n\nAt a minimum, use these best practices to help ensure a successful conversational experience. For more in-depth conversational principles, see [IBM Design for Conversational AI](https://www.ibm.com/design/ai/conversation).\n\n#### Introduction\n\nEnsure your users know they are talking to a bot and that the bot has stated its purpose. Set the context for what questions users can ask about.\n\n\n\nchatbot greeting\n\n#### User intent\n\nTypically, a user inputs an intent, which can be request for information or a task for the bot to complete. This can take the form of a text (shown here) as well as a structured response (see next section)\n\n\n\nUser intent\n\n#### Structured responses\n\nPrompt for additional details with a menu of structured responses. This narrows the scope to more specific information to answer the user’s question.\n\n\n\nStructured responses\n\n#### Reflection\n\nThe bot should reflect its understanding of the query in the response (when appropriate) to ensure understanding, or before performing a significant action. Note: This process of slotfilling may need to be repeated until the bot has all the information required to answer the user’s initial question.\n\n\n\nReflection\n\n#### Provide a response and request feedback\n\nThe bot should provide a thoughtful, informative response to the user’s intent, based on the information they have provided throughout the conversation. When appropriate, be sure to provide an opportunity for users to give feedback. Consider allowing the user to input a custom response. Provide an opportunity for users to give feedback where possible. Consider allowing the user to input a custom response.\n\n\n\nProvide a response and request feedback\n","type":"Mdx","contentDigest":"a88017225fda5b00fe4258ea684fcaa6","counter":1422,"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\nimport {\n StructuredListWrapper,\n StructuredListHead,\n StructuredListRow,\n StructuredListCell,\n StructuredListBody,\n UnorderedList,\n ListItem,\n} from 'carbon-components-react';\n\n\n\n Anatomy \n Requesting information \n Best practices \n\n\n\n## Anatomy\n\nThe following diagram outlines the primary components within the chatbot pattern.\n\n\n\n\n \n \n Component\n Usage\n Variants\n \n \n \n \n Chatbot header\n \n The chatbot header contains the title of the chat and up to four action\n buttons that control the chatbot application. Typically, the “close”\n icon must always be included.\n \n \n \n Tight\n Regular\n Regular (with avatar)\n Large\n \n \n \n \n System message\n \n System Messages represent the bot's response to the user. Past messages\n will have a faded treatment, whereas active messages have an indicator\n applied (see below)\n \n \n \n Tight\n Regular\n \n \n \n \n User message\n \n A user message indicates what the user has input via text input,\n structured response, or voice.\n \n \n \n Tight\n Regular\n \n \n \n \n Structured response\n \n Structured responses present choices to the user that are easy for the\n bot to understand. When selected, a structured response will change its\n visual appearance and a user message will appear with the same content.\n \n \n \n Default\n \n \n \n \n Chatbot input\n \n The Chatbot input is comprised of a text input field, a configurable\n button for other input (e.g., voice) and a submit button.\n \n \n \n Tight\n Regular\n \n \n \n \n Launch button (not shown)\n \n Launch buttons are the means by which a user initiates a conversation\n with your bot and are the first interaction of the bot experience.\n \n \n \n Primary\n Alternate\n \n \n \n \n Chatbot cards\n \n Cards are used to display more information (including text and images)\n about a significant action that a user can take. They can also be used\n to display text and image together for a purely informational purpose.\n \n \n \n Card with text (Hero)\n Card with text (Large)\n Card with text (Mini)\n Card with image (Avatar)\n Card with image (Large)\n Card with image (Mini)\n Card with data (Table)\n Card with data (Visualization)\n \n \n \n \n\n\n## Requesting information\n\nThe following flow shows a typical exchange between a user and a bot. This model can be used as a baseline to start building useful conversational experiences.\n\n\n\n## Best practices\n\nAt a minimum, use these best practices to help ensure a successful conversational experience. For more in-depth conversational principles, see [IBM Design for Conversational AI](https://www.ibm.com/design/ai/conversation).\n\n#### Introduction\n\nEnsure your users know they are talking to a bot and that the bot has stated its purpose. Set the context for what questions users can ask about.\n\n\n\nchatbot greeting\n\n#### User intent\n\nTypically, a user inputs an intent, which can be request for information or a task for the bot to complete. This can take the form of a text (shown here) as well as a structured response (see next section)\n\n\n\nUser intent\n\n#### Structured responses\n\nPrompt for additional details with a menu of structured responses. This narrows the scope to more specific information to answer the user’s question.\n\n\n\nStructured responses\n\n#### Reflection\n\nThe bot should reflect its understanding of the query in the response (when appropriate) to ensure understanding, or before performing a significant action. Note: This process of slotfilling may need to be repeated until the bot has all the information required to answer the user’s initial question.\n\n\n\nReflection\n\n#### Provide a response and request feedback\n\nThe bot should provide a thoughtful, informative response to the user’s intent, based on the information they have provided throughout the conversation. When appropriate, be sure to provide an opportunity for users to give feedback. Consider allowing the user to input a custom response. Provide an opportunity for users to give feedback where possible. Consider allowing the user to input a custom response.\n\n\n\nProvide a response and request feedback\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/experimental/chatbot/usage.mdx"}}}}