Website Agent SetupCopy link to this section

The website agent shares the demo agent's knowledge, so setup builds on the same foundation: a site, ingested content, and Floe-prepared demo context. Once those are in place, you enable the website agent and shape how it behaves from your site settings.

PrerequisitesCopy link to this section

The website agent answers from the same knowledge as the demo agent, so it needs the same groundwork:

1. Site created — a site pointed at your product. See Sites.
2. Content ingested — your docs and knowledge base, so answers are accurate. See Ingestion.
3. Demo context prepared — needed for the live-demo hand-off to drive your product. Floe prepares it internally after ingestion; generated capabilities must be refreshed internally when your source content changes. See the Quickstart.

If you only want top-of-funnel Q&A (no demo hand-off), content is the essential piece — that's what answers are grounded in.

Enabling the website agentCopy link to this section

The website agent is off by default. Open Site → Settings → Agents and enable Website Agent. Once enabled, the configuration below becomes available.

Configuring the website experienceCopy link to this section

Open Website Agent → Configure in the dashboard. The current page contains these cards and controls:

• Website Agent controls display mode, identity capture, opener suggestions, the live-demo hand-off, and your ideal customer profile.
  • Identity capture is off by default and never gates the first answer. Ask on open, after 1–10 questions (two by default), or when the visitor shows demo intent; choose at least one of email, name, and company.
  • Add up to six opener suggestions (100 characters each), or leave them blank to derive suggestions automatically.
  • Offer a live demo is on by default. Its optional CTA label accepts up to 60 characters; blank uses the shared site CTA.
  • The ICP summary accepts 1,000 characters and up to eight personas, each with a name and pain points. ICP guidance is separate from the Demo Agent's qualification questions.
• Languages & voices picks which languages this agent speaks and the voice for each — English only unless you enable Hindi. The session's voice comes from here, not from Persona. See Languages & Voices.
• Persona & tone controls this agent's identity, tone, answer length, and pace. Warm Guide is the default, alongside Witty Peer, Crisp Expert, and a custom tone. When a chat becomes a demo, the session keeps the Website Agent's voice and pace while demo-specific tone, identity, and answer length take over.
• Video avatar enables the live presenter and its launcher media, and is off by default. When enabled, upload an MP4 or WebM idle loop (up to 10 MB) to make the closed Website Agent launcher a Talk to me presenter. You can preview, replace, or remove the clip in the dashboard; an embed picks up the change when it reloads or reinitializes, while a visitor's browser may retain a previously fetched clip for up to one year. The optional Poster image URL supplies the still shown before playback and can present the avatar even without an idle loop. When avatar media has a solid-green backdrop, Floe removes that backdrop from the launcher, live call, minimized presenter, and picture-in-picture surfaces; other videos remain unchanged. On the free-standing surfaces — the resting launcher and the live presenter — the frame's own edges are also softened, so a presenter whose shoulders reach the bottom or sides of the clip fades into the page instead of ending on a straight line. Frame your clip with the presenter centred and a little headroom; anything at the very bottom of the frame will be partly faded. Serve externally hosted avatar media with cross-origin access enabled so Floe can process it safely; otherwise it falls back to the original video. With the video avatar disabled, or with neither an idle loop nor a poster, Floe uses the compact pill.

The Website Agent card offers a Floating card (the default) or a Docked sidebar. Sidebar width is 320–480px, with 400px as the default.

The docked sidebar behaves differently at three widths:

Cooperating with the docked sidebarCopy link to this section

To narrow your page, Floe sets margin-right on <html> (plus a matching max-width where the browser supports it) and marks the element with data-floe-docked.

Anything position: fixed on your page will not move. Fixed elements are positioned against the viewport, not against <html>, so a fixed header or cookie bar keeps its full width and ends up underneath the sidebar. This affects most sites, so plan for it.

You have two ways to handle it. Either offset the element yourself, using the --floe-docked-viewport-offset variable Floe publishes — it holds the pixels currently reserved for the sidebar:

