WhatsApp

Your site handles design, CMS content, and hosting in one place. But visitors who want to reach your business through WhatsApp have no native path from a page to a conversation thread.

Connecting WhatsApp to your site adds direct messaging to any page. Visitors tap a chat button or floating widget and land in a WhatsApp conversation with pre-filled context about the page they were viewing. With the WhatsApp Cloud API and automation middleware, you can also trigger outbound messages from form submissions, order events, and CMS updates.

E-commerce stores can send order confirmations through WhatsApp. Real estate agents can field property inquiries there. SaaS teams can qualify inbound leads, and service businesses can confirm appointments. Any site that relies on fast, personal communication with visitors can use WhatsApp as a contact channel.

How to integrate WhatsApp with Webflow

What is WhatsApp? WhatsApp is Meta's messaging platform with a dedicated Business Platform for programmatic, at-scale customer communication. The WhatsApp Business Platform includes a Cloud API for sending text, rich media, and interactive messages, plus webhook support for receiving inbound messages and delivery status updates. It also has message templates, catalog messaging, and WhatsApp Flows for in-app forms and bookings.

Connect WhatsApp to your site when you need a direct messaging channel that goes beyond contact forms. A real estate firm might add contextual "Chat about this property" buttons to CMS listing pages. A D2C brand might send automated order confirmations through WhatsApp template messages triggered by Ecommerce events.

You can connect WhatsApp to your site in 4 ways:

• Marketplace chat apps add floating WhatsApp buttons to your site without writing code.
• Click-to-chat links and embed widgets let you place WhatsApp contact points on specific pages using native elements or third-party widget code.
• viaSocket connects form submissions and CMS events to WhatsApp messages through automation workflows.
• The Webflow and WhatsApp Cloud APIs give you full control over message sending, CMS syncing, and webhook-driven workflows, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of your setup.

Install a WhatsApp chat app from the marketplace

Several third-party apps in the Apps Marketplace add WhatsApp chat buttons to your site. No official Meta or WhatsApp app exists in the marketplace, but apps like Chat Everywhere, Social Chat Buttons, and Chat Buttons by Chaty each support WhatsApp as a channel. You can install Chat Everywhere through the Apps panel as a marketplace app. All marketplace app methods require a paid site plan.

To install Chat Everywhere:

1. Open your project and go to the Apps panel.
2. Search for Chat Everywhere in the Apps marketplace.
3. Review the listed permissions and click Install.
4. Set up the app settings.
5. Publish your site.

This adds a basic marketplace-installed WhatsApp entry point that you can refine later if you need more customization.

• Social Chat Buttons has WhatsApp, Messenger, Instagram, Telegram, and more with customizable icons and positioning (1,000+ installs).
• Chat Buttons by Chaty has a WhatsApp pop-up alongside 20+ messaging channels (100+ installs).
• Chat Everywhere combines WhatsApp, Facebook Messenger, and SMS in a single floating contact button.

If you need more control over widget appearance, business hours scheduling, or pre-filled messages, use embed widgets from third-party providers, covered in the next section.

Add WhatsApp to your site with links and embed widgets

You can add WhatsApp with native link elements that require zero code or with third-party widget embeds that add chat bubble interfaces with richer features. The link method works on every plan, including the free Starter plan. Widget embeds require a paid site plan and a Core workspace plan or above for custom code access.

Create a click-to-chat link with a native button

Use WhatsApp's official wa.me URL format to open a conversation thread on mobile (WhatsApp app) or desktop (WhatsApp Web) when a visitor clicks the link. You don't need external tools, accounts, or code.

To add a WhatsApp button:

1. Open your project and click the Add panel.
2. Drag a Button or Link Block onto the canvas.
3. Select the element, open the Settings panel, and set the link type to URL.
4. Paste your WhatsApp URL: https://wa.me/15551234567 (use the full international number with no spaces, brackets, or dashes).
5. Enable Open in new tab.
6. Style the button and optionally add a WhatsApp icon image inside the link block.

To pre-fill a message, append a text parameter: https://wa.me/15551234567?text=I'm%20interested%20in%20your%20services. This gives your team immediate context about what the visitor wants to discuss. See the URL format in the WhatsApp Help Center.

This method does not include a chat bubble UI, pre-chat forms, business hours scheduling, or multi-agent support. For those features, use an embed widget.

Embed the Elfsight WhatsApp widget

Elfsight adds a floating chat bubble with customizable colors, welcome messages, agent profiles, business hours scheduling, and display triggers (time on page, scroll depth).

To add Elfsight to a single page:

1. Create an account at elfsight.com, open the App Catalog, and search for WhatsApp Chat.
2. Select a template, enter your WhatsApp phone number, and set up the chat bubble, header, welcome message, position, and display settings.
3. Click Add to website for free and copy the embed code.
4. Click the Add panel, search for "Embed," and drag a Code Embed element onto the page.
5. Paste the Elfsight code into the embed editor and click Save & Close.
6. Publish your site.

The widget will not render on the canvas. It only appears on the published live site. See a working demo at webflow-whatsapp-chat-widget-elfsight.webflow.io.

To place the widget on every page instead, paste the embed code into Custom code in head and body tags settings under Site settings > Custom Code > Footer Code and publish. Footer placement loads the script after the main page content renders, which avoids blocking the initial page load.

Use other embed widget providers

Common Ninja and Clickiny both follow the same embed pattern: set up the widget on the provider's site, copy the generated code, and paste it into a Code Embed element or the site-wide Footer Code field. TimelinesAI offers a free widget generator that lists Webflow as an available platform.

