Website Agent Setup

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.

Prerequisites

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 Knowledge → Facts 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 agent

A new site starts with the website agent turned on. Its switch is on Website Agent → Setup: turn it off there, and while it is off, its pages offer Turn on the Website Agent instead of the configuration below. A site created before the website agent was on by default keeps the setting it had, so if yours is off, turn it on from the same page. Switching it either way takes effect on your site's next page load, with no redeploy, and keeps your configuration.

Configuring the website experience

Open Website Agent → Configure in the dashboard. The page runs from who presents, to who they are talking to, to what they say:

• 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.
• Personality & 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.
• Languages & voices picks which languages this agent speaks and the voice for each — English only until you add another. The session's voice comes from here, not from Personality & tone. See Languages & Voices.
• Ideal customer profile describes who you sell to: a summary of up to 1,000 characters and up to eight buyer personas, each with a name and pain points. Floe drafts it from your content when research runs; edit it to say who you sell to. The Website Agent and the Demo Agent both use it: to choose which question is worth asking, and to lead with the part of your product that addresses a matching visitor's problem. It adds no questions and is never mentioned to a visitor. Once a conversation or a demo ends, Floe also uses it for the lead score your team sees. Clear it and both agents behave as they would without one, and leads are scored on engagement alone; a profile you cleared stays empty. A change applies from the next conversation. The same card is on Demo Agent → Configure. It is separate from the Demo Agent's qualification questions.
• Website Agent controls opener suggestions, identity capture, the live-demo hand-off, and display mode.
  • Add up to six opener suggestions (100 characters each), or leave them blank to derive suggestions automatically.
  • 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.
  • Offer a live demo is on by default. Its optional CTA label accepts up to 60 characters; blank uses the shared site CTA.
  • Display mode is a floating card or a docked sidebar; see below.

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. An email that is obviously not a real inbox, such as test123@gmail.com, is declined and never stored. Required details never withhold answers, but an unanswered required detail holds the transition into a live demo, and the agent asks for it again if the visitor asks for the demo while it is still unanswered. 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 sidebar

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. Nudges are grouped by page, and each one reads as a sentence: the part of the page a visitor reaches, and what the agent says there. You can edit the message (up to 90 characters), move a nudge to another section of its page or to the page itself, add one for any page, and switch off one nudge, a page's nudges, or all nudges without deleting any. A nudge set for the page itself shows until the visitor reaches a section that has its own nudge. A site can hold up to 300 nudges. Logo, accent color, and the shared CTA belong in site Settings.

For the last 7, 30 or 90 days the page also shows how each nudge did: times shown, clicks and click rate, with totals for the site and the number of chats started, meaning new conversations a visitor began within two minutes of clicking a nudge. These count events, not people: a visitor who meets the same nudge on three separate page loads counts three times. The Never clicked filter lists nudges shown at least 50 times in the range without a click. Counts need Collect visitor analytics events to be on under Site → Settings → General → Visitor data collection; while it is off the page shows no counts. A range longer than the site keeps visitor events for is not offered.

Your edits survive research. When research runs again, an ICP or a nudge list you have edited is kept as it is, an ICP you cleared stays empty, and nudges you switched off stay off. Only settings you have never touched are refreshed from your latest content. To rebuild the nudges from your live site on purpose, use Refresh from site on the Nudges page: it asks first, then replaces every nudge on the page, edited ones included, and shows the new list when it's ready. It does not change whether nudges are on or off.

Integrate with a coding agent

Paste this into your coding agent after replacing the client-key placeholder with your client key. Website Agent → Setup shows it, already filled into the embed below:

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 buyer 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 embed

Add the two external scripts near the end of <body>. Keeping initialization in your own file works with a strict Content-Security-Policy. Website Agent → Setup shows this embed with your client key filled in, ready to copy:

<!-- 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() sends the demo request to the Website Agent already on the page: with a video avatar the presenter takes it; without one, or when the presenter can't be shown, the chat panel opens. It resolves false when no runnable demo or enabled Website Agent handled the request, so keep the fallback.

Add exit intent

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 configuration

• 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 setup

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 Knowledge → Library and your Ready Reference Guides under Knowledge → Facts. 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.

FAQ

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. Once you have edited them, later research runs leave them alone; Refresh from site on the Nudges page rebuilds them when you want a fresh set.

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 run your sources again (or let Automatic refresh do it), edit the relevant Reference Guide, or correct what research found. 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.