Integrating our agent with your web applications

This guide will help you learn how to integrate our agent into your web applications.

Embedding via JavaScript

Good to know!

Before you can integrate agents into your enterprise, you will need to grab your API key from your dashboard. You can find it under Agents » Configure » Security

Embedding agents into web applications

You can embed our agents into your web applications by inserting the following code snippet into the `<head>` tag of your HTML file:

Option 1 (recommended)

Option 2

This will launch the agent in the bottom right corner of your web application.

Agent

The `agent` parameter is optional and can be used to configure which agent is rendered inside the widget. The possible values are `qa` for the default conversational agent or `product-selection` for the product selection agent. If you do not pass anything, then the default agent is `qa`.

The agent icon can be either fixed in position at one of the four corners of the screen by passing the `position` parameter to the agent script. If you pass a `position` attribute then the agent 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 agent 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:

Here's an explanation of the various parameters:

Parameter Required? Default Description
`apiKey` Yes - This securely connects your agent to Rapidflare. Do not share this key outside your enterprise!
`theme` Optional - You can customize the appearance of the agent 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 agent 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 agent widget
`agent` Optional - You can pass `agent` as an optional value to configure which agent is rendered inside the widget. The possible values are `qa`, `product-selection`. If you do not pass anything then the default agent is `qa`
`onLoad` Optional - This function will be called when the agent widget is loaded and is ready to interact with
`onOpen` Optional - This function will be called when the agent widget is opened
`onClose` Optional - This function will be called when the agent widget is closed

Parameter	Required?	Default	Description
`apiKey`	Yes	-	This securely connects your agent to Rapidflare. Do not share this key outside your enterprise!
`theme`	Optional	-	You can customize the appearance of the agent 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 agent 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 agent widget
`agent`	Optional	-	You can pass `agent` as an optional value to configure which agent is rendered inside the widget. The possible values are `qa`, `product-selection`. If you do not pass anything then the default agent is `qa`
`onLoad`	Optional	-	This function will be called when the agent widget is loaded and is ready to interact with
`onOpen`	Optional	-	This function will be called when the agent widget is opened
`onClose`	Optional	-	This function will be called when the agent widget is closed

Good to know!

The API keys we provide to you control authentication to Rapidflare. Please do not distribute these keys outside your enterprise

You can control the agent widget programmatically via JavaScript. This allows you to open, close, or update the widget configuration dynamically based on user interactions or other events in your web application.

The script URL: `https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js` is a public URL to our agent widget UI asset, hosted on our CDN.

`script.js` points to the latest version of the agent 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 agent 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, minor or patch 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 `3.x` https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.x/script.js
Pin to minor, receive bug fixes `3.0.x` https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.0.x/script.js
Pin to specific version `3.0.4` https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.0.4/script.js
Pin to latest version `latest` https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/latest/script.js

Method	Latest Stream / Version	URL
Pin to major, receive additve improvements and bug fixes	`3.x`	https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.x/script.js
Pin to minor, receive bug fixes	`3.0.x`	https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.0.x/script.js
Pin to specific version	`3.0.4`	https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.0.4/script.js
Pin to latest version	`latest`	https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/latest/script.js

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 agent rendered within the widget looks, feels and behaves or what it is capable of. As we keep innovating on the agent, you will receive continuous updates to the rendered agents whether you are pinned to a specific version or not. Your organization's branding of the agent will remain backwards compatible.

Warning!

If you pin to a specific version, you will not receive continuous updates

Whitelabel domain deployments

We support whitelabel domain deployments for our customers. This feature allows you to customize your domain, providing a seamless experience for your users while maintaining your brand identity. To enable this feature, please contact us at support@rapidflare.ai

`iframe` based deployments

If you already have whitelabel domain deployments, you can embed our agent into your web applications using an `iframe` tag in your website's HTML. This can be achieved by using the following code snippet:

Good to know!

This will embed the agent into your web application, allowing users to interact with it seamlessly. There is no configuration needed for the iframe to work, it will automatically load the agent from your whitelabel domain.

Overview

