ManyChat

How to integrate ManyChat with Webflow

ManyChat enables automated customer communication across Instagram DM, Facebook Messenger, WhatsApp, and SMS. Integrating ManyChat with Webflow lets you capture leads from your site, start automated conversations based on visitor actions, and sync contact data between platforms.

You can embed ManyChat widgets directly into Webflow pages using Growth Tools, connect form submissions to ManyChat through Zapier for no-code automation, or build custom integrations using the ManyChat and Webflow APIs for advanced workflows.

Native features, direct embeds and widgets

ManyChat Growth Tools provide chat widgets that embed directly into Webflow sites. Add these widgets to start automated conversations, capture leads, and provide customer support across multiple messaging channels.

Generate widget code from your ManyChat dashboard, then add it to Webflow through Custom Code Embed elements or site-wide custom code in the head tag. Widgets appear as chat bubbles, slide-in forms, or overlay windows that connect visitors to your ManyChat automation flows.

Note: If you don't see "Growth Tools" in your sidebar, look for similar options under "Automation" or search for "Website Widgets" in your dashboard. The functionality remains available but may be located differently depending on your account setup.

Available widget types:

• Instagram DM widgets that open conversations in Instagram messaging
• Facebook Messenger chat embedded as a persistent bubble
• WhatsApp chat buttons that launch conversations (requires WhatsApp Business API setup and ManyChat PRO plan)
• Lead capture forms that feed into ManyChat automation flows
• Triggered overlays based on time on page, scroll depth, or exit intent

Widget visibility depends on visitor browser settings and ad blockers. Test appearance across different devices and browsers. Some extensions block chat widgets by default.

Use automation tools

For form-to-chat workflows without custom code, use Zapier to connect Webflow form submissions to ManyChat. The Zapier integration monitors form submissions and adds contacts to ManyChat with custom field mapping.

Build with Webflow and ManyChat APIs

The ManyChat API provides programmatic access to contact management, messaging automation, and conversation data. Combine this with Webflow's APIs to build custom integrations that sync data or trigger complex workflows.

API integration requires custom server-side code but provides full control over data flow and automation logic. Build implementations that handle authentication, manage contact records, trigger automation flows, and retrieve conversation data.

Note: ManyChat API access may require a PRO subscription. If you're on a free plan, use Growth Tools widgets or Zapier integration instead.

Sync contact data between platforms

Use ManyChat's subscriber management endpoints to create or update contacts, manage custom fields, and assign tags. This requires server-side code to handle webhooks, transform data, and make authenticated API calls.

Implement webhooks on your server to receive form submissions from Webflow, transform data into ManyChat's expected format, and POST to contact endpoints:

// Server-side middleware example
app.post('/webflow-to-manychat', async (req, res) => {
  const formData = req.body;

  const response = await fetch('https://api.manychat.com/fb/subscriber/createSubscriber', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.MANYCHAT_TOKEN}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email: formData.email,
      first_name: formData.name
    })
  });

  res.json({success: true});
});

Trigger automation flows programmatically

ManyChat's API enables programmatic triggering of conversation flows based on Webflow site events. Start onboarding sequences when users complete signup, send product information when visitors view specific CMS collection items, or trigger support flows from help page interactions.

This requires building JavaScript tracking code for your Webflow site, a server endpoint to validate requests and call ManyChat's API, and logic to retrieve or create contact records before triggering flows.

What you can build

Integrating ManyChat with Webflow enables automated customer communication and lead management across Instagram DM, Facebook Messenger, WhatsApp, and SMS channels.

• Embed chat widgets on pages: Add ManyChat Growth Tools widgets to Webflow pages through custom code embeds, with display triggers based on scroll depth, time on page, or exit intent
• Automate contact creation from form submissions: Use Zapier to connect Webflow form submissions to ManyChat, automatically creating contacts, adding tags, and subscribing users to automation sequences without custom code
• Trigger conversation flows from site interactions: Build server-side integrations that monitor user behavior on Webflow pages and programmatically trigger specific ManyChat automation flows through API calls based on CMS item views or button clicks
• Sync contact data to Webflow CMS: Pull subscriber information from ManyChat's API to populate Webflow CMS collections with conversation data and custom field values for personalized website experiences