Browser SDK

The Floe browser SDK injects the AI overlay into your product. One script tag. No build step. No dependencies. The overlay appears on top of your existing UI, handling voice AI conversation and guided actions without changing anything about your product.

Installation

Add a single script tag to your product's HTML, just before the closing </body> tag:

<script
  src="https://sdk.floe.so/floe.js"
  data-site-id="YOUR_SITE_ID"
  data-client-key="YOUR_CLIENT_KEY"
></script>

Replace YOUR_SITE_ID and YOUR_CLIENT_KEY with the values from your site settings. That's the entire integration.

The script loads asynchronously. It does not block your page from rendering or interfere with your application's JavaScript. Your product loads exactly as it did before. The overlay initializes in the background and appears when triggered.

What the SDK does

Once loaded, the SDK:

  • Renders the AI overlay inside a Shadow DOM container, completely isolated from your product's CSS. Your styles don't leak in. The overlay's styles don't leak out.
  • Establishes a voice connection via WebRTC to the Floe voice server. Users can talk to the agent naturally and hear responses in real time.
  • Captures screen context so the agent understands what the user is looking at. This happens during active sessions only. See Security for details on data handling.
  • Executes browser actions when the agent needs to click, type, scroll, or navigate. The agent uses the same interface the user sees.

The SDK does not modify your DOM outside of its own overlay container. It does not inject styles into your pages. It does not intercept your network requests.

Configuration options

All configuration happens through data- attributes on the script tag or through the JavaScript API.

Site ID and client key

Required. These connect the SDK to your site in the Floe dashboard.

<script
  src="https://sdk.floe.so/floe.js"
  data-site-id="site_abc123"
  data-client-key="ck_live_xyz789"
></script>

You'll find both values in the Settings tab of your site in the dashboard.

Appearance

The overlay supports light and dark themes. Set the theme to match your product:

<script
  src="https://sdk.floe.so/floe.js"
  data-site-id="site_abc123"
  data-client-key="ck_live_xyz789"
  data-theme="dark"
></script>

Options: light (default) or dark. The overlay adapts its colors accordingly. Enterprise plans support custom branding beyond light/dark.

Trigger conditions

Control when the overlay appears. By default, the overlay is available but does not interrupt the user. You can configure it to activate automatically in specific situations.

On first login: The overlay greets new users automatically after their first sign-in. Good for onboarding flows and improving activation rate.

<script
  src="https://sdk.floe.so/floe.js"
  data-site-id="site_abc123"
  data-client-key="ck_live_xyz789"
  data-trigger="first-login"
></script>

On specific pages: The overlay activates when the user visits a particular URL path. Useful for triggering help on complex pages.

<script
  src="https://sdk.floe.so/floe.js"
  data-site-id="site_abc123"
  data-client-key="ck_live_xyz789"
  data-trigger="page"
  data-trigger-path="/settings/integrations"
></script>

Programmatic: Control the overlay entirely from your own code. The SDK exposes a JavaScript API for full control.

<script
  src="https://sdk.floe.so/floe.js"
  data-site-id="site_abc123"
  data-client-key="ck_live_xyz789"
  data-trigger="manual"
></script>

Then in your application code:

// Show the overlay
window.Floe.open();

// Show with a specific context
window.Floe.open({ intent: "setup-integrations" });

// Hide the overlay
window.Floe.close();

// Check if the overlay is active
window.Floe.isOpen();

The programmatic approach gives you the most flexibility. Trigger the overlay after a user completes signup, when they hit a feature gate, when they've been idle on a page for a certain duration, or based on any logic in your application. See post-sales onboarding for how Floe handles these triggers across the lifecycle.

Verifying the installation

After adding the script tag, check that the SDK loaded correctly:

  1. Open your product in Chrome
  2. Open DevTools (F12) and go to the Console tab
  3. Type window.Floe and press Enter
  4. You should see the Floe SDK object with its available methods

If window.Floe is undefined, check that the script tag is present in the page source, the data-site-id is correct, and the data-client-key matches the one in your site settings.

You can also verify from the Floe dashboard. Go to your site's Overview tab. Once the SDK connects from a browser, you'll see a "Connected" status indicator.

How it loads

The SDK script is served from a global CDN. It's a small loader (under 5KB) that initializes the connection and lazy-loads the full overlay only when needed. On pages where the overlay is not triggered, the performance impact is negligible.

The overlay itself renders inside a Shadow DOM container appended to your document body. Shadow DOM provides full CSS isolation, which means your product's stylesheets and the overlay's stylesheets never conflict. This is why the SDK works on any product without styling issues.

Framework compatibility

The SDK works with any web framework or no framework at all. React, Vue, Angular, Svelte, plain HTML. Because it uses a script tag and Shadow DOM, it sits outside your application's component tree entirely.

For React applications, you can also wrap the script tag in a component if you prefer:

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://sdk.floe.so/floe.js";
  script.dataset.siteId = "site_abc123";
  script.dataset.clientKey = "ck_live_xyz789";
  document.body.appendChild(script);
  return () => script.remove();
}, []);

FAQ

Does the SDK work on single-page applications? Yes. The SDK detects route changes automatically and updates the agent's context when the user navigates within your SPA.

Will the SDK slow down my product? No. It loads asynchronously and does not block rendering. The full overlay is lazy-loaded only when activated. On pages where the overlay never opens, the impact is a single small network request.

Can I use the SDK in development and production with different keys? Yes. Use your development site ID and client key in dev environments. Production gets the production keys. The dashboard shows sessions from each site separately.

What if I need to remove the SDK later? Remove the script tag. That's it. The SDK does not leave anything behind in your product's DOM, storage, or cookies.