Floating chatbot

With floating, the chatbot starts as a button fixed to the page and opens when it is clicked. floatingStyle changes the button, and its position also moves the chat window. See Floating for more.

The button of this example is at the bottom right corner of the page. Click it to open the chatbot.

Preview

Code

floating.tsx

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

const steps: Step[] = [
  { id: 'ask-name', message: 'Hi! What is your name?', trigger: 'name' },
  { id: 'name', user: true, trigger: 'greet' },
  { id: 'greet', message: 'Nice to meet you, {previousValue}!', end: true }
];

export default function Floating() {
  return (
    <ChatBot
      floating
      headerTitle="Need help?"
      floatingStyle={{ bottom: '24px', right: '24px' }}
      steps={steps}
    />
  );
}

How it works

• The conversation starts when the chatbot opens for the first time.
• floatingStyle sets bottom and right to move the button and the window closer to the corner.
• The close button in the header turns the chatbot back into the floating button.