Speech synthesis

With speechSynthesis={{ enable: true, lang: 'en' }}, the chatbot reads each bot message out loud with the speech synthesis of the browser. See Speech for more.

Preview

Code

speech-synthesis.tsx

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

const steps: Step[] = [
  { id: 'ask-name', message: 'What is your name?', trigger: 'name' },
  { id: 'name', user: true, trigger: 'greet' },
  {
    id: 'greet',
    message: 'Hi {previousValue}, nice to meet you!',
    metadata: {
      speak: 'Hi {previousValue}. I am saying something different from the message text.'
    },
    trigger: 'card'
  },
  {
    id: 'card',
    component: <div>This is a custom component</div>,
    metadata: { speak: 'I can also say something about a custom component.' },
    end: true
  }
];

export default function SpeechSynthesis() {
  return (
    <ChatBot
      headerTitle="Speech synthesis"
      speechSynthesis={{ enable: true, lang: 'en' }}
      steps={steps}
    />
  );
}

How it works

• By default, the chatbot says the text of the message.
• Set metadata.speak on a step to say a different text. It also supports {previousValue}.
• Custom components have no text to read, so metadata.speak is the only way to make them speak.
• Browsers may block the speech until you interact with the page, like typing your name.