Integration Guide
Integrating our copilot with your internal web applications
This guide will help you learn how to integrate them into your other web applications.
Embedding via Javascript
Good to know!
Before you can integrate copilots into your enterprise, you will need to grab your API key from your dashboard. You can find it under Copilots » Configure » Security.
You can embed our copilots into your web applications by inserting the following code snippet into the <head> tag of your HTML file:
Option 1 (recommended)
<head>
<script type="text/javascript">
window.RFCopilotConfig = {
apiKey: '<< insert your API key here >>',
userId: '<< set a user ID (email) based on current user context >>',
theme: '<< "light" | "dark" >>',
position: '<< "bottom-right" | "bottom-left" | "top-right" | "top-left" | undefined >>',
widgetTriggerSelector: '<< insert any valid CSS selector here (optional) >>'
};
</script>
<script type="text/javascript" src="https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js" defer></script>
</head>
Option 2
<head>
<script id="rfCopilotWidgetScript" type="text/javascript" src="https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js" defer></script>
<script>
rfCopilotWidgetScript.addEventListener('load', function () {
window.RFCopilot({
apiKey: '<< insert your API key here >>',
userId: '<< set a user ID (email) based on current user context >>',
theme: '<< "light" | "dark" >>',
position: '<< "bottom-right" | "bottom-left" | "top-right" | "top-left" | undefined >>',
widgetTriggerSelector: '<< insert any valid CSS selector here (optional) >>'
});
});
</script>
</head>
This will launch the copilot in the bottom right corner of your web application.
Widget Position
The copilot icon can be either fixed in position at one of the four corners of the screen by passing the optional position parameter to the copilot script. If you pass a position attribute then the copilot icon will remain anchored at that corner. The possible values for position are - bottom-right or bottom-left or top-right or top-left.
If you do not pass the position attribute then the copilot icon will be rendered at the bottom right corner of the screen by default, and can be dragged and repositioned to any of the four corners on the screen by the user.
The widget will open in the corresponding corner the launcher icon has been placed at. If the user chooses to re-position the icon, the widget will remember choice (on a given browser) and reopen in the same corner correctly. See the example below:
Widget Configuration
Here's an explanation of the various parameters:
| Parameter | Required? | Default | Description |
|---|---|---|---|
apiKey | Yes | - | This securely connects your copilot to Rapidflare. Do not share this key outside your enterprise! |
theme | Optional | - | You can customize the appearance of the copilot by setting this parameter to either light or dark based on what your host website's color theme is. |
userId | Optional | - | We recommend setting userId to the email of the current user logged into your web application. This will help track usage, and act on feedback from users |
position | Optional | - | You can pass position to set the initial position of the copilot widget. The possible values are bottom-right, bottom-left, top-right, top-left. If you do not pass anything then the default position is bottom-right and user will be able to drag and drop the widget to any corner. |
widgetTriggerSelector | Optional | - | You can pass widgetTriggerSelector as any valid CSS selector string. If you do not pass anything, or if no element is found matching your selector, then the default trigger button will be used to open or close the copilot widget |
Good to know!
The API keys we provide to you control authentication to Rapidflare. Please do not distribute these keys outside your enterprise.
Widget Versioning
The script URL: https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js is a public URL to our Copilot widget UI asset, hosted on our CDN. This URL points to the latest version of the copilot script. We recommend using this URL to ensure that you receive continuous updates to the widget embedding functionality as we release them.
As the widget's configuration javascript API changes, or there are large breaking changes to copilot embedding functionality, we will version the widget. These are typically rare and will occur infrequently.
If you desire more well defined version control, you can pin to our major or minor release streams. Though we don't recommend this, here's how you would do that pointing to our versioned assets:
| Method | Latest Stream / Version | URL |
|---|---|---|
| Pin to major, receive additve improvements and bug fixes | 2.x | https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/2.x/script.js |
| Pin to minor, receive only bug fixes | 2.1.x | https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/2.1.x/script.js |
| Pin to specific version | 2.1.x | https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/2.1.8/script.js |
| Pin to latest version | latest | https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js |
The current latest version is 2.1.8.
What does versioning control?
The script version only controls the embedding, launching capabilities and behavior of the widget. The script's version does not determine how the copilot rendered within the widget looks, feels and behaves or what it is capable of. As we keep innovating on the copilot, you will receive continuous updates to the rendered copilots whether you are pinned to a specific version or not. Your organization's branding of the copilot will remain backwards compatible.
Warning!
If you pin to a minor stream, you will not receive additive, new updates.