WABridges
← All guides
Guide

A "Connect WhatsApp" button,
living inside your app.

Give your customers a one-click way to link their WhatsApp number — the pairing QR rendered in your own UI, the bridge provisioned behind the scenes, zero WhatsApp branding. It's an afternoon of work on top of WA Bridges.

Start free → View API docs

Every integration page has the same buttons: Connect Stripe, Connect Slack, Connect Google. The ones customers actually finish are the ones that never leave the product — click, authorize, done. WhatsApp can be one of those buttons.

With WA Bridges, "Connect WhatsApp" is three moves behind one click: provision a bridge for the customer, pull the pairing QR or link-code, and render it inside your own modal. The customer scans it with their phone, your backend hears the "connected" webhook, and the button flips to "Connected." No redirect, no WhatsApp logo, no support ticket. You build the flow once and every customer self-serves.

How it works

1
Provision a bridge on click
When the customer clicks "Connect WhatsApp", your backend POSTs to /api/instances with their customer_ref and your webhook_url. You get a bridge id and a pairing QR back in one response.
2
Render the QR inside your own modal
Show the returned QR (or the numeric link-code for desktop pairing) in a modal styled like the rest of your app. The customer opens WhatsApp → Linked Devices → Link a Device and scans it. They never see WA Bridges.
3
Listen for the connected event
Your webhook receives a status event when pairing succeeds. Flip the button to "Connected", store the bridge id on the account, and close the modal — the whole loop usually takes the customer under a minute.
4
Handle re-pairing and disconnects
If the customer unlinks their phone or the session drops, your webhook hears it. Show the button as "Reconnect", fetch a fresh QR for the same bridge, and let them re-pair without losing their settings.

What you can build

🔘
The button
  • "Connect WhatsApp" on your settings page
  • One click provisions the bridge
  • No redirect, no OAuth dance
  • Sits next to Connect Stripe/Slack
📱
Inline pairing
  • QR rendered in your own modal
  • Numeric link-code for desktop
  • Styled like the rest of your app
  • Customer never leaves the page
🏷️
Fully white-label
  • No WA Bridges branding shown
  • Your domain, your colors
  • Customers think it's your feature
  • Webhook events stay on your backend
🔁
Reconnect flow
  • Detect unlinks via webhook
  • Button flips to "Reconnect"
  • Fresh QR for the same bridge
  • Settings survive a re-pair

Paste into Claude, ChatGPT, or any AI assistant

Copy this prompt → paste into any AI assistant → get working code in your language.
I want to add a "Connect WhatsApp" button to my web app so customers can
pair their own WhatsApp number without leaving my UI, using WA Bridges.

My stack: [React frontend + Node.js / Express backend — update to yours]
My setup:
- WA_API_KEY: my WA Bridges API key (server-side only, never in the browser)
- Logged-in customers have an account id I'll use as customer_ref

I need:

1. A POST /api/whatsapp/connect backend route. When the customer clicks
   the button, it calls POST /api/instances with their account id as
   customer_ref and my webhook_url, then returns the bridge id and the
   pairing QR to the frontend. Never expose WA_API_KEY to the browser.

2. A React  component that calls that route, opens
   a modal, and renders the QR. It should poll a lightweight status
   endpoint (or accept a pushed update) and flip to "Connected" once the
   bridge is paired.

3. A POST /webhook handler that updates the account's connection status
   when WA Bridges reports paired/disconnected, so the button reflects
   reality on the next load.

Please read the WA Bridges API docs before writing any code:
https://wabridges.com/docs.txt

Keep WA Bridges fully invisible to the end user — the modal should look
like part of my product. Show a clean "Reconnect" path for when a
customer unlinks their phone.

Why WA Bridges