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 app.
there are several ways you can integrate the Copilot Chat widget into your application/webpage
Init the copilot (when document fully loads) by calling the initAiCoPilot function and passing the required options.
Copy
Ask AI
<script> const options = { apiUrl: "https://api.opencopilot.so/backend" // your base url where your are hosting OpenCopilot at (the API), usually it's http://localhost:8888/backend socketUrl: "https://api.opencopilot.so" // your socket server, usually it's http://localhost:8888/socket initialMessage: "Hey! happy to help.", // optional: you can pass an array of messages that will be sent to the copilot when it's initialized 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>
import { CopilotWidget,Root } from "@openchatai/copilot-widget"; // import the componentimport '@openchatai/copilot-widget/index.css' // the required stylesconst options = { apiUrl: "https://api.opencopilot.so/backend" // your base url where your are hosting OpenCopilot at (the API), usually it's http://localhost:8888/backend socketUrl: "https://api.opencopilot.so" // your socket server, usually it's http://localhost:8888/socket initialMessage: "Hey! happy to help.", // optional: you can pass an array of messages that will be sent to the copilot when it's initialized 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> )}
Make sure that the triggerSelector is correct and the element exists in
the dom,instead you can set defaultOpen to true to make the copilot open by default.
if that did not work, please open an issue on our GitHub repo
The copilot widget is responsive and itβs width is set to 100% by default of the container, you can change that by passing the
containerProps option and setting the width to whatever you want.