floe
Home / Docs / Demo Agent Setup

Demo Agent Setup

Setting up the demo automation agent takes about 20 minutes once you have your site configured. The agent needs content to know your product and capabilities to structure what it shows.

Prerequisites

Before configuring the demo agent, make sure you've completed these steps:

  1. Site created: You need a site in the dashboard pointed at your product's URL. See Sites if you haven't done this yet.
  2. Content ingested: The agent's product knowledge comes from your documentation. Add at least your docs site and one other content source (knowledge base, videos, etc.) via ingestion.
  3. Demo context prepared: Capabilities tell the agent what your product can do. Floe prepares them after ingestion. See Capabilities.

If you haven't completed these steps, follow the Quickstart first. The demo agent won't have enough context to run a useful session without all three in place.

For facts that do not appear in those sources, an Owner or Admin can add a Reference Guide under Knowledge → Facts. Ready guides improve answers in the Demo and Website agents, but they never make the agent navigate and do not make a site demo-ready by themselves.

Configuring the demo experience

Open Demo Agent → Configure in the dashboard. The page has six cards, and each card saves independently:

  • Languages & voices picks which languages this agent speaks and the voice for each. English only, until you add another. This is where the session's voice comes from — not the Personality & tone card. See Languages & Voices.
  • Personality & tone controls this agent's identity, tone, answer length, and pace. Warm Guide is the default; Witty Peer, Crisp Expert, and a 500-character custom tone are also available. Identity is optional (120 characters), answer length defaults to Medium, and pace defaults to Brisk.
  • Ideal customer profile describes who you sell to: a summary and up to eight buyer personas with their pain points. Floe drafts it from your content when research runs, and you edit it. The agent uses it to choose what to listen for and which feature to lead with; it adds no discovery questions and never tells a prospect whether they fit. After a demo ends, Floe uses the same profile for the lead score your team sees. It is one profile for the site: the same card is on Website Agent → Configure. See Website Agent Setup.
  • Discovery & Opening selects None (the default), BANT, MEDDIC, MEDDPICC, Challenger, SPIN, Sandler, Gap Selling, or a custom framework of up to 2,000 characters. Add up to eight qualification questions (240 characters each). The agent weaves them across the demo and asks at most one before showing the product.
  • Ask for their details controls which contact details the agent collects and when. It defaults to email and name in a form Before the demo starts. Choose name, phone, email, company, or role, mark individual fields Required, and pick a Phone region if you ask for phone. The other timings ask in conversation: after the intro, after the first feature, or when a full walkthrough is requested. See Ask for their details.
  • Opener chips are the one-tap starting points shown when the demo connects. Add, reorder, or remove up to six chips (100 characters each), or leave the list blank to derive suggestions from your guides.

Logo, accent color, and the booking CTA are shared across agents and live in the site's Settings, not on this page. There is no featured/hidden feature list on Configure: what the agent can show comes from your capabilities and guides.

Demo environment and login

The agent runs against a live instance of your product, signed in as an account you provide. This is configured under Settings → Product credentials, not on the Configure page.

  • Demo/App Domain — the origin the demo starts on. This one lives under Settings → General → Domain Configuration, not on the credentials tab. Use a demo environment or sandbox, never production. Left blank, Floe falls back to the login URL's origin and then your primary domain — so set it.
  • Login URL — where the agent signs in.
  • Demo account email and password — the account the agent uses. Credentials are encrypted at rest.

The first time you enter a demo account email, whether while creating the site or later in Settings, Floe asks you to confirm that you're authorized to let an automated agent sign in as this account.

Three limits worth knowing before you pick an account:

  • Your product needs a sign-in page. The agent demos a product it has signed in to, so a product with no sign-in page cannot be demoed.
  • MFA works only through an authenticator app. If the account uses one, save its TOTP secret (the setup key) with the credentials and Floe enters the code itself each time it signs in. Without the key, Floe can't finish signing in to an account that asks for a code. Floe cannot receive codes sent by SMS or email, so an account that needs those can't be used.
  • The demo account needs a password. A magic-link-only account cannot be used for demos.

