@bubl/react NPM

Bubl React

A React component for embedding the Bubl chat widget in React applications.

Note: This package uses the latest widget implementation with Shadow DOM isolation for complete style isolation and improved performance.

Installation

# npm
npm install @bubl/react

# yarn
yarn add @bubl/react

# pnpm
pnpm add @bubl/react

Usage

Basic Usage

import { BublChat } from '@bubl/react';

function App() {
  return (
    <div>
      {/* Your website content */}

      <BublChat
        websiteId="your-website-id"
        primaryColor="#4F46E5"
        secondaryColor="#FFFFFF"
        position="bottom-right"
        welcomeMessage="Hi there! How can I help you today?"
        headerText="Chat Assistant"
        initiallyOpen={false}
        onReady={() => console.log("Bubl widget is ready")}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`websiteId`	`string`	Required	Your website ID from the Bubl dashboard
`primaryColor`	`string`	`"#4F46E5"`	Primary color for the chat widget (hex code)
`secondaryColor`	`string`	`"#FFFFFF"`	Secondary color for the chat widget (hex code)
`position`	`"bottom-right"` \| `"bottom-left"`	`"bottom-right"`	Position of the chat widget
`welcomeMessage`	`string`	`"Hi there! How can I help you today?"`	Welcome message displayed when the chat is opened
`headerText`	`string`	`"Chat Assistant"`	Text displayed in the header of the chat widget
`initiallyOpen`	`boolean`	`false`	Whether the chat widget should be initially open
`onReady`	`() => void`	`undefined`	Callback function called when the widget is ready

Controlling the Widget

You can control the widget programmatically using the global Bubl.api object:

// Open the chat widget
window.Bubl?.api?.open();

// Close the chat widget
window.Bubl?.api?.close();

// Toggle the chat widget
window.Bubl?.api?.toggle();

// Maximize the chat widget to fullscreen
window.Bubl?.api?.maximize();

// Restore the chat widget to normal size
window.Bubl?.api?.restore();

// Toggle between maximized and normal size
window.Bubl?.api?.toggleMaximize();

Custom App URL

By default, the widget loads from https://bublai.com. If you're self-hosting Bubl, you can specify a custom app URL in two ways:

Method 1: Using the `apiBaseUrl` prop (Recommended)

<BublChat
  websiteId="your-website-id"
  apiBaseUrl="https://your-bubl-instance.com"
/>

Method 2: Using global configuration

// Set custom app URL globally
window.bublConfig = {
  appUrl: "https://your-bubl-instance.com"
};

// Then render the component
ReactDOM.render(
  <BublChat websiteId="your-website-id" />,
  document.getElementById('root')
);