Some browser extensions block chat widgets by default. Users with privacy extensions may not see the widget at all. Consider offering a visible link-based fallback alongside any chat widget.

Connect Webflow and WhatsApp with viaSocket

viaSocket gives you a direct connection between your site and WhatsApp for form submissions, CMS changes, and orders.

viaSocket has a Webflow-WhatsApp integration page with specific trigger-action mappings:

• Form submission triggers a WhatsApp message
• New CMS collection item triggers a WhatsApp message
• CMS collection item deleted triggers a WhatsApp message
• Page metadata updated triggers a WhatsApp message
• New Ecommerce order triggers a WhatsApp message
• Updated order triggers a WhatsApp message
• Inventory change triggers a WhatsApp message

These mappings make viaSocket a direct option for site-triggered WhatsApp notifications without custom backend code.

You'll need a WhatsApp Business Account with a verified phone number and at least one approved message template for outbound notifications.

Build with the Webflow and WhatsApp Cloud APIs

The API path gives you full control over automated messaging, CMS syncing, and custom webhook workflows across both platforms. You'll need server-side development and an external server to receive webhook payloads, since you can't host webhook endpoints natively on your site.

A full API implementation includes four layers:

• The WhatsApp Cloud API (base URL https://graph.facebook.com/v22.0/) handles sending messages, managing templates, and receiving webhooks
• The Data API v2 handles CMS collections and form submissions
• Webhooks trigger real-time events for form submissions, new orders, and CMS item changes
• WhatsApp webhooks deliver inbound messages and outbound delivery statuses to your server

Both APIs use Bearer token authentication in the Authorization header. WhatsApp requires whatsapp_business_messaging and whatsapp_business_management permissions on your Meta developer app.

Send a WhatsApp message when a form is submitted

Fire a webhook on form submission, process the payload on your server, and use the WhatsApp Cloud API to send a template message to the lead or your team.

Implementation steps:

1. Register a webhook for the form_submission event using POST /v2/sites/:site_id/webhooks or through the Designer. Point it at your server's HTTPS endpoint.
2. When your server receives the webhook payload, validate the x-webflow-signature header and extract the form data from payload.data (fields like name, email, phone).
3. Call POST /{phone-number-id}/messages on the WhatsApp Cloud API with a pre-approved utility template:

{
  "messaging_product": "whatsapp",
  "to": "15551234567",
  "type": "template",
  "template": {
    "name": "form_acknowledgment",
    "language": { "code": "en_US" },
    "components": [{
      "type": "body",
      "parameters": [
        { "type": "text", "text": "Jane Doe" }
      ]
    }]
  }
}

Messages sent outside the 24-hour customer service window must use pre-approved templates. Within the window, after a customer messages your business first, you can send free-form text messages and service conversations are free.

Write WhatsApp leads to the CMS

Inbound WhatsApp messages can create CMS items automatically. Your server receives the WhatsApp messages webhook, parses the sender's name and phone number, and writes a new item to a CMS collection.

Implementation steps:

1. Subscribe your app to the WhatsApp Business Account's webhooks using POST /{waba-id}/subscribed_apps with the messages field selected.
2. When an inbound message arrives, parse entry[0].changes[0].value to extract contacts[0].profile.name, messages[0].from, and messages[0].text.body.
3. Create a CMS item with POST /v2/collections/{collection_id}/items:

curl -X POST "https://api.webflow.com/v2/collections/{collection_id}/items" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "fieldData": {
      "name": "Jessica Smith",
      "slug": "jessica-smith",
      "phone": "13557825698",
      "message": "I am interested in your service",
      "source": "whatsapp"
    }
  }'

4. Optionally publish the item immediately with POST /v2/collections/{collection_id}/items/publish and send a WhatsApp reply to acknowledge receipt.

Use the sender's wa_id as a unique identifier to implement upsert logic and prevent duplicate CMS records. Note that the Basic plan includes no CMS at all. You'll need at least a Premium/CMS plan for any CMS-driven WhatsApp integration, so plan your collection structure around both expected lead volume and your plan tier.

What you can build with the WhatsApp Webflow integration

Integrate WhatsApp with your site to add real-time messaging, automated notifications, and lead capture without building a custom communication backend.

• Product inquiry buttons on CMS pages: Add "Chat about this product" buttons to Ecommerce or CMS-driven listing pages. Each button uses a wa.me link with a pre-filled message containing the product name or property ID, so your sales team immediately knows which page the visitor was viewing. Real estate firms use this pattern on individual property listing pages with dynamic WhatsApp URLs populated from CMS fields.
• Automated order confirmations: Trigger WhatsApp template messages from Ecommerce order events. When a customer completes a purchase, the ecomm_new_order webhook fires, and your server sends a utility template with the customer's name, order total, and estimated delivery date. Follow up with shipping updates using the ecomm_order_changed webhook.
• Form-to-WhatsApp lead alerts: Route form submissions to WhatsApp conversations in real time. A viaSocket workflow captures the form data, sends a WhatsApp notification to your sales team with the lead's details, and optionally sends an acknowledgment message to the lead. Skip manual email checking for time-sensitive inquiries.
• Appointment reminders from CMS data: Store booking data (patient name, phone, appointment time) in a CMS collection, then run a scheduled job that queries upcoming appointments via the Data API and sends WhatsApp reminder templates at defined intervals before the appointment time. Update a reminder_sent field on the CMS item to prevent duplicates.

If you need more control over multi-agent routing, chatbot flows, or bidirectional CMS sync from WhatsApp replies, the API integration path covers those cases with full control.