The agent acts as this user. It will not invite or remove people, change permissions, connect integrations, or send messages. It can open forms and fill in fields to show how a workflow works, but it cannot click the control that would commit the change — Save, Submit, a final Create confirmation, Download, or Export — and it cannot take a destructive or account action (delete, deactivate, cancel subscription, billing, log out). These blocks are unconditional and apply to every product. Use a low-privilege account anyway, as a second line of defense — see Security & Privacy for the full guardrail.

Invest time in your demo data. An empty state kills momentum. The best demo environments have realistic sample data that makes features look like they're already in use.

When a guide ends on a screen with no data in your demo account, Demo Agent → Guides says so above the list: how many guides are affected and which ones. Each affected guide is also marked Needs sample data; expand it for what to add. Adding the records in your product is the fix; editing the guide is not.

Integrate with a coding agent

Paste this into your coding agent after replacing the two placeholders with your client key and site ID. Demo Agent → Setup shows both, already filled into the embed below:

Integrate Floe's Demo Agent into this website.

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", demoMode: true, demoSiteId: "YOUR_SITE_ID", and embedMode: "docked".
- Keep the object returned by Floe() in a const named floe.
- 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 docked embed should catch desktop exit intent, add exitIntent: true or an object with the desired dwell and top-edge threshold. Do not use exit intent with a fullscreen embed or start a session from the exit signal.
- Do not set websiteAgent. Do not add product API access or host-page DOM capture; this mode drives Floe's server-side demo browser.
- If the framework owns a client-side mount lifecycle, initialize once in the site shell and call floe.disconnect() only when that integration is permanently unmounted.
- Report the files changed and how to verify the docked pill, CTA, microphone flow, 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. Demo Agent → Setup shows this embed with your client key and site ID 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",
  demoMode: true,
  demoSiteId: "YOUR_SITE_ID",
  embedMode: "docked",
});

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() resolves true only when a mounted agent handled the request. The docked Demo Agent launcher takes the request while it is showing, whether or not your demo is ready to share, and a demo that isn't ready won't start from it. Check Demo Agent → Setup before you wire the button. Keep the fallback: an invalid configuration or an SDK that did not boot should never leave the visitor with a dead button.

Add exit intent to a docked demo

Exit intent re-opens the docked intro pill, once, when a desktop visitor moves to leave. It is off by default and not available in fullscreen mode:

const floe = Floe({
  clientKey: "YOUR_CLIENT_KEY",
  demoMode: true,
  demoSiteId: "YOUR_SITE_ID",
  embedMode: "docked",
  exitIntent: {
    minTimeOnPageMs: 5000,
    thresholdPx: 20,
  },
});

exitIntent: true uses those defaults. Showing the pill does not start a session, request the microphone, or send a message; the visitor still has to interact with it. 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.
  • demoMode (true, required) selects the Demo Agent. If both agent flags are present, demo mode wins.
  • demoSiteId (string, required) selects the product site whose demo browser should start.
  • embedMode ("docked" or "fullscreen") defaults to "docked". Use "fullscreen" only when the entire page is dedicated to the demo.
  • exitIntent (true or object) is available only with embedMode: "docked". The object accepts enabled, minTimeOnPageMs, and thresholdPx.
  • prospectEmail (string) pre-fills the work-email step. The prospect must still start the demo themselves.
  • userInfo (object) pre-fills prospect context such as name, phone, company, and designation (shown as role). Give phone in international format, including its country code. It is unverified browser input.
  • demoCalendarLink (string) overrides the booking URL configured for the site. It must use HTTPS. Cal.com, Calendly, and Schedule Hero open inside the follow-up screen; other schedulers open separately. An explicit {email} query value enables email prefill.
  • enableAudio (boolean) defaults to true; debug (boolean) defaults to false.

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

Creating and publishing a demo link

Create prospect-facing demos from Demo Agent → Demo Links:

  1. Click New demo link.
  2. Give the link a name, and optionally a campaign, so you can tell it apart in the list. Only your team sees these; the prospect never does.
  3. Optionally add the prospect's name, work email, phone, company, and role. Include the phone's country code. You can also override the site's booking link with an HTTPS URL or set an expiry date.
  4. Click Create preview link. Every new link starts as a private preview.
  5. Open the preview and QA the complete experience before sharing it.
  6. Publish the link when it is ready, then copy and send it to the prospect.

