Chatterfly

Quickstart

Get a live Chatterfly workflow running on a web page in about five minutes using the serverless embed — no backend code, no token plumbing.

Before you start

You'll need:

  • A Chatterfly account — sign up free if you don't have one.
  • A React app to embed into (Next.js, Vite, CRA — anything that renders React 18+). If you don't have one, the hosted page approach below needs no code at all.

The five steps

1

Create a workflow

In the dashboard, go to Workflows → New. The easiest start is picking a template (e.g. a feedback survey or lead-qualification flow) — or describe what you want to the editor assistant and let it draft the workflow for you.

2

Deploy it

Click Deploy in the editor. This publishes a pinned version of your workflow. In the deployment settings, enable survey mode — this allows anonymous participants to start runs without a server-side token.

3

Copy the deployment ID

From the deployment panel, copy the ID — it looks like dep_abc123.

4

Install the widget

bash
npm install @chatterfly/widget
5

Drop in the component

tsx
import "@chatterfly/widget/dist/style.css";
import { ChatterflyWidget } from "@chatterfly/widget";

export default function MyPage() {
  return (
    <ChatterflyWidget
      deploymentId="dep_abc123"
      apiBase="https://your-chatterfly.example.com"
      onCompleted={() => console.log("Done!")}
    />
  );
}

That's it. When the component mounts, Chatterfly automatically creates an anonymous run, mints a participant token, opens a WebSocket, and renders the conversation. Reload the page and try your workflow end-to-end.

Note: Your API key is never involved on this path — the public endpoint only works for deployments with survey mode enabled and only creates anonymous runs.

Even faster: hosted page

Every survey-mode deployment also gets a Chatterfly-hosted page. Skip the embed entirely and just share the link:

text
https://your-chatterfly.example.com/survey/<tenant-slug>/<survey-slug>

No npm install, no React, no hosting. Branding and the slug are configurable in the deployment settings.

Where to go next