whatsapp

How to integrate WhatsApp with Webflow

The WhatsApp integration with Webflow enables direct customer communication through the messaging platform where billions of users already spend their time. This removes friction from contact forms and email workflows by letting visitors start conversations directly from your site.

You can add click-to-chat links for immediate conversations, embed third-party widgets for visual chat buttons, or build custom workflows using the WhatsApp Cloud API. Webflow can't host webhook endpoints, so API implementations require external infrastructure like n8n or Zapier to process incoming messages.

Add WhatsApp click-to-chat links

The simplest implementation uses WhatsApp's official click-to-chat functionality. Create a link or button in Webflow that opens a WhatsApp conversation with your business number when clicked. This works immediately across all devices using official WhatsApp infrastructure.

According to the WhatsApp click-to-chat documentation, format links as https://wa.me/<number> where the number is in international format without zeros, brackets, or dashes.

Implementation steps

1. Add a Button or Link element in Webflow
2. Set the link destination to https://wa.me/1234567890 (replace with your WhatsApp Business number)
3. Style the button following WhatsApp's branding guidelines
4. Publish your site

The link opens WhatsApp on mobile devices or WhatsApp Web on desktop. Users see a pre-filled chat window ready to send their first message. You can add pre-filled message text by appending ?text= to the URL like this: https://wa.me/1234567890?text=I'm interested in your services.

This method requires no third-party services, no authentication, and no ongoing maintenance. It works for contact buttons on service pages, product detail pages, or anywhere you want direct conversation access.

Use third-party WhatsApp widgets

Third-party widget providers offer visual chat buttons with features like custom greetings, multiple agent numbers, and offline messages. These services generate embed codes you paste into Webflow's Custom code embed element.

Webflow's official help documentation recommends Elfsight for WhatsApp chat widgets. Other options include Common Ninja and Clickiny, which offer visual customization tools and free tiers.

Setup process

1. Create an account with your chosen widget provider
2. Use their visual editor to customize appearance, greeting messages, and agent availability
3. Copy the provided embed code
4. In Webflow, drag a Custom code embed element onto your page (from Components > Basic)
5. Paste the embed code
6. Publish your site

These widgets float in the corner of your site, display unread message counts, and let you customize online/offline states. Some providers offer analytics showing button clicks and conversation starts.

The limitation is that conversations still happen in WhatsApp itself. The widget is a visual trigger. Once clicked, users leave your site to continue chatting in their WhatsApp app.

Build with Webflow forms and WhatsApp Cloud API

WhatsApp's Cloud API enables automated messaging workflows, template-based notifications, and bidirectional conversations. Connect Webflow form submissions to WhatsApp messages, send order confirmations, or build customer service flows that sync with your CMS.

The WhatsApp Cloud API runs on Meta-hosted servers, removing infrastructure management. You'll need middleware to bridge Webflow's form webhooks with WhatsApp's webhook requirements. Use platforms like n8n, Zapier, or custom server endpoints.

Send automated notifications from form submissions

Connect Webflow form submissions to WhatsApp messages using automation platforms or custom webhooks. When someone submits a form, trigger a WhatsApp notification to your team or send a confirmation message to the customer.

The WhatsApp Cloud API overview explains that you can send text messages, media files, and template messages through their API endpoints. Template messages require pre-approval through Meta Business Manager before use. Approval typically takes up to 24 hours, though templates can be rejected and require resubmission.

Implementation with automation platforms

1. Set up Webflow form webhooks to trigger on form submission
2. Configure your automation platform to receive the webhook
3. Map form fields to WhatsApp message content
4. Use the Messages API endpoint to send notifications

According to n8n's integration documentation, you can build workflows that connect Webflow form data directly to WhatsApp Business Cloud API endpoints. Webflow's Zapier integration also lets you connect form submissions to WhatsApp notifications.

Custom implementation requirements

• Server endpoint to receive Webflow webhooks and call WhatsApp API (must use HTTPS)
• WhatsApp Business Account with verified phone number
• System user access token from Meta Business Manager (never embed in client-side code)
• Approved message templates for automated notifications

The WhatsApp authentication documentation requires long-lived system user tokens for server-side operations. Tokens must never appear in client-side JavaScript or browser network requests.

Receive and respond to customer messages

Build bidirectional messaging by processing incoming WhatsApp messages and updating your Webflow CMS or triggering automated responses. This requires webhook infrastructure to receive message notifications from WhatsApp.

According to the WhatsApp webhook setup guide, webhooks must respond within 30 seconds and validate message signatures using HMAC-SHA256. Webflow can't receive incoming webhooks from external services, so you need external server infrastructure to process these notifications.

Webhook event types from WhatsApp

• Customer messages like text, images, videos, documents, location data, and interactive button responses
• Message status updates including delivered, read, and sent confirmations

The webhook components documentation details the payload structure for each event type. Parse incoming messages, extract customer data, and use the Webflow Data API to create or update CMS items.

Example workflow

1. Customer sends WhatsApp message to your business number
2. WhatsApp sends webhook notification to your server
3. Your server validates the signature and extracts message content
4. Use Webflow's Create Item endpoint to add customer inquiry to CMS
5. Respond via WhatsApp Messages API with confirmation or information

The webhook security guidelines require validating X-Hub-Signature-256 headers to prevent malicious payloads. Failed signature validation should reject the request immediately.

Note that the Webflow Data API has a rate limit of 60 requests per minute on most plans. Plan accordingly when processing high volumes of incoming messages.

Send media files and documents

Share images, videos, PDFs, and other files through WhatsApp messages using the Media API. Upload files first, then reference the media ID in message requests.

The media documentation lists supported MIME types including image/jpeg, image/png, video/mp4, audio/mp3, and application/pdf. Upload files using POST /v1/media, which returns a media ID for use in message payloads. Images can be up to 16MB, while videos can be up to 100MB depending on the specific media type.

Implementation steps

1. Upload media file using POST /v1/media
2. Store the returned media ID
3. Send message with media using POST /v1/messages including the media ID in the payload
4. Media remains accessible for future messages

Use this for product catalogs, order confirmations with invoices, appointment details with location maps, or customer service documentation.

What you can build

Integrating WhatsApp with Webflow enables real-time customer communication, automated notifications, and conversational workflows that connect website interactions to messaging channels.

• Service booking confirmations: Send appointment confirmations, calendar invites, and reminder messages automatically when customers book through Webflow forms with location details, service provider information, and preparation instructions via WhatsApp
• E-commerce consultation flows: Add "Chat about this product" buttons on product pages that open WhatsApp conversations with pre-filled product details, giving sales teams context about which product page the customer viewed for targeted recommendations
• Lead qualification workflows: Capture contact information through Webflow forms, send immediate WhatsApp messages with qualifying questions, and update CMS records based on customer responses to build conversational intake flows that gather information before scheduling calls
• Order status notifications: Connect e-commerce platforms to WhatsApp messaging to send shipment tracking updates, delivery confirmations, and support information as orders progress so customers can reply directly to ask questions or request changes