Publishing is a toggle, not a deploy. You can return a published link to preview status, and edits to its name, campaign, prospect context, booking link, or expiry apply immediately without republishing.

A link is listed by its name. Without one it is listed by the prospect it was made for, and a link with neither reads Untitled link with a Name this link action.

What came of a link

Each link shows how many sessions were opened from it, how many demos started, and how many completed, with the totals for all your links above the list. These are counts, not rates, and your own preview runs are counted too. Filter the list by Live, Preview or Disabled.

Prospect context is optional. When provided, the agent can personalize its opener and frame the demo around the prospect's company and role, and it does not ask again for a detail the link already supplies. Without it, the agent starts broadly and adapts to the prospect's live questions.

Sessions are read-only history

Use Demo Agent → Sessions to review session history. It is not where you create, preview, or publish demo links.

Verifying your setup

Demo Agent → Setup says whether your demo is ready to share: it needs at least one live guide and a passing Product sign-in check. That check passes once a login URL and a demo account with a password are saved, unless your product turned Floe away when it last checked the login (a wrong password, a code it couldn't enter). Floe checks each time you save the credentials; if you fixed the account in your product instead, re-enter its password and save to check again. The card says whether Floe has signed in yet, and what to fix when it couldn't. Until both pass, no demo starts: the Website Agent won't offer one, and the Demo Agent's launcher on your site and your demo links won't open one. Demo Links shows the same warning. On Demo Agent → Guides, live guides are marked Live, and only those are offered to prospects as tours. Guides start as drafts and go live when their plan is activated: by Floe, or for your demo tour by your AI coding tool. Ask us if a guide you need is still a draft.

Before sharing a demo link with a prospect, test its private preview yourself:

  1. Create a link from Demo Agent → Demo Links and open its private preview.
  2. Confirm the agent can log into the configured demo environment.
  3. Ask it to show a few important capabilities and verify the navigation and explanations.
  4. Ask about a topic outside its current knowledge and confirm it responds appropriately.
  5. If you added a Reference Guide, ask about that fact and confirm the agent answers without navigating because of it.
  6. Interrupt the agent mid-explanation and confirm it adapts.
  7. Test identity capture and the booking CTA using the settings you configured.
  8. If you enabled exit intent, wait for the dwell time and move the pointer out through the top of the window. The pill should expand once, with no session or microphone prompt until you interact.
  9. Publish the link only after the preview passes QA, then open the published URL once more before sending it.

Things to watch for:

  • Navigation failures: The agent can't find a screen or clicks the wrong element. Update the relevant source content and re-run ingestion.
  • Inaccurate explanations: The agent says something wrong about your product. Check your ingested content for gaps or outdated information, correct the feature or FAQ research got wrong, and use a Reference Guide for a small authoritative fact that is missing from those sources.
  • Missing capabilities: The agent can't address a topic you expected it to know. Verify that relevant documentation was ingested.

Changes to your product's screens are picked up by scheduled re-crawls. When the Floe team turns them on for your site, Floe re-explores your product nightly or weekly, signed in with your demo account, and updates the demo agent's guides. Changes to your written content are different: run your sources again on Knowledge → Sources, or turn on Automatic refresh, and tell us so Floe refreshes the demo context.

What's next

FAQ

Can I run multiple demo sessions at the same time? Yes. Each session is independent with its own browser instance.

Do I need a separate demo account for each session? A single demo account works for concurrent sessions as long as the demo data doesn't conflict. If sessions modify data (e.g., creating records), consider separate accounts to keep each session clean.

What happens if my product is down during a demo? If your demo environment is unreachable, the session can't proceed.

Can prospects interact with the product directly? No. The agent controls the browser while the prospect watches and talks.

Can I use exit intent on a fullscreen demo page? No. Exit intent is for a dormant marketing surface, so it supports the Website Agent and docked demo embeds only.