ManyChat

Sites can collect form submissions and display content, but they can't start conversations with visitors after they leave. There's no built-in way to route a form fill into a Messenger thread, send a WhatsApp follow-up, or qualify leads through a conversational flow.

Connecting ManyChat bridges that gap. Buttons open direct messaging threads in Instagram, Messenger, or WhatsApp; form submissions flow through Zapier into tagged ManyChat subscriber records; and server-side API integrations sync data between both platforms in real time.

How to integrate ManyChat with Webflow

What is ManyChat? ManyChat is a chat marketing and messenger automation platform for creators, small businesses, and brands. It runs automated conversations across Instagram, Facebook Messenger, WhatsApp, TikTok, Telegram, SMS, and email. ManyChat is an official Meta Business Partner and TikTok Marketing Partner.

Teams pair ManyChat with Webflow when they want website interactions to trigger messaging sequences. A visitor clicks a button on a landing page and lands in a Messenger qualification flow. A form submission on a pricing page creates a tagged ManyChat subscriber who receives a WhatsApp follow-up. Website interactions can feed multi-channel conversations that happen outside the browser.

There are three ways to connect them:

• Ref URL links and hosted page links direct visitors from site buttons into ManyChat messaging flows without writing code.
• Zapier automations connect form submissions to ManyChat subscriber creation, tagging, and messaging actions.
• The ManyChat API and the Data API give you control over subscriber management, CMS syncing, and event-triggered messaging, but require server-side development.

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

Add ManyChat links to site buttons

ManyChat generates Ref URLs for Messenger, WhatsApp, and TikTok that open a direct messaging thread when clicked. Visitors tap a button on your page and land in the messaging app with a ManyChat automation already triggered. This method works on the free Site plan and ManyChat's free plan (for Messenger, Instagram, and TikTok channels); WhatsApp Ref URLs require ManyChat's Pro plan and a connected WhatsApp Business API account. No custom code is required. ManyChat also hosts a standalone page for each account, which can serve as an entry point into your automations.

ManyChat's native website chat widget was deprecated in November 2024. The JavaScript snippet (widget.manychat.com) and all Send-To-Messenger overlays, popups, and page takeovers no longer function. If you find legacy ManyChat embed code on an existing site, remove it. Ref URLs and hosted page links are the current recommended approach.

Set up a Messenger Ref URL button

A Messenger Ref URL opens Facebook Messenger and triggers a specific ManyChat automation. The visitor leaves your site and enters a conversational flow inside the Messenger app.

To create and link a Messenger Ref URL:

1. In ManyChat, open the Automation tab and click + New Automation, then Start From Scratch.
2. In the Flow Builder, click + New Trigger and select User clicks a referral link from the Facebook tab.
3. Copy the generated Ref URL (format: https://m.me/[page-username]?ref=[your-ref-code]). Full setup details are in ManyChat's Messenger Ref URL Trigger documentation.
4. In your project, select any Button or Link element.
5. In the Settings panel, set the link type to External URL and paste the Ref URL.
6. Set the link to open in New Tab.
7. Publish your site.

The visitor must have Messenger installed and be logged in for this link to work. On mobile devices, the link opens the Messenger app directly.

Set up a WhatsApp direct link button

WhatsApp direct links open a WhatsApp conversation with your business number. ManyChat's WhatsApp channel requires a Pro plan and a connected WhatsApp Business API account.

To create and link a WhatsApp button:

1. Connect your WhatsApp Business account in ManyChat and set up a WhatsApp automation flow. See ManyChat's WhatsApp Ref URL Trigger guide for setup details.
2. Note your WhatsApp Business phone number.
3. In the Designer, add a Button or Link Block element.
4. Set the link type to External URL and enter https://wa.me/[country-code-and-number] (no spaces, dashes, or plus sign, e.g., https://wa.me/15551234567).
5. Set the link to open in New Tab.
6. Publish your site.

On mobile, this link opens the WhatsApp app. On desktop, it opens WhatsApp Web.

Link to a ManyChat hosted page

ManyChat hosts a standalone page for each account, which can serve as an entry point into your automations. This works on both free plans with no code required.

To link your ManyChat hosted page:

1. In ManyChat, go to Settings > General and copy your my.manychat.com URL.
2. In the Designer, select a Button or Link element.
3. Set the link type to URL and paste the ManyChat hosted page URL.
4. Publish your site.

This approach keeps visitors in a browser tab instead of opening a messaging app, which may reduce friction for users who aren't logged into Messenger or WhatsApp.

Connect site forms to ManyChat with Zapier

Zapier has a trigger for New Form Submission and ManyChat actions for subscriber creation, tagging, and messaging, so you can route form submissions into ManyChat without writing code. One documented path is the pre-built template for New Webflow Form Submission → Add Tag to ManyChat User.

In production workflows, this method typically uses a paid Site plan and a ManyChat Pro plan. Free Site plans have limited form submission capability, while external integrations in ManyChat require Pro or higher.

Set up the Zapier integration

One documented Zap path is New Webflow Form Submission → Add Tag to ManyChat User. You can also pair New Webflow Form Submission with other ManyChat actions shown below.

To connect site forms to ManyChat via Zapier:

1. Build a form in the Designer (drag a Form element onto the canvas, add your fields, and publish your site).
2. Create a Zapier account at zapier.com and start a new Zap.
3. Set the trigger app to Webflow and the event to New Form Submission. Connect your account, then select the target site and form.
4. Set the action app to ManyChat and choose a path such as New Webflow Form Submission → Create ManyChat Subscriber, New Webflow Form Submission → Add Tag to ManyChat User, or New Webflow Form Submission → Send ManyChat Message.
5. Map form fields to ManyChat contact fields (name, email, phone, custom fields).
6. Test and activate the Zap.

Available triggers on Zapier include:

• New Webflow Form Submission
• New Webflow Order
• Updated Webflow Order

Available ManyChat actions on Zapier include:

• Create ManyChat Subscriber
• Add Tag to ManyChat User / Remove Tag From ManyChat User
• Set ManyChat Custom Field
• Send Content to ManyChat User / Send Dynamic Message to ManyChat User
• Subscribe/Unsubscribe ManyChat User From Sequence
• Find ManyChat User by Custom Field / Name / ID / Order ID

Zapier's free plan limits you to 100 tasks per month. Above that limit, Zaps stop processing silently with no error shown to site visitors or the site owner. In practice, that means a live form-to-chat workflow needs task volume monitoring from the start.

Build with the Data API and the ManyChat API

For full programmatic control over subscriber management, CMS syncing, and event-driven messaging, both platforms offer REST APIs. This approach requires server-side development since API tokens must never be exposed in client-side JavaScript. A middleware layer (Node.js server, Cloudflare Workers, or similar) handles the communication between platforms.

Use these APIs:

• The ManyChat API (base URL: https://api.manychat.com) handles subscriber creation, tagging, custom field updates, and flow triggering. Authentication uses a Bearer token with your Page API key.
• The Data API (base URL: https://api.webflow.com/v2) handles CMS collections, form submission reads, and site publishing. Authentication uses a Bearer token (site token or OAuth).
• Webhooks send real-time events like form_submission, collection_item_created, and ecomm_new_order to your server endpoint.

Verify your ManyChat plan's API access before building. Legacy accounts (created before March 2, 2026) can access the API on the Pro plan. Newer accounts may require the Advanced plan. Check your account settings directly with ManyChat.

Create ManyChat subscribers from form submissions

Register a webhook, receive form data at your server, and create or update a ManyChat subscriber with tags and custom fields.

To implement the form-to-subscriber pipeline:

1. Register a webhook for form submissions:

curl -X POST "https://api.webflow.com/v2/sites/{site_id}/webhooks" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "triggerType": "form_submission",
    "url": "https://your-server.com/webhook/webflow-form"
  }'

2. When your server receives the webhook payload, validate the x-webflow-timestamp and x-webflow-signature headers. Extract form fields from payload.data (e.g., email, First Name, Last Name).
3. Create a ManyChat subscriber using the extracted data:

curl -X POST "https://api.manychat.com/fb/subscriber/createSubscriber" \
  -H "Authorization: Bearer YOUR_PAGE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "first_name": "Zaphod",
    "last_name": "Beeblebrox",
    "email": "zaphod@heartofgold.ai",
    "phone": "+115550000000"
  }'

4. If the email already exists, ManyChat returns HTTP 400. Handle this by calling the lookup endpoint to retrieve the existing subscriber ID:

GET "https://api.manychat.com/fb/subscriber/findBySystemField?system_field=email&value=zaphod%40heartofgold.ai" \
  -H "Authorization: Bearer YOUR_PAGE_API_KEY"

5. Tag the subscriber and set custom fields with two separate calls:

curl -X POST "https://api.manychat.com/fb/subscriber/addTagByName" \
  -H "Authorization: Bearer YOUR_PAGE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "subscriber_id": 123456789,
    "tag_name": "webflow-lead-contact-form"
  }'

