Real application code, verified webhooks, transparent provider setup

WhatsApp Chatbot Builder From Conversation to Cloud API App

Describe the customer job, consent, business state, service-window decision, and human handoff. Playcode can build the webhook, workflow, operations UI, tests, and hosting as real code. You connect your own Meta assets, number, templates, and credentials.

No credit card required · No coding needed

Quick answer

What does a WhatsApp chatbot builder create?

A WhatsApp chatbot builder turns a business conversation into inspectable application code: GET callback verification, raw-body App Secret signature checks, durable message identity, consent and reply-window rules, approved-template selection, business records, tests, operations, and hosting. Playcode builds the artifact; you provide Meta ownership, WABA, registered number, credentials, approvals, templates, pricing, and live delivery verification.

1.1M+users
26M+projects
Since 2016

Used by people at

Counts registered accounts using corporate email domains from the companies above. Playcode is a self-serve product, not a contracted vendor to these brands.

From Customer Message to a Verified Business Workflow

Define consent, separate the provider assets, prove retries, then connect Cloud API

01

Describe the Customer Job and Policy

Name what the customer is trying to finish, the data collected, consent and opt-out rules, response timing, human escalation, and the final business record.

Include one inside-window reply and one outside-window template decision in the first brief.

Preview
AI Chat
Publish
I'm a realtor in Miami. I need a website to show my listings and get buyer leads.
4 Questions
2 / 4
What's the main style for your real estate site?
AModern & minimal with clean lines
BLuxury feel with large property photos
CProfessional & corporate
DI'll describe my own style below
Or type your own answer...
Skip
Next
Describe what you want to change...
Economy
Build Progress
4/6
✓
Site layout & navigation
3s
✓
Hero section with CTA
5s
✓
Property listings grid
8s
Building contact form...
About page & bio
Footer & SEO meta
miami-homes.playcode.io
Miami Dream Homes
Your trusted partner in Miami real estate
Search by neighborhood...
Featured Listings
NEW
$1,250,000
Coral Gables Villa
4 bd|3 ba|2,400 sqft
OPEN
$890,000
Brickell Condo
2 bd|2 ba|1,200 sqft
Get in Touch
02

Build Both Webhook Trust Paths

Playcode can create GET challenge verification with your verify token and POST raw-body HMAC verification with the separate Meta App Secret.

Persist each provider message ID before acknowledgement and keep status callbacks distinct from customer messages.

03

Test the Business and Retry Boundary

Run fixtures for correct and incorrect verification, invalid POST signature, new message, duplicate retry, status callback, and incomplete batches.

Local tests prove handler behavior without claiming a registered number, approved template, or real provider delivery.

Your website is live!

https://
miami-homes.playcode.io
Site is secure - SSL certificate active
Or connect your domainmiami-dream-homes.com
Miami Dream Homes
Your trusted partner
Miami Dream Homes
Your trusted partner
What the first application can include

The Workflow Behind the WhatsApp Conversation

A production chatbot is a provider integration plus a business system

01

Conversation and business state

Structured inputs, validation, confirmation, cancellation, escalation, and a durable request or customer record.

02

Two explicit webhook trust paths

Use your verification token for the GET challenge and the Meta App Secret for HMAC-authenticated POST payloads.

03

Message idempotency

Claim each WhatsApp message ID before acknowledging so provider retries cannot create duplicate bookings, tickets, or leads.

04

Send-policy decision

Check customer-service-window state, approved-template requirements, consent, opt-out, destination, and current cost before sending.

05

Operations and human handoff

Make pending work, failed delivery, assignment, template status, and recovery visible to an authorized operator.

06

Inspectable source and hosting

Own the real application code, data, tests, and deployment while Meta assets and provider obligations remain under your account.

A practical Cloud API launch guide

Separate Verification, Identity, Permission, and Cost

The verification token, App Secret, access token, WABA ID, and Phone Number ID are not interchangeable.

Before you build

Prerequisites

  • Meta business, app, WABA, and phone ownership

    A real Cloud API launch depends on accountable owners for the app, WhatsApp Business Account, registered number, payment, approvals, and credential recovery.

    Ready when: The team can name each asset and owner, access WhatsApp Manager, prove phone ownership, and see current business, number, display-name, template, and payment state.

  • A consented conversation and send policy

    Provider authentication does not grant permission to message a person or bypass the 24-hour customer service and template boundary.

    Ready when: The brief names consent source, opt-out, data use, service-window response, outside-window template, escalation, retention, and prohibited messages.

  • Public HTTPS plus durable inbound storage

    Meta must reach the callback, and provider message identity and business effects must survive retries and process restarts.

    Ready when: The route handles GET and raw-body POST correctly, and storage enforces one durable record per WhatsApp message ID.

