Initialization

Prerequisites

Bit uses React 19+ but does not bundle it. This is a deliberate decision to keep the bundle size small and to allow browsers to cache React separately from Bit.

Bit itself is an ES Module and does not require any special setup to be uses in modern browsers.

To load and initialize Bit, append the following code to the <head> tag of your HTML file. Please note that we're using esm.sh to load React 19+ but you can use any other CDN that supports ES Modules.

<!-- Start of Bit Block -->
<!-- Tell Bit where to import `react`, `react-dom` and `react/jsx-runtime` from -->
<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@19?global=React",
      "react-dom": "https://esm.sh/react-dom@19?global=ReactDOM",
      "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime?global=React"
    }
  }
</script>
<!-- Import Bit's CSS -->
<link rel="stylesheet" href="https://bit.chatbyte.ai/dist/bit.css" />
<!-- Import and initialize Bit itself -->
<script defer type="module">
  import { createBit } from 'https://bit.chatbyte.ai/dist/bit.js';

  createBit('your-api-key');
</script>
<!-- End of Bit Block -->

If everything works out, you should see a Bit agent in the bottom right corner of your page.

Options

When initializing Bit, you can pass in a few options to customize the Bit agent.

interface BitOptions {
  theme?: 'light' | 'dark';
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  primaryColor?: string;
  logo?: string;
}

// This is roughly how the signature of the `createBit` function looks like
const createBit = (apiKey: string,options?: Partial<BitOptions>): Promise<BitClient> => {
  // ...
}

These should be self-explanatory but here are some notes:

theme: The theme of the Bit agent.
position: The position of the Bit agent.
primaryColor: The primary color of the Bit agent.
logo: The logo of the Bit agent.

Considerations

Using your own React build

If you already provide React 19+ in your project, you can change the importmap to point to your own React 19+ build.

<script type="importmap">
  {
    "imports": {
      "react": "your-build-here",
      "react-dom": "your-build-here",
      "react/jsx-runtime": "your-build-here"
    }
  }
</script>

Since this will not load React from esm.sh, you will need to ensure that React 19+ is available in your project.

Caching

When choosing where to load React from, make sure to consider how this will impact loading times of your website visitors. Using a widely used CDN like esm.sh is a good choice in most cases.

Initialization

Prerequisites

Initialization

Options

Considerations

Using your own React build

Caching

On this page