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.

Tip: This quickstart uses the visual editor. Prefer to author workflows as JSON from your terminal or a coding agent instead? See the CLI or the Agent Quickstart.

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

In the workflow hub, open the Ship tab and click Deploy. This publishes a pinned version of your workflow. In the Deploy dialog, choose Public access — this allows anonymous participants to start runs without a server-side token. (Public access is available for single-participant workflows.)

3

Copy the workflow ID

From the Ship tab, copy the workflow ID — it looks like wf_abc123. Referencing the workflow (rather than a specific deployment) means your embed always targets the latest live deployment and never needs updating when you redeploy.

4

Install the widget

bash
npm install @chatterfly/widget
5

Drop in the component

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

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

That's it. When the component mounts, Chatterfly resolves the workflow's latest live deployment, 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 workflows deployed with Public access and only creates anonymous runs.

Even faster: hosted page

Every Public deployment with a survey slug 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