Implementation sequence

Do, observe, verify
  1. 01
    Meta app settings, WhatsApp Manager, and Playcode server configuration

    Record every provider asset by responsibility

    Record app ID, WABA ID, Phone Number ID, owners, permissions, and payment path. Store the webhook verification token, Meta App Secret, and access token as separate server-side secrets.

    Expected result

    The application can select the correct app, account, number, and credential without substituting one identifier or secret for another.

    Verify

    Review a redacted asset map and search source, prompts, browser bundles, screenshots, URLs, issues, and logs for live credential patterns.

  2. 02
    Playcode HTTPS webhook route

    Implement GET challenge and POST HMAC separately

    For GET, require `hub.mode=subscribe`, compare `hub.verify_token`, and return `hub.challenge`. For POST, compute `sha256=` HMAC over exact raw bytes with the App Secret and compare `X-Hub-Signature-256` before parsing.

    Expected result

    Correct setup requests validate the callback, while changed or unsigned POST bodies cannot reach business processing.

    Verify

    Run correct and wrong GET-token fixtures, then a wrong POST signature with malformed JSON and confirm authentication happens before parsing.

  3. 03
    Webhook payload adapter, database, and worker

    Persist inbound message identity before acknowledgement

    Validate every message ID in the delivery, claim new IDs under a durable unique constraint, acknowledge status-only payloads separately, return HTTP 200, and dispatch only newly stored customer messages after the response.

    Expected result

    One provider message produces one business effect, duplicate deliveries are harmless, incomplete batches do not create partial records, and pending work is recoverable.

    Verify

    Run new-message, duplicate, status-only, missing-ID, and multi-message validation fixtures; inspect record count before and after post-response dispatch.

  4. 04
    Meta webhook configuration, Graph API, and controlled customer phone

    Connect the WABA and prove permitted delivery

    Deploy HTTPS, complete callback verification, subscribe the app to the intended WABA, register the number, send a controlled customer message, and reply only after checking the service window or approved-template path.

    Expected result

    The real webhook stores one inbound message and one permitted outbound message receives a status callback without duplicate business state.

    Verify

    Capture a redacted smoke record with UTC time, app, WABA, Phone Number ID, inbound message ID, window decision, template name when used, status, and current pricing source.

Decisions that change the build

Direct Cloud API or a solution provider?

  • Direct Cloud API with your team owning Meta setup and operations
  • A solution provider supplying onboarding, inbox, support, or multi-client tooling

Choose: Use direct Cloud API when you can own Meta assets, webhook operations, templates, policies, billing, and support. Choose a provider when its operational service justifies the added dependency.

Tradeoff: Direct integration gives source and API control but more provider operations. A solution provider can reduce setup work but adds fees, contracts, data flow, export limits, and possible lock-in on top of Meta rules.

Free-form reply or approved template?

  • A permitted free-form reply inside the rolling customer service window
  • An approved template for a permitted business-initiated message outside that window

Choose: Record the last customer message and choose at send time. Use free-form content only while the customer service window and policy allow it; otherwise use an approved template with valid consent.

Tradeoff: Free-form replies are conversational but time-bound. Templates allow permitted outside-window contact but require category, content, approval, consent, and current pricing review.

Before you share it

Test checklist

  • Happy path

    Complete the GET challenge, then deliver one correctly signed fictional appointment message with a new provider ID.

    Expected: The challenge is echoed, the message is stored before HTTP 200, and post-response dispatch receives one ID.

  • Invalid input

    Use a wrong GET verification token and send malformed JSON with the wrong POST App Secret signature.

    Expected: The setup request returns 403 and the delivery returns 401 before JSON parsing, storage, or business work.

  • Duplicate or retry

    Redeliver the same signed message ID and separately send a multi-message payload with one missing ID.

    Expected: The duplicate is acknowledged without another dispatch, and the invalid batch creates no partial message records.

  • Published smoke test

    Send a controlled customer message to the registered number and reply through the current permitted window or template path.

    Expected: The subscribed WABA delivers one authenticated inbound event and exactly one permitted outbound message reaches the test customer with status evidence.

If something goes wrong

Common failure cases

Meta will not verify the callback URL

Likely cause
The verification token, mode, challenge response, public URL, TLS, or response time does not match the configured callback.
Check
Inspect GET query keys, safe token comparison result, exact response body, status, TLS, and latency without logging the token.
Fix
Deploy the matching verification token and return the exact challenge promptly only for `subscribe` mode.

All POST deliveries fail signature verification

Likely cause
The handler uses the verification token instead of the App Secret, parses first, or has the secret for a different app.
Check
Compare app ID, raw-body capture order, body byte count, `sha256=` header shape, and secret version without exposing its value.
Fix
Use the matching Meta App Secret and calculate HMAC-SHA256 over untouched POST bytes before parsing.