Slack

Integrating our agent with your web applications

This guide will help you learn how to integrate our agent into your web applications.

Embedding via JavaScript

Good to know!

Before you can integrate agents into your enterprise, you will need to grab your API key from your dashboard. You can find it under Agents » Configure » Security

Embedding agents into web applications

You can embed our agents 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) >>',
			agent: '<< set agent to show (optional) "qa" | "product-selection" >>',
			onLoad: () => {
				// This function will be called when the agent widget is loaded and is ready to interact with
			},
			onOpen: () => {
				// This function will be called when the agent widget is opened
			},
			onClose: () => {
				// This function will be called when the agent widget is closed
			}
		};
	</script>
	<script type="text/javascript" src="https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js" async defer></script>
</head>

Option 2

<head>
	<script type="text/javascript" src="https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js" id="rfCopilotWidgetScript" async defer></script>
	<script type="text/javascript">
		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) >>',
				agent: '<< set agent to show (optional) "qa" | "product-selection" >>',
				onLoad: () => {
					// This function will be called when the agent widget is loaded and is ready to interact with
				},
				onOpen: () => {
					// This function will be called when the agent widget is opened
				},
				onClose: () => {
					// This function will be called when the agent widget is closed
				}
			});
		});
	</script>
</head>

This will launch the agent in the bottom right corner of your web application.

Agent

Here's an explanation of the various parameters:

Parameter Required? Default Description
`apiKey` Yes - This securely connects your agent to Rapidflare. Do not share this key outside your enterprise!
`theme` Optional - You can customize the appearance of the agent 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 agent 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 agent widget
`agent` Optional - You can pass `agent` as an optional value to configure which agent is rendered inside the widget. The possible values are `qa`, `product-selection`. If you do not pass anything then the default agent is `qa`
`onLoad` Optional - This function will be called when the agent widget is loaded and is ready to interact with
`onOpen` Optional - This function will be called when the agent widget is opened
`onClose` Optional - This function will be called when the agent widget is closed

Parameter	Required?	Default	Description
`apiKey`	Yes	-	This securely connects your agent to Rapidflare. Do not share this key outside your enterprise!
`theme`	Optional	-	You can customize the appearance of the agent 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 agent 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 agent widget
`agent`	Optional	-	You can pass `agent` as an optional value to configure which agent is rendered inside the widget. The possible values are `qa`, `product-selection`. If you do not pass anything then the default agent is `qa`
`onLoad`	Optional	-	This function will be called when the agent widget is loaded and is ready to interact with
`onOpen`	Optional	-	This function will be called when the agent widget is opened
`onClose`	Optional	-	This function will be called when the agent widget is closed

Good to know!

The API keys we provide to you control authentication to Rapidflare. Please do not distribute these keys outside your enterprise

<head>
	<script type="text/javascript">
		window.RFCopilot.open();
	</script>
</head>

<head>
	<script type="text/javascript">
		window.RFCopilot.close();
	</script>
</head>

<head>
	<script type="text/javascript">
		window.RFCopilot.update({
			apiKey: '<< insert updated API key here >>',
			userId: '<< insert updated user ID (email) based on current user context >>',
			theme: '<< "light" | "dark" >>',
			position: '<< "bottom-right" | "bottom-left" | "top-right" | "top-left" | undefined >>',
			widgetTriggerSelector: '<< insert updated valid CSS selector here (optional) >>',
			agent: '<< set agent to show (optional) "qa" | "product-selection" >>'
		});
	</script>
</head>

The script URL: `https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js` is a public URL to our agent widget UI asset, hosted on our CDN.

`script.js` points to the latest version of the agent script. We recommend using this URL to ensure that you receive continuous updates to the widget embedding functionality as we release them.

Method Latest Stream / Version URL
Pin to major, receive additve improvements and bug fixes `3.x` https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.x/script.js
Pin to minor, receive bug fixes `3.0.x` https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.0.x/script.js
Pin to specific version `3.0.4` https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.0.4/script.js
Pin to latest version `latest` https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/latest/script.js

