This is the widget for OpenCopilot: it's what your users will interact with.
It's a simple React application that can be used in any webpage as a widget. To download the latest build of the widget, go to the actions tab in GitHub and download the latest build artifact.
-
Download the latest build artifact from the actions tab.
-
Extract the zip file.
-
Copy the
assets/*.js
file to your project. -
Reference the js file in your HTML file as follows:
<script src="[some_js_file].js"></script>
-
Initialize the widget.
<script> // you should run it after window loads window.onload = () => { initAiCoPilot({ initialMessage: "Hey, how can I help you today?", // initial bot message token: "not_super_secret_token", // your OpenCopilot token rootId: "copilot-widget", // @optional: the root element id in which the widget will mount on triggerSelector: "#triggerSelector", // the selector of the element that will trigger the widget on click apiUrl: "https://cloud.openchat.so/api", // the url of the OpenCopilot api. headers: { Authorization: "Bearer your_auth_token_goes_here", }, // @optional: headers that you want to send with every message request bot: { name: "AI Assistant", avatarUrl: "https://example.com/company-logo.png" }, // @optional: bot object – this info will be used in the chat user: { name: "John Doe", avatarUrl: "https://example.com/user-avatar.png" }, // @optional: user object – this info will be used in the chat containerProps: {}, // @optional: `HTMLProps` warnBeforeClose: true, // @optional: Set to false if you don't want to warn the user before closing the chat onClose: () => { console.log('Closing chat window.'); } // @optional: Callback before closing the chat }); }; </script>
-
Click on the trigger element to open the widget.
-
Type your message and press enter to send it.