A webhook retry creates duplicate appointments or tickets

Likely cause
The provider message ID is not uniquely claimed before the business effect.
Check
Search durable records and business writes by message ID and compare receive, insert, acknowledgement, worker, and retry timestamps.
Fix
Enforce one durable message claim before effects and resume the same pending record after worker failure.

Outbound sending fails with a token, number, template, or policy error

Likely cause
The access token, Phone Number ID, WABA assignment, subscription, service-window state, template approval, consent, or payment state does not match.
Check
Inspect the redacted provider error and compare each asset, permission, last customer timestamp, template name, destination, and billing state.
Fix
Correct the specific asset or policy mismatch; do not substitute identifiers or bypass template and consent rules.
Illustrative outcome

A Conversation That Makes the Business State Clear

The customer receives a request ID, understands that the exact time is pending, and sees how to cancel.

Illustrative WhatsApp-style appointment request with pending confirmation and a cancellation instruction
Illustrative conceptThis is an illustrative concept, not a product screenshot. The actual result depends on your brief, Meta assets, templates, business rules, and deployment.
Reproducible local proof

Inspect Both Webhook Trust Paths Before Connecting Meta

The same-release artifact proves deterministic callback behavior. It does not claim a live WABA, registered number, approved template, or Graph API delivery.

8
deterministic Node.js fixture tests
2
separate trust paths: GET token and POST App Secret
0
real customer data or Meta API calls

Download the tested WhatsApp webhook ZIP

Choose the ownership model

Preset Chatbot Platform or Real Cloud API Application?

The provider connection is only one layer of the customer workflow

What you needPreset chatbot platformPlaycode
Conversation designConfigure available blocks, templates, and connectorsDefine the exact customer job, consent, state, and handoff
Source and recordsDepends on export, inbox, and platform data limitsInspectable application source and a business data model you own
Delivery identityOften handled inside the provider workflowExplicit message identity, durable state, tests, and recovery
Meta setup and costsMay bundle onboarding and add service feesYou own Meta assets, provider charges, approvals, templates, and live smoke
WhatsApp workflows worth building

Start with One Customer Job and a Visible Outcome

A narrow flow makes consent, identity, templates, and recovery easier to prove

Appointment Request

Pending request with confirmation and cancellation

Collect a preferred time, create one request, explain that staff will confirm it, and provide a clear cancellation and human-handoff path.

Order Update

Authorized status with template-aware outreach

Verify access, return a bounded status inside the allowed interaction, and use only approved permitted templates for later updates.

Support Intake

One ticket per customer message

Collect a safe summary, create a durable ticket, show the reference, respect opt-out, and make retries idempotent.

Qualified Lead Handoff

Consented structured record for a person

Ask only necessary questions, state what happens next, create one lead, and stop automation when the customer requests a person.

The engine

A software team in one agent

Playcode AI runs the same frontier models that power ChatGPT and Claude - and orchestrates them like a team: it plans the work, delegates to sub-agents, runs long jobs in the background, and reviews its own changes.

Every frontier model

The latest models from every major lab, in one picker. Switch anytime.

ClaudeGPTGeminiGrok

Sub-agents

Big jobs split across specialists - one explores your code, one writes, one audits - working in parallel.

Background tasks

Long builds and migrations keep running while you keep talking. They report back when done.

migration - running

It sees your designs

Have a design in Figma? Paste a screenshot - or a page you like, or a bug - and it builds from what it sees.

Tuned by years of iteration to write production software - structured, typed, maintainable - not throwaway prototypes.

Production code

Real code you can open, read, and edit

Under every project is a codebase the agent keeps production-grade. And you are never locked out of it: open the file explorer and edit any file yourself - server included. No AI required.

Quality is the default

Complete states, secure boundaries, structured code - the bar is what a professional agency would ship.

Every file is yours to open

Browse the whole project - frontend, backend, configuration - and edit directly in the built-in editor.

Developers are welcome

Invite your developer with the right role, or export the project code and files. Nothing is trapped in Playcode.

For teams and organizations

Share it like you share a doc

Playcode is built for organizations, not just solo builders. Workspaces hold your projects, people, and billing; roles and teams decide exactly who sees what.

Workspaces with their own billing

Create a workspace per company, client, or department - each with its own members, projects, and subscription.

Three clear roles

Admins manage, editors build, viewers watch. Set roles on the whole workspace, on a team, or on a single project.

Teams that scope access

Group people into teams and give each team its own projects - or a whole folder of them. Private projects stay private, even inside a shared workspace.

Share outside the workspace

Send a project to any email - a client, a contractor - with exactly the access you choose. No extra seat needed.