/* Only applies while the sidebar is docked. */
html[data-floe-docked] .my-fixed-header {
  right: var(--floe-docked-viewport-offset, 0px);
}

Or turn on Squeeze fixed headers and banners on the Website Agent card, which makes Floe narrow your fixed chrome for you without any CSS. It works by changing which element scrolls the page, so test it on a real page.

The second switch, Tell the site's scripts about the narrower width, reports the reduced width to your responsive JavaScript. Stylesheet media queries always see the full viewport regardless — as do scripts that registered their breakpoint listeners before Floe loaded.

There is a third escape hatch you are unlikely to need. If your page root genuinely cannot take a margin — a 100vw grid, a fixed app shell, or a page whose real scroll container is an inner div — put data-floe-dock-target on that one container and the squeeze moves there instead. Never put it on a fixed element: it stops <html> narrowing altogether, so your page returns to full width and the sidebar overlaps it.

Manage contextual prompts on Website Agent → Nudges. You can keep up to 100 page-scoped nudges, toggle all nudges without deleting them, and enable or disable individual rows. Each nudge defines its page, section match, topic, and visitor-facing bubble copy. Logo, accent color, and the shared CTA belong in site Settings.

Integrate with a coding agentCopy link to this section

Paste this into your coding agent after replacing the client-key placeholder with the value from your site settings:

Integrate Floe's Website Agent into this marketing site.

Requirements:
- Use Floe's hosted browser SDK at https://cdn.floe.so/floe-sdk.iife.js.
- Load the SDK and a same-origin /floe-init.js file as external deferred scripts, in that order. Do not add inline JavaScript.
- In /floe-init.js, initialize Floe exactly once with clientKey: "YOUR_CLIENT_KEY" and websiteAgent: true. Do not set demoMode.
- Keep the object returned by Floe() in a const named floe.
- Mount the integration once in the marketing-site shell so it survives client-side route changes.
- If the site has a "See it live" button, wire it to await floe.requestDemo(). Preserve the site's existing booking or navigation fallback when that method returns false.
- If the site should catch desktop exit intent, add exitIntent: true or an object with the desired message, minimum dwell, and top-edge threshold. Do not start a session from an exit signal.
- Do not hard-code identity capture, opener suggestions, ICP personas, contextual nudges, avatar media, or live-demo availability; those are Website Agent dashboard settings.
- The Website Agent does not require demoSiteId for its in-place demo hand-off; the client key resolves the site.
- If the framework permanently unmounts the integration, call floe.disconnect() during teardown.
- Report the files changed and how to verify the launcher, Q&A, route changes, live-demo hand-off, fallback, and teardown.

Canonical embedCopy link to this section

Add the two external scripts near the end of <body>. Keeping initialization in your own file works with a strict Content-Security-Policy:

<!-- Allow https://cdn.floe.so in script-src. -->
<script src="https://cdn.floe.so/floe-sdk.iife.js" defer></script>
<script src="/floe-init.js" defer></script>

// /floe-init.js — served from your own origin
const floe = Floe({
  clientKey: "YOUR_CLIENT_KEY",
  websiteAgent: true,
});

floe.ready.catch((error) => console.error("Floe failed to initialize", error));

document.querySelector("#see-it-live")?.addEventListener("click", async () => {
  if (!(await floe.requestDemo())) {
    window.location.assign("/book-a-call");
  }
});

requestDemo() opens the existing Website Agent panel with the demo request already sent. It resolves false when no runnable demo or enabled Website Agent handled the request, so keep the fallback.

Add exit intentCopy link to this section

Exit intent is off by default. Opt in with exitIntent: true, or customize the opening message, minimum dwell, and top-edge threshold:

const floe = Floe({
  clientKey: "YOUR_CLIENT_KEY",
  websiteAgent: true,
  exitIntent: {
    message: "Before you go — what would you like to know?",
    minTimeOnPageMs: 5000,
    thresholdPx: 20,
  },
});

