Themes

A newly added feature in v2 of the chatbot, the themes prop allows users a quick and convenient way to customize their chatbot. Browsing of themes can be done on React ChatBotify Gallery or manually via the GitHub Themes Repository.

The theme prop can accept a single Theme object or a list of it. A Theme object contains the following fields:

id: id of the theme
version: version number for the theme
cacheDuration: duration to cache the theme for before fetching again
baseUrl: base url for fetching the theme from

The only required field is id, though you are also encouraged to specify the version in case a theme update deviates from your intended design. The cacheDuration allows you to specify in seconds how long a theme should be cached for (default 30 days). The baseUrl is an advanced feature, useful only if you are hosting your own GitHub Themes Repository. If you are exploring such an option and need help setting up the repository, feel free to reach out on discord.

Tip

Try stacking multiple of your favorite themes together, the chatbot will resolve styles in order (i.e. later themes take precedence in the presence of style conflicts!).

Unlike settings and styles, there are no sections to configure for themes apart from the 3 fields above. Below is an example demonstrating how you may stack themes with the chatbot. Experiment with it!

Live Editor

const MyComponent = () => {
  // necessary to embed the chatbot for it to show on the page
  const settings = {
    general: {
      embedded: true
    }
  }

  // themes available for browsing at: https://gallery.react-chatbotify.com
  const themes = [
    {id: "minimal_midnight", version: "0.1.0"},
    {id: "simple_blue", version: "0.1.0"}
  ]

  return (
    <ChatBot themes={themes} settings={settings}/>
  );
};

render(
  <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
    <MyComponent/>
  </div>
)

Result

Tip

Check out more examples for single theme and multiple themes!