Allo Onboarding

A side-by-side tool the Allo sales team uses on a Google Meet to capture how a new SMB customer wants their phone calls handled — and exports the setup as an Excel for the onboarding team to provision the account.

Live demo (two directions to compare): https://allo-onboarding.vercel.app

Direction	URL	What it is
Hub	/	Pick-a-direction page for the sales team and MJ to compare
Canvas	/canvas	Drag-and-connect visual flow builder — @xyflow/react v12 + elkjs auto-layout, port-pinned routing, snap-to-grid, minimap. Like Make / Zapier.
Wizard	/wizard	One question at a time. Apple-calm, mobile-perfect. Like Typeform / Stripe Atlas.

Both directions write to the same data model and produce the same Excel for onboarding@withallo.com. They differ only in how the rep + customer get there.

Why this exists

Onboarding a traditional business onto Allo currently takes ~1 hour on a Meet because the product is too complex to self-serve. The sales rep walks the customer through their call flow ("when someone calls main, who picks up? what about delivery?") and types it into a Google Doc.

This tool collapses that hour into:

1. A shareable URL the rep pastes in the Meet chat — both sides edit live.
2. Plain-English steps (Ring my team, Phone menu, Forward to another number, Voicemail) — never the words "IVR", "node", or "cascade".
3. A Send to onboarding button that emails a clean Excel to the ops team.

Stack

• Next.js 16 + React 19 + TypeScript + Tailwind v4
• @xyflow/react v12 + elkjs for the canvas (drag, connect, ELK layered auto-layout with FIXED_POS port hints)
• framer-motion for the wizard's fade-between-steps
• @tanstack/react-table for the team table (inline-editable, paste-from-CSV)
• xlsx for the export (4-sheet workbook: Numbers, Call flow, Team, Summary)
• sonner for toasts
• shadcn-style primitives in src/components/ui/

The Allo brand system (canonical tokens, fonts, super-button) is ported from allo-landings — see src/app/globals.css and public/fonts/.

Running locally

pnpm install
pnpm dev      # → http://localhost:4007

Deploy

vercel --prod

Deployed to the the-mobile-first-company Vercel team. Aliased at https://allo-onboarding.vercel.app.

No backend yet — state lives in sessionStorage (per-route scope: :canvas, :wizard). When MJ picks a direction we'll add Supabase persistence, share-link auth, and Claap transcript ingestion for the AI-draft entry.

Repo layout

src/
  app/
    page.tsx                      Hub — 2 direction cards + compare table
    canvas/page.tsx               BuilderProvider scope="canvas" + BuilderShell
    wizard/page.tsx               BuilderProvider scope="wizard" + WizardShell
    layout.tsx                    Brand fonts loaded via @font-face
    globals.css                   Allo design tokens, super-button, .react-flow overrides
  components/
    builder/                      Canvas direction
      builder-shell.tsx           Topbar + hero + 2-pane layout
      flow-canvas.tsx             Desktop ↔ mobile switcher
      mobile-flow-stack.tsx       Vertical card view (mobile fallback)
      numbers-bar.tsx             Phone-line chips
      team-table.tsx              Inline-editable Notion-style table
      ai-draft-entry.tsx          First-screen Claap-recording picker
      canvas/
        flow-graph.tsx            <ReactFlow> wrapper, drag/connect/zoom enabled
        layout.ts                 ELK layered (DOWN), FIXED_POS port pinning
        use-graph-from-state.ts   Derives nodes+edges from BuilderState, runs ELK
        nodes/*-node.tsx          Custom node renderers per StepKind
        edges/branch-edge.tsx     Smoothstep with branch-pill labels at source
    wizard/                       Wizard direction
      wizard-shell.tsx            Single-column tall layout
      wizard-progress.tsx         Step dots in topbar
      questions/q-*.tsx           Per-step screens
    preview/                      Right-side pane (narration, readiness, export)
    hub/hub.tsx                   Direction comparison page
    ui/*                          shadcn-style primitives
  lib/
    types.ts                      BuilderState, FlowStep union, NumberLine, TeamMember
    store/builder-store.tsx       Context + useReducer + sessionStorage
    seed.ts                       Acme Restaurant demo + 4 industry templates
    narration.ts                  Plain-English description of the flow
    readiness.ts                  Validation (ready-to-send checklist)
    export-excel.ts               4-sheet workbook generator
    validators.ts                 Soft phone + email validation
    wizard/flow.ts                Wizard step sequence
public/fonts/                     ESRebondGrotesque + ABC Normal + Inter

Local-only env

None required for the current build (the Anthropic-powered chat option was retired — pnpm removed @anthropic-ai/sdk). If you re-add an AI feature later, set ANTHROPIC_API_KEY in .env.local.

Status

Phase 4 — both directions deployed, MJ-reviewable. The chat / AI-led direction was tested and dropped (friction with multi-line setups didn't justify the magic). When MJ picks one, Phase 5 polishes that one and drops the loser, plus adds:

• Real Supabase persistence + share-link auth (replaces sessionStorage)
• Claap transcript ingestion for the AI-draft entry (currently mocked)
• Multi-customer hub (list of in-flight onboardings)
• E.164 country-code helper and tighter phone-format validation
• Voice input