curl -X POST "https://api.manychat.com/fb/subscriber/setCustomFields" \
  -H "Authorization: Bearer YOUR_PAGE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "subscriber_id": 123456789,
    "fields": [
      {"field_name": "webflow_form_source", "field_value": "Contact Us"},
      {"field_name": "webflow_submission_date", "field_value": "2024-07-30"}
    ]
  }'

6. Optionally trigger a ManyChat flow. First retrieve the flow_ns identifier (not visible in the ManyChat UI) by calling GET /fb/page/getFlows, then send it:

curl -X POST "https://api.manychat.com/fb/sending/sendFlow" \
  -H "Authorization: Bearer YOUR_PAGE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "subscriber_id": 123456789,
    "flow_ns": "content20240101abc123"
  }'

The sendFlow endpoint accepts only subscriber_id and flow_ns. It doesn't accept custom field parameters. Always call setCustomFields before sendFlow if the flow depends on subscriber data. That sequence keeps subscriber data in place before the automation runs.

Sync ManyChat subscriber data to the CMS

ManyChat's External Request block can POST subscriber data from a flow to your middleware, which then creates or updates a CMS item. This is useful for building public directories, testimonial pages, or member profiles populated by chat interactions.

To sync ManyChat data into a CMS collection:

1. In your ManyChat flow, add an External Request block that POSTs subscriber data (name, email, custom fields, tags) to your middleware URL. The payload includes subscriber_id, first_name, last_name, email, custom_fields, and tags.
2. Your middleware receives the data and creates a CMS item via the Data API:

curl -X POST \
  "https://api.webflow.com/v2/collections/{collection_id}/items/live" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "isArchived": false,
    "isDraft": false,
    "fieldData": {
      "name": "Jane Smith",
      "slug": "jane-smith-123456789",
      "contact-email": "jane@example.com"
    }
  }'

3. The slug field is required and must be URL-safe (lowercase, hyphens only). Use a pattern like {first-name}-{last-name}-{subscriber_id} to avoid collisions. The fieldData keys must match the field slugs in your collection schema exactly.

ManyChat's External Request block has a 10-second timeout with no retry mechanism. If the API call takes longer, the request fails silently on the ManyChat side. That makes response time and retry handling in your middleware especially important.

What you can build with the ManyChat integration

Connecting ManyChat lets you convert anonymous site traffic into identified messaging subscribers without building a custom backend.

• Lead qualification from landing pages: Add a Messenger Ref URL button to a pricing page. Visitors click and enter a ManyChat flow that asks about company size, budget, and timeline, then tags qualified leads and books a demo via calendar integration. The form captures the initial interest, and ManyChat handles the conversational qualification.
• Post-purchase messaging for e-commerce: Register an ecomm_new_order webhook that triggers your middleware. The middleware creates a ManyChat subscriber from the order's customer email, tags them as a customer, and triggers a WhatsApp order confirmation flow. When the order status changes to fulfilled, a second webhook sends a shipping notification through ManyChat.
• Content announcement broadcasts: When a blog post is published in the CMS, a collection_item_published webhook fires. Your middleware updates a custom field on ManyChat subscribers with the new post title and triggers a broadcast flow that delivers the content link via Instagram DM or Messenger.
• Automated appointment booking for service businesses: A contact form submission routes through Zapier to ManyChat, creating a subscriber and triggering a WhatsApp flow that confirms the inquiry, asks for preferred appointment times, and sends a calendar booking link. The subscriber receives an automated reminder 24 hours before the appointment.

If you need more control over subscriber segmentation rules, conditional flow triggers, or real-time CMS updates, the API integration path covers those cases.