Skip to main contentCarbon Design System

Chatbots

Anatomy

The following diagram outlines the primary components within the chatbot pattern.

chatbot 4
ComponentUsageVariants
Chatbot header
The chatbot header contains the title of the chat and up to four action buttons that control the chatbot application. Typically, the “close” icon must always be included.
  • Default
  • With avatar
  • Large
System message
System Messages represent the bot's response to the user. Past messages will have a faded treatment, whereas active messages have an indicator applied (see below)
  • Default
User message
A user message indicates what the user has input via text input, structured response, or voice.
  • Default
Structured response
Structured responses present choices to the user that are easy for the bot to understand. When selected, a structured response will change its visual appearance and a user message will appear with the same content.
  • Default
Chatbot input
The Chatbot input is comprised of a text input field, a configurable button for other input (e.g., voice) and a submit button.
  • Default
  • Without action button
Launch button (not shown)
Launch buttons are the means by which a user initiates a conversation with your bot and are the first interaction of the bot experience.
  • Primary
  • Alternate
Chatbot cards
Cards are used to display more information (including text and images) about a significant action that a user can take. They can also be used to display text and image together for a purely informational purpose.
  • Card with text (Hero)
  • Card with text (Large)
  • Card with text (Mini)
  • Card with image (Avatar)
  • Card with image (Large)
  • Card with image (Mini)
  • Card with data (Table)
  • Card with data (Visualization)

Requesting information

The 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.

Requesting information from a chatbot

Best practices

At 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.

Introduction

Ensure 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.

Chatbot greeting

chatbot greeting

User intent

Typically, 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)

User Intent

User intent

Structured responses

Prompt for additional details with a menu of structured responses. This narrows the scope to more specific information to answer the user’s question.