Chat widget

The chat widget enables you to interact with the AI customer support chatbot from your dashboard and see the changes in real-time. Open is a React web app that you can embed in your web app.

There are several ways you can integrate the chat widget into your application/webpage.

​

Using simple js script (Copy & Paste)

1. By using CDN script into your HTML file.

   <script src="https://unpkg.com/@openchatai/widget@latest/dist-embed/script.js"></script>
   

   This will automatically register a new function called initOpenWidget on the global window object.

2. Init the widget (when document fully loads) by calling the initOpenWidget function and passing the required options. There are plenty of options that you can pass to the widget, you can find them here

   <script>
      const options = {
        /** ## Basic and required options ## */
        token: "your_organization_token_goes_here", // (required) Settings -> Metadata -> Token
        initialMessages: ["Hey! happy to help."], // (optional) Messages that will be first present when the chat widget is initialized
   
        /** ## User identification options (optional) ## */
        user: {
          name: "John Doe",
          email: "john@doe.com",
          avatar: "https://example.com/avatar.png",
          phone: "123456789",
          customData: {
            // any custom data you want to send to the Open backend, for example:
            "key1": "value1",
          }
        }
   
        // This widget supports AMAZING features and options. See the options documentation for more details.
      }
      window.addEventListener("DOMContentLoaded", ()=> initOpenScript(options)); // window.onload
   </script>
   

​

As a React Component

1. Install the widget from npm.

   • npm
   • yarn
   • pnpm

    npm install @openchatai/widget 
   

2. Use the Component inside your application

import { Widget, WidgetRoot, WidgetPopover } from "@openchatai/widget"; 
import "@openchatai/widget/dist/style.css";

const options = {
  /** ## Basic and required options ## */
  token: "your_organization_token_goes_here", // (required) Settings -> Metadata -> Token
  initialMessages: ["Hey! happy to help."], // (optional) Messages that will be first present when the chat widget is initialized

  /** ## User identification options (optional) ## */
  user: {
    name: "John Doe",
    email: "john@doe.com",
    avatar: "https://example.com/avatar.png",
    phone: "123456789",
    customData: {
      // any custom data you want to send to the Open backend, for example:
      "key1": "value1",
    }
  },

  // This widget supports AMAZING features and options. See the options documentation for more details.
}

function Widget(){
  return (
    <WidgetRoot options={options}>
      <Widget /> // the inline chat widget
      <WidgetPopover /> // optional, if you want to use the popover
    </WidgetRoot>
  )
}

​

Available options

The chat widget is highly customizable, here is a list of all the available options:

​

Identifying chat users/contacts

One of the helpful options in the chat widget is the ability to identify the user/contact of the chat. This is useful if you want to track the usage of the chat widget.

To start identifying the user/contact, you can pass the user object as an option to the chat widget, for example:

const options = {
  initialMessages: ["Hey! happy to help."], 
  token: "your_organization_token_goes_here", // Settings -> Metadata -> Token
  user: {
    name: "your_user_name",
    email: "your_user_email",
    avatar: "your_user_avatar_url",
    phone: "your_user_phone",
    customData: {
      // any custom data you want to send to the Open backend
      "key1": "value1",
    }
  },
}

Read more about the contact APIs here

​

FAQ