Embed the Copilot in your app

the chat widget enables you to interact with the Copilot from your dashboard and see the changes in realtime. OpenCopilot is a react web app that you can embed in your web app.

there are several ways you can integrate the Copilot Chat widget into your application/webpage

​

Using simple js script

1. by using CDN script into your html file.

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

   this will automatically register a new function called initAiCoPilot on the global window object.

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

   <script>
     const options = {
        apiUrl: "https://api.opencopilot.so/backend"
        socketUrl: "https://api.opencopilot.so"
        initialMessage: "Hey! happy to help.", 
        token: "your_copilot_token_goes_here", // you can get your token from the dashboard
        triggerSelector: "#triggerSelector", // the selector of the element that will trigger the copilot when clicked
        headers: {
          // optional: you can pass your authentication tokens to the copilot or any other header you want to send with every request
          Authorization: "Bearer your_auth_token_goes_here",
          AnyKey: "AnyValue"
        },
        containerProps: {
          // optional: you can pass any props to the container div
          className: "your-custom-class-name",
          style: {
              position: "fixed",
              height: "100%",
              bottom: "0",
              right: "0",
              width: "400px",
            },
        } 
      }
      window.addEventListener("DOMContentLoaded", ()=>initAiCoPilot(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 { CopilotWidget,Root } from "@openchatai/widget"; 
const options = {
  apiUrl: "https://api.opencopilot.so/backend",
  socketUrl: "https://api.opencopilot.so", 
  initialMessage: "Hey! happy to help.",
  token: "your_copilot_token_goes_here", // you can get your token from the dashboard
  defaultOpen: true,
  headers: {
    // optional: you can pass your authentication tokens to the copilot or any other header you want to send with every request
    Authorization: "Bearer your_auth_token_goes_here",
    AnyKey: "AnyValue"
  },
}
const containerProps = {
  // optional: you can pass any props to the container div
  className: "your-custom-class-name",
  style: {
      position: "fixed",
      height: "100%",
      bottom: "0",
      right: "0",
      width: "400px",
    },
}
function Widget(){
  return (
    <Root containerProps={containerProps} options={options}>
    <CopilotWidget triggerSelector='#copilot-trigger' />
    </Root>
  )
}

​

Options

​

Available options

​

FAQ