Floating Action Button

You can use the Fab (Floating Action Button) component to toggle the visibility of the Webchat UI in your application.

import { Fab } from "@botpress/webchat";
import { useState } from "react";

function App() {
  const [isWebchatOpen, setIsWebchatOpen] = useState(false);

  return (
    <Fab
      onClick={() => setIsWebchatOpen(isWebchatOpen)}
      style={{
        position: "fixed",
        bottom: "20px",
        right: "20px",
        width: "64px",
        height: "64px",
      }}
    />
  );
}

export default App;

Props

imgUrl string

URL to a custom icon image.

onClick MouseEventHandler<HTMLButtonElement>

A callback function triggered when the Fab is clicked. Commonly used to toggle the Webchat visibility.