Share "Inventory tracker"
Acme Ops workspace
Private
client@partner.co
Editor Invite
Operations team
8 people
Editor
MK
Maya Kowalski
maya@acme.co
ADMIN
JR
Jon Reyes
jon@acme.co
EDITOR
LS
Lena Sato
lena@acme.co
VIEWER
Restricted - only people invited can open it
Real-time

Multiplayer by default

Work on one project together. Write in the same AI chat together. Every message, edit, and setting is fully synchronized - live, for everyone, on every device.

acme-launch · Playcode
MKJR
Maya's laptop
Maya
Add a 'Book a call' button to the hero
Jon
And link it to our calendar, please
Playcode AIDone - button added to the hero and linked to your calendar.Preview updated
Describe the next change...
Jon's phone
Maya
Add a 'Book a call' button to the hero
Jon
And link it to our calendar, please
Playcode AIDone - button added to the hero and linked to your calendar.
Message...
Already there. No refresh.

Same project, same moment

Everyone works in the project at the same time - even in the code editor - without lock-outs or "who has the latest version".

Every device

Start on the laptop, check from your phone: the same live state follows you everywhere you sign in.

Nothing to refresh

Changes arrive over a live connection the instant they happen. Reloading the page is a habit you can drop.

Feels instant

It never makes you wait

Instant

Every click applies immediately on your device. Syncing happens behind you, not in front of you.

Offline

Connection dropped? Your changes queue locally and replay the moment you are back.

Reload-proof

The queue survives closing the tab. Nothing you did is lost while you are away.

Real People. Real Websites Built with AI.

"I built my entire portfolio site in 20 minutes. My clients think I hired a designer. Already got 3 new inquiries this month."
Marcus T. · Freelance Graphic Designer, Austin TX
"We switched from Wix to Playcode. The AI actually understands what we need instead of giving us cookie-cutter templates. Saved us thousands."
Sarah Chen · Owner, Bloom & Petal Floristry
"I update my property listings from my phone while showing apartments. Clients are impressed when I tell them I built the site myself."
David Morales · Real Estate Agent, Miami FL

Simple Pricing

Start small. Upgrade when you're ready.

Starter

$0to start

Try the AI website builder and see results

  • AI credits included to start
  • Publish your site instantly
  • Subdomain included
  • Website hosting included
  • No credit card required
Get Started

Pro

Most Popular
$21/month

Everything you need to build

  • 100 AI credits/month
  • All AI models (12+)
  • Visual editing
  • Custom domains
  • Website hosting included
  • Export your code anytime
  • Private projects
  • Unlimited collaborators
Start Building

Cancel anytime. No hidden fees.

How credits work

Credits are used when AI helps you. Simple edits cost less, complex features cost more.

  • "Change button color" ~0.3-0.5 credits
  • "Add a contact page" ~2-3 credits
  • "Build full landing page" ~5-10 credits

Most users never run out. 100 credits = lots of building.

WhatsApp Chatbot Builder Questions

Yes. Playcode can build the webhook, business workflow, data model, operator interface, tests, worker, and hosting as inspectable source. You still own Meta assets, credentials, number registration, approvals, templates, consent, provider charges, and live verification.

No. Your verification token is used for the GET callback challenge. The Meta App Secret verifies signed POST bodies. The access token authorizes Graph API calls. Keep all three separate and server-side.

The WABA ID identifies the WhatsApp Business Account and its app subscription and assets. The Phone Number ID selects the registered sending number in message API calls. Neither is an access token or a substitute for the other.

Free-form business replies are tied to the rolling customer service window opened by a customer message. Outside it, use an approved template only when consent, category, current provider policy, and pricing allow the contact.

Costs can include Playcode, hosting, Meta delivered-message charges, and a solution provider’s service fees. Rates vary by category, market, provider, volume, and effective date. Check the current official Meta pricing page and provider agreement before launch.

It proves eight deterministic local handler tests and archive integrity. It does not create Meta assets, register a phone, subscribe a WABA, receive a real customer message, approve a template, call Graph API, or prove provider delivery and billing.

Still have questions? Contact us

Build the product behind the conversation

AI app builder Build the customer workflow, data, operator UI, and tests around messaging.How to create a WhatsApp bot Follow the Meta asset, webhook, consent, test, and operations guide.All Playcode builders Compare app, website, bot, and business-workflow paths.Telegram bot builder Build a provider-backed conversation with durable webhook handling.Discord bot builder Build verified commands and deadline-aware interaction handling.

Describe the customer job. Build the system behind it.

Start with one consented WhatsApp workflow, one provider message identity, and one explicit send-policy decision. Playcode can turn it into real code.

Build a WhatsApp appointment bot with confirmation and cancellation...Build My WhatsApp Chatbot

No credit card required. AI credits included. Meta setup and provider charges remain yours.