Salesforce platform
OK | Flows
OK | Flows started as a polished Typeform alternative and evolved into a serious Salesforce journey platform. It combines visual authoring, a one-question-at-a-time experience, routing logic, secure prefill, server-to-server CloudPage delivery, audience URL generation, abandonment recovery, gamification, and operational documentation.
Year
2026
Duration
435+ estimated hours
Budget range
€€.€€€
Service
Product platform
Challenge
The real challenge was designing a platform that served several roles at once: campaign authors, journey designers, Salesforce operators, and analysts. It had to feel simple in the UI while supporting complex logic, secure data, Marketing Cloud integration, and operational control.
Solution
I built the architecture on Next.js 16, Supabase/PostgreSQL, and Salesforce Marketing Cloud. Builder, player, logic, delivery, prefill, media, responses, and gamification are separated into clear layers. The result is a product-level tool, not just a collection of screens.
Outcome
A state-of-the-art product that goes beyond classic forms: a governed interaction, personalization, capture, and activation layer for complex campaigns.
Results
- Complete forms, surveys, and journey platform, not just a basic builder
- SFMC integration with CloudPages, Data Extensions, secure prefill, and cron jobs
- Operational model with runbooks, tests, audit, logs, and deployment documentation
Scope
Technology
A stack chosen for the job, not for decoration.
TypeScript
Supabase AuthSupabase PostgreSQLSalesforce Marketing CloudCloudPagesAMPscript / SSJSCloudflare R2
Framer MotionGSAP
Zod
React Hook FormJWT PrefillOpaque Prefill TokensCron JobsServer-to-server WebhooksCapability map
Every layer that makes this project substantial.
Product positioning
OK | Flows works as a governed interaction layer for Salesforce campaigns, not as a generic form tool.
- Visual authoring for multi-step forms and surveys
- Journey orchestration with conditional logic
- Personalization from CRM context and audience data
- Capture, enrichment, and writeback into Marketing Cloud
- Product foundation for campaigns, promotions, and acquisition experiences
User surfaces
The product covers marketing, authentication, dashboard, builder, public runtime, and internal operations.
- Public site with homepage, templates, docs, blog, security, pricing, contact, and legal pages
- Login, magic link, Google OAuth, reset password, and auth callback
- Protected dashboard with form list, folders, creation, editing, and settings
- Public runtime at /f/[slug] with one-question-at-a-time interaction
- Internal pitch surface for management or business teams
Visual builder
The editor is not a flat settings panel; it includes canvas, inspector, preview, block library, and publishing flow.
- Create, select, duplicate, delete, insert, and reorder questions
- Inline editing for titles, descriptions, options, and CTAs
- Contextual inspector for advanced block-specific configuration
- Step preview and full-flow preview
- Undo/redo, keyboard shortcuts, publish warnings, and preflight checks
Block catalog
The system supports simple, structured, hidden, calculated, and campaign-oriented blocks.
- Short text, long text, dropdown, multiple choice, checkboxes, email, phone, number, and date
- Rating, opinion scale, NPS, statement, legal consent, matrix, ranking, and image choice
- Hidden field, hidden JSON, calculated field, website URL, file upload, yes/no, and date time
- Slider, numeric range, address, contact, date range, availability, allocation, and semantic differential
- Best/worst, qualification gate, open numeric grid, location intent, preference center, and constant sum
Theming and visual experience
The visual layer allows branded experiences without touching code.
- 6 base themes: Midnight, Ocean, Sunset, Forest, Lavender, and Minimal
- Controls for width, fonts, buttons, radius, spacing, backgrounds, and surface emphasis
- Header image, logo, logo-only, logo-plus-title, minimal, and plain layouts
- Legal footer, links, shell presentation, and alignment controls
- Success pages with image, multiple CTAs, links, reward image fit, and different style treatments
Runtime and respondent UX
The public player is optimized for speed, accessibility, and personalized paths.
- One-question-at-a-time navigation with progress and per-step CTAs
- Keyboard navigation with Enter, arrows, hotkeys, and optional scroll wheel
- Mobile-first, responsive shell, dynamic header/footer, and path-aware back navigation
- Type validation, required fields, consent capture, qualification gates, and file upload
- Hardened accessibility: semantics, labels, alt text, shift-tab behavior, and interactive states
Logic, visibility, and simulation
The system includes a real journey logic, audit, and simulation layer before publishing.
- Conditional branching by answers or SFMC/prefill context
- Operators equals, not_equals, contains, not_contains, exists, and not_exists
- All/any match modes, first-match-wins evaluation, and default fallback
- Conditional show/hide visibility per block and structured subfield targeting
- Path simulator with sample answers, context, loop detection, hidden-target skips, and unreachable blocks
Secure prefill and personalization
One of the strongest differentiators: personalization without exposing unnecessary PII in URLs.
- Signed JWT prefill with expiration and formId
- Opaque prefill tokens to reduce visible URL data
- Server-side resolution before rendering the journey
- Prefill available for hidden fields, logic, visibility, and personalized content
- Endpoints for individual generation, bulk tokens, and audience sync
Salesforce Marketing Cloud
The SFMC integration is built for real operations: CloudPages, Data Extensions, mapping, logs, and security.
- Global CloudPage settings: endpoint, signing secret, key id, and enable/disable
- Per-form delivery enable, target Data Extension, insert/upsert, and upsert key
- Mapping for response fields, structured subfields, metadata, raw answers, and system fields
- Signed server-to-server webhook with replay protection, timestamp skew, and idempotency
- Integration delivery logs with delivered/failed status, payload snapshots, and target response
Partial responses and recovery
The product captures abandoned progress without blocking the respondent experience.
- Per-form partial capture toggle
- Draft endpoint, response_drafts table, and debounced autosave
- localStorage backup and sendBeacon flush on page exit
- Cron sync to SFMC for incomplete drafts
- Delete-on-success cleanup and retries on delivery failure
Audience prefill runs
OK | Flows can prepare large campaigns by writing personalized URLs into Data Extensions.
- Persisted runs with draft, running, paused, completed, and failed states
- Create, launch, pause, resume, update, delete, and cron-driven continuation
- Batch progression, counters, run history, active-run banner, and campaign id propagation
- Row-level locking with leases to avoid double processing
- Copyable AMPscript/JWT fallback when managed runs are disabled
Gamification and rewards
Gamification is designed as a controlled campaign system, not decorative animation.
- Prize pools with weighted instant-win allocation
- Finite inventory, no-reward state, reward cards, and celebration effects
- Direct reveal, wheel, slots, and symbol/segment configuration
- Discount code lists, claimed-code awareness, and reward image handling
- Events, prize metrics, reveal rate, win rate, and participation volume
Media, analytics, and operations
The platform includes media library, response dashboard, exports, and operational evidence.
- Media upload, deletion, browsing, R2 storage, and builder picker
- Responses dashboard with search, filters, CSV export, and individual inspection
- Metrics for responses, prizes, inventory, win rate, reveal rate, and top mechanic
- CloudPage, SFMC, prefill, partial sync, opaque prefill, and live verification runbooks
- SFMC tests, technical documentation, and feature logs for team onboarding