Options

An options step shows a list of buttons for the user to choose from. Each option has a label, an optional value (the label by default) and its own trigger, so every choice can lead to a different step. See Steps for more.

Preview

Code

options.tsx

import ChatBot, { type Step } from 'react-simple-chatbot';

const steps: Step[] = [
  { id: 'question', message: 'What number am I thinking of?', trigger: 'answer' },
  {
    id: 'answer',
    options: [
      { label: 'Number 1', value: 1, trigger: 'wrong' },
      { label: 'Number 2', value: 2, trigger: 'right' },
      { label: 'Number 3', value: 3, trigger: 'wrong' }
    ]
  },
  { id: 'wrong', message: 'Wrong answer, try again.', trigger: 'answer' },
  { id: 'right', message: 'Awesome! You are a telepath!', end: true }
];

export default function Options() {
  return <ChatBot headerTitle="Options" steps={steps} />;
}

How it works

• The wrong options trigger the wrong step, which triggers the answer step again, so the user can try another number.
• The right option triggers the right step, which ends the conversation.