After the dwell, a desktop pointer leaving through the browser's top edge opens the dormant Ask Floe panel. It can happen only once for that SDK instance/page. No paid session starts, no microphone permission is requested, and no visitor message is sent until the visitor actually clicks or types.

For mobile or a funnel signal specific to your application, call the manual API after the SDK is ready:

await floe.ready;

checkoutFlow.onAbandonment(() => {
  floe.showExitIntent({ message: "Still deciding? Ask Floe anything." });
});

Use enableExitIntent(options?) and disableExitIntent() to change automatic detection at runtime. Disabling automatic detection does not disable manual showExitIntent(). Both automatic and manual triggers share the same one-shot allowance. See Browser SDK: Exit intent for return values and the complete contract.

Runtime configurationCopy link to this section

• clientKey (string, required) is the public browser key from site settings. It resolves the site for both Q&A and the in-place demo hand-off.
• websiteAgent (true, required) selects the Website Agent. Do not also set demoMode; demo mode takes precedence.
• websiteAgentDisplayMode ("floating" or "sidebar") optionally overrides the dashboard display setting for this embed. Without an override, the site setting applies and ultimately defaults to "floating".
• websiteAgentSidebarWidth (number) applies to sidebar mode, defaults to 400, and is clamped to 320–480.
• launcher (object) accepts position: "bottom-right" | "bottom-left" and an optional pixel inset when another widget occupies the default corner.
• exitIntent (true or object) opts in to one-shot desktop top-edge detection. The object accepts enabled, message, minTimeOnPageMs, and thresholdPx; true uses a 5-second dwell and a 20px threshold.
• userInfo (object) supplies current-session context such as externalId, email, name, company, and designation. Because it comes from browser JavaScript, it does not verify a person, merge records, or unlock another browser's history. Same-browser continuity uses Floe's consent-gated visitor token instead.
• demoCalendarLink (string) overrides the site's booking URL for booking controls. It must use HTTPS; Floe does not append visitor identity or contact-claim data to it.
• debug (boolean) defaults to false.

demoSiteId is not required in Website Agent mode: the public client key resolves the site, and the demo hand-off remains in the same session. Identity capture, nudges, openers, ICP, avatar, and whether to offer a demo are dashboard settings rather than Floe() options.

See the Browser SDK for the shared API and lifecycle methods.

Verifying your setupCopy link to this section

1. Load a page where you've embedded Floe. The launcher should appear in the corner. If Video avatar is enabled and an idle loop or poster is configured, expect Talk to me; otherwise, expect Ask followed by your site's name.
2. Open it and ask a question you know your content covers — confirm the answer is accurate.
3. Ask about something you haven't documented — confirm the agent declines honestly instead of guessing.
4. Scroll a page with a nudge configured and confirm the prompt appears.
5. If exit intent is enabled, wait for its dwell and move the pointer through the top edge. Confirm the dormant panel opens once and that no session or microphone prompt starts until you interact.
6. Ask to see a live demo and confirm the session hands off into the driven product.

If answers are thin or wrong, check the Content tab — the fix is almost always more or better ingested content, then a re-ingest.

FAQCopy link to this section

Do I need a separate integration for the website agent and the demo agent? No. It's one SDK embed. websiteAgent: true runs the top-of-funnel Q&A that hands off into the demo; demoMode: true runs the demo directly.

Where do the nudges come from? Floe generates a starting set from your ingested content, weighted toward buying-intent pages. You then edit, add, or disable them per page in the dashboard.

Can I run the website agent without the live-demo hand-off? Yes. Turn off Offer a live demo and it stays a grounded Q&A surface.

Does automatic exit intent work on mobile? The built-in detector uses a desktop top-edge pointer signal. On mobile, call showExitIntent() from a signal your application owns, such as an abandoned funnel step. It still only opens dormant UI and does not start a session.

How do I update what the agent knows? Update your content and re-run ingestion. For a live-demo hand-off, generated capabilities must be refreshed internally before the demo context reflects the change.