Method	Latest Stream / Version	URL
Pin to major, receive additve improvements and bug fixes	`3.x`	https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.x/script.js
Pin to minor, receive bug fixes	`3.0.x`	https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.0.x/script.js
Pin to specific version	`3.0.4`	https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/3.0.4/script.js
Pin to latest version	`latest`	https://yytyqqbkkrwpwbqbablu.supabase.co/storage/v1/object/public/latest/script.js

What does versioning control?

Warning!

If you pin to a specific version, you will not receive continuous updates

Whitelabel domain deployments

`iframe` based deployments

<iframe
	src="https://your-whitelabel-domain.com"
	title="Rapidflare agent"
	loading="lazy"
	allow="microphone; midi; encrypted-media; autoplay; accelerometer; fullscreen; gyroscope; usb; magnetometer; clipboard-read; clipboard-write; picture-in-picture; web-share"
	style="height: 100%; min-height: 480px; width: 100%; border: none; border-radius: 0px; user-select: none; outline: none; box-shadow: none;"
/>

Good to know!

Overview

Slack

<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) >>',
			agent: '<< set agent to show (optional) "qa" | "product-selection" >>',
			onLoad: () => {
				// This function will be called when the agent widget is loaded and is ready to interact with
			},
			onOpen: () => {
				// This function will be called when the agent widget is opened
			},
			onClose: () => {
				// This function will be called when the agent widget is closed
			}
		};
	</script>
	<script type="text/javascript" src="https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js" async defer></script>
</head>

<head>
	<script type="text/javascript" src="https://cloud.rapidflare.ai/storage/v1/object/public/rapidflare-copilot-widget/latest/script.js" id="rfCopilotWidgetScript" async defer></script>
	<script type="text/javascript">
		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) >>',
				agent: '<< set agent to show (optional) "qa" | "product-selection" >>',
				onLoad: () => {
					// This function will be called when the agent widget is loaded and is ready to interact with
				},
				onOpen: () => {
					// This function will be called when the agent widget is opened
				},
				onClose: () => {
					// This function will be called when the agent widget is closed
				}
			});
		});
	</script>
</head>

<head>
	<script type="text/javascript">
		window.RFCopilot.open();
	</script>
</head>

<head>
	<script type="text/javascript">
		window.RFCopilot.close();
	</script>
</head>

<head>
	<script type="text/javascript">
		window.RFCopilot.update({
			apiKey: '<< insert updated API key here >>',
			userId: '<< insert updated user ID (email) based on current user context >>',
			theme: '<< "light" | "dark" >>',
			position: '<< "bottom-right" | "bottom-left" | "top-right" | "top-left" | undefined >>',
			widgetTriggerSelector: '<< insert updated valid CSS selector here (optional) >>',
			agent: '<< set agent to show (optional) "qa" | "product-selection" >>'
		});
	</script>
</head>

<iframe
	src="https://your-whitelabel-domain.com"
	title="Rapidflare agent"
	loading="lazy"
	allow="microphone; midi; encrypted-media; autoplay; accelerometer; fullscreen; gyroscope; usb; magnetometer; clipboard-read; clipboard-write; picture-in-picture; web-share"
	style="height: 100%; min-height: 480px; width: 100%; border: none; border-radius: 0px; user-select: none; outline: none; box-shadow: none;"
/>

Integrating our agent with your web applications

Embedding via JavaScript

Embedding agents into web applications

Option 1 (recommended)

Option 2

Agent

Widget position

Widget configuration

Controlling widget programatically

Opening the widget via JavaScript

Closing the widget via JavaScript

Updating the widget configuration via JavaScript

Widget versioning

Whitelabel domain deployments

`iframe` based deployments

Integrating our agent with your web applications

Embedding via JavaScript

Embedding agents into web applications

Option 1 (recommended)

Option 2

Agent

Widget position

Widget configuration

Controlling widget programatically

Opening the widget via JavaScript

Closing the widget via JavaScript

Updating the widget configuration via JavaScript

Widget versioning

Whitelabel domain deployments

`iframe` based deployments