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 after ingestion. 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.

You can also add Ready Reference Guides under Product Knowledge → Reference guides for small authoritative facts missing from your sources. They ground Q&A without supplying demo navigation. Website Agent answers may share relevant excerpts with public visitors, so never put secrets or customer-specific data in a guide.

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 page contains these cards:

• 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 name, phone, email, company, and role; mark individual fields Required, and choose a Phone region when phone is selected. Each field can keep the card's timing or take a moment of its own, so you can ask a name when the chat opens and leave the email until the visitor asks for a demo. Setting the card's timing to Never turns off only that default — a field with a moment of its own is still asked at it, and turning identity capture off is what stops every ask.
  • 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 the Demo Agent's tone, identity, and answer length take over.
• Video avatar turns on the live presenter, and is off by default. On, the launcher becomes a Talk to me presenter and live sessions get a talking head; off, Floe uses the compact Ask pill. Pick a presenter from Floe's curated set: there is nothing to upload and nothing to configure, and Floe hosts the clips. Visitors who prefer reduced motion get a still presenter. During a call the live presenter stays on screen for the whole conversation. If you would rather it settle into a quiet idle clip after a stretch of silence, the avatarIdleAfterMs SDK option turns that on; a resting presenter still holds an open avatar session and is billed for it. The video avatar is enabled per deployment — talk to us if you want it on.

Identity capture happens in the conversation, with no separate form. The agent asks for one detail at a time, skipping anything already known — from a demo link, the SDK's userInfo, or an answer earlier in the same session — and a spoken phone or email is shown in the message box for the visitor to confirm. Each detail is asked for once; a declined detail may be asked one more time as the session wraps up, and a second decline is final. Required details never withhold answers, but an unanswered required detail holds the transition into a live demo. See Ask for their details and consent behavior.

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. 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.

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, topic, and visitor-facing 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, the video avatar, 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, once per SDK instance. No 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." });
});

See Browser SDK: Exit intent for the runtime methods and return values.

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.
• 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, phone, name, company, and designation. It is unverified browser input: it never authenticates the visitor, and it never verifies that a detail belongs to them. The agent may greet them by a name you pass and will not ask for a detail userInfo already matches. A value passed this way only suppresses that ask — it is not recorded as a contact detail captured from the visitor.
• demoCalendarLink (string) overrides the site's booking URL for booking controls. It must use HTTPS. Cal.com, Calendly, and Schedule Hero open inside the agent; other schedulers open separately. An explicit {email} query value enables email prefill.
• 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 stays 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: Talk to me if the video avatar is enabled, otherwise 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. Open it with the main launcher (or Talk to me) and let the agent finish its spoken welcome. Your browser should ask for the microphone at that point; on a browser that only permits the request during a tap, expect a Ready to talk? button instead.
6. 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.
7. 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 and your Ready Reference Guides. Improve and re-run ingestion when the source material is incomplete; add a Reference Guide when a small authoritative fact is absent from those sources.

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, or edit the relevant Reference Guide. A guide edit is available to the agent as soon as it is Ready. For the live-demo hand-off, ask us to refresh the generated demo context after a significant content change; that refresh is not automatic.