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 WABridges.
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 WABridges, "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.
We keep the number online and hand you every event. You write the part in the middle.
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.
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 WABridges.
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.
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.
Every loop below is the one above with your own logic in the middle.
Copy this prompt, paste it 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 WABridges. My stack: [React frontend + Node.js / Express backend, update to yours] My setup: - WA_API_KEY: my WABridges 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 Reactcomponent 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 WABridges reports paired/disconnected, so the button reflects reality on the next load. Please read the WABridges API docs before writing any code: https://wabridges.com/llms-full.txt Keep WABridges 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.
What you get on the WhatsApp side, whatever you build on yours.
Other guides that build on the loop you just read.
Choosing a provider? See how WABridges compares to Twilio, 360dialog, and other WhatsApp API providers.