Slack

Webflow site activity demands fast action, but new form submissions, published CMS items, and incoming orders are easy to miss when your team is stuck refreshing the dashboard.

Connecting Slack—the channel-based messaging hub where modern teams already live—with Webflow pushes those events straight to the people who handle them. Leads land in a sales channel, fresh CMS content pings the editorial team, and new orders alert fulfillment the moment they hit. Your Webflow site becomes the trigger, and Slack becomes where your team responds, with no manual checking required.

How to integrate Slack with Webflow

What is Slack? Slack is a channel-based communication platform owned by Salesforce. It organizes team conversations into channels by project, topic, or team, and connects with over 2,600 apps. Slack also includes Workflow Builder (on paid plans), which accepts external webhook data and routes it into formatted channel messages.

Teams connect Slack and Webflow when site events need to reach the right people immediately. A demo request should hit the sales channel in seconds. A published blog post should notify the social media team without anyone copying and pasting URLs. These are the workflows this integration supports.

The Slack-Webflow integration supports 3 approaches:

• Slack Incoming Webhooks with custom code let you POST Webflow form data directly to a Slack channel using a JavaScript snippet.
• Webflow-triggered automation flows such as Webflow New Form Submission → Slack Send Channel Message, Webflow New Order → Slack channel message, and Webflow Watch Form Submissions → Slack Create a Message support form notifications, CMS alerts, and order messages without writing code.
• The Webflow Data API and Slack APIs give you full control over bidirectional data flow, message formatting, and channel routing, but require server-side development.

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

Send Slack notifications with Incoming Webhooks

Slack's Incoming Webhooks provide a direct path for sending messages to a channel without a third-party automation tool. You create a webhook URL in Slack, then POST JSON to it from Webflow using a custom script. This approach avoids monthly automation platform costs but requires either a Code Embed element or a JavaScript snippet in your Webflow site's custom code in head and body tags. A paid Webflow site plan is required since the Starter plan blocks custom code.

Create a Slack Incoming Webhook

Slack's Incoming Webhooks feature generates a unique URL that accepts JSON payloads and delivers them as messages to a specific channel.

To create the webhook:

1. Go to api.slack.com/apps?new_app=1 and create a new Slack app from scratch.
2. In the app settings, click Incoming Webhooks and toggle the feature On.
3. Click Add New Webhook to Workspace, select the target channel, then click Allow.
4. Copy the generated webhook URL (formatted as https://hooks.slack.com/services/T.../B.../...).

The webhook URL is the only credential needed. Any valid JSON POST to that URL delivers a message to the selected channel. Once this is in place, Webflow can send simple channel notifications without an automation platform.

Add the webhook script to Webflow

With the webhook URL ready, add a JavaScript snippet to your Webflow page that intercepts form submissions and POSTs the data to Slack.

To add the script:

1. Open your Webflow site, go to the page with the form, and open Page Settings.
2. In the Custom Code section, paste your JavaScript in the Before tag field. The script should listen for the form's submit event, collect field values, and POST a JSON payload to your Slack webhook URL.
3. Publish the site to activate the script.

The minimum JSON payload Slack accepts is:

{
  "text": "New form submission from yoursite.com"
}

For richer formatting, Slack supports Block Kit layouts with sections, fields, and context blocks. That lets you move from a plain text alert to a structured notification.

One security consideration applies here. Placing a Slack webhook URL in client-side JavaScript exposes it in the page source. For production sites with real traffic, route the POST through a serverless function (such as a Vercel Edge Function or Netlify Function) instead of calling the webhook URL directly from the browser. For low-traffic internal tools, the risk may be acceptable.

Set up Open Graph tags for Slack link previews

When someone shares a Webflow page URL in Slack, Slack generates a rich link preview using the page's Open Graph meta tags. This is a zero-code method that works on any Webflow plan.

To configure Open Graph tags:

1. Open the page in Webflow and go to Page Settings.
2. Navigate to the SEO tab.
3. Fill in the Open Graph title, description, and image fields.
4. Publish the site.

Shared links in Slack will now display the title, description, and image you specified. This does not require any integration setup, but it does improve how Webflow links appear in Slack conversations.

Connect with Zapier, Make, or n8n

Automation platforms offer the fastest path from a Webflow trigger to a Slack action. No server-side code is needed. Zapier, Make, and n8n all support direct Webflow-to-Slack connections built around named Webflow triggers and actions.

To set up Webflow-to-Slack notifications with Zapier:

1. Sign in at zapier.com and click Create Zap.
2. Select Webflow as the trigger app, then choose Form Submission as the trigger event.
3. Click Connect and authorize Zapier through Webflow's OAuth redirect. Select your site and form.
4. Click Test Trigger to pull in a recent submission.
5. Add an action step, select Slack, then choose Send Channel Message.
6. Click Connect and authorize Zapier through Slack's OAuth redirect. Select the target channel.
7. Use Zapier's variable picker to map form fields (name, email, message) into the Slack notification text.
8. Click Test Action to verify the message appears in Slack, then click Publish Zap.

This gives you the quickest no-code setup for Webflow form alerts in Slack.

Zapier's Webflow triggers include:

• New Form Submission (instant, via webhook)
• New Order (instant)
• Updated Order (instant)
• New Comment (instant)

These triggers cover the most common Webflow events teams want to push into Slack.

Pre-built Zap templates also support the reverse direction, where a Slack channel message creates a Webflow CMS item or a Slack reaction updates an existing CMS item.

To set up the same workflow with Make:

1. Log in at make.com and create a new Scenario.
2. Add a Webflow module, select Watch Form Submissions, connect your Webflow account, then choose the site and form.
3. Click + to add a Slack module, select Create a Message, and authorize your Slack workspace.
4. Map Webflow form fields into the Slack message body.
5. Click Run once to test, then toggle the scenario On.

This gives you the same core outcome with more room for routing and formatting logic.

Make supports multi-step scenarios natively. A Webflow Watch Form Submissions module can simultaneously create a HubSpot contact, log a row in Google Sheets, and send a formatted Slack notification. Make also supports routing Webflow comments to Slack with keyword-based filtering, where comments containing #bug or #review route to different channels automatically.

n8n provides a self-hosted option for teams that need data to stay on their own infrastructure. It supports Webflow node operations to create, get, update, and delete items, alongside Slack's "Send and Wait for Response" action. This is useful for editorial approval flows where Webflow CMS items need human sign-off before publishing.

These automation options cover the fastest no-code and low-code paths.

Build with the Webflow and Slack APIs

For full control over message formatting, conditional routing, bidirectional data sync, and custom channel management, use the Webflow and Slack APIs directly. This approach requires server-side development (Node.js, Python, or similar) and a hosted endpoint to receive webhook payloads.

The relevant APIs include:

• The Slack Web API handles message posting (chat.postMessage), channel management (conversations.create, conversations.list), and user lookup (users.lookupByEmail)
• Webflow's Data API v2 handles CMS collections, form submissions, and e-commerce orders
• Webflow webhooks trigger real-time events when forms are submitted, CMS items are published, orders are placed, or sites are deployed

Together, these APIs cover both outbound notifications and Slack-driven updates back into Webflow.

Webflow's API documentation recommends webhooks over polling to avoid consuming your site's per-minute request quota.

Forward form submissions to Slack

Register a Webflow webhook for the form_submission trigger type, then transform the payload into a Slack message on your server.

To implement this:

1. Register a webhook by sending POST https://api.webflow.com/v2/sites/{site_id}/webhooks with triggerType set to form_submission and url pointing to your server endpoint. Add a filter object with the form name to scope notifications to a specific form.
2. On your server, parse the incoming JSON payload. Form field values live in payload.data and field definitions in payload.schema[]. Iterate payload.schema to render all fields dynamically, since field keys match the labels set in Webflow.
3. Build a Slack message using Block Kit formatting and POST it to your Slack Incoming Webhook URL or call chat.postMessage with a bot token (Authorization: Bearer xoxb-...).
4. Return HTTP 200 to Webflow immediately, before waiting for Slack's response. This prevents Webflow from retrying the webhook delivery unnecessarily.

Using chat.postMessage instead of an Incoming Webhook gives you access to scheduled messages (chat.scheduleMessage), message updates (chat.update), and user-specific DMs via users.lookupByEmail followed by conversations.open. This is the better route when you need more than a simple channel alert.

Send CMS publish alerts to Slack

The collection_item_published webhook fires only when a CMS item goes live, not on draft saves. This makes it the right trigger for notifying teams that content is ready.

To implement this:

1. Register a webhook with triggerType set to collection_item_published.
2. On your server, extract payload.fieldData.name and payload.fieldData.slug from the webhook payload.
3. Build a live URL from the slug and POST a Slack message with a clickable link using Slack's mrkdwn format: <https://yoursite.com/blog/slug|Article Title>.

Other CMS trigger types include collection_item_created (for editorial intake alerts), collection_item_changed (for update notifications), and collection_item_deleted (for content audit logging). Each can route to a different Slack channel. That lets one CMS workflow fan out to multiple teams.

Route e-commerce orders to Slack

The ecomm_new_order webhook delivers order details including customer info, shipping address, line items, and totals.

To implement this:

1. Register a webhook with triggerType set to ecomm_new_order.
2. Parse key fields from the payload: payload.orderId, payload.customerInfo.fullName, payload.totals.total, and payload.purchasedItems[].
3. Format an order summary with Block Kit sections and POST to a #sales or #orders channel.

Related triggers like ecomm_order_changed and ecomm_inventory_changed can feed #fulfillment and #inventory channels respectively. These hooks turn store activity into real-time operations updates.

Create CMS items from Slack messages

The reverse direction, Slack to Webflow, uses Slack's Events API. Your server subscribes to Slack events and writes to Webflow's CMS API.

To implement this:

1. Configure your Slack app to subscribe to the message.channels event (requires channels:history scope).
2. When a message arrives in a designated channel, parse the event.text field for structured content.
3. POST to https://api.webflow.com/v2/collections/{collection_id}/items with the extracted data mapped to your collection's fieldData schema.

This pattern supports approval workflows too. Subscribe to the reaction_added event, and when a specific emoji (like ✅) is added to a message, call the publish endpoint to move the corresponding CMS item from draft to live. That turns Slack into a lightweight editorial control surface for Webflow.

For webhook security, validate the x-webflow-signature header (HMAC SHA256) on all incoming Webflow webhooks created through OAuth apps. On the Slack side, verify the X-Slack-Signature header using your app's signing secret.

What can you build with the Slack Webflow integration?

Integrating Slack with Webflow lets you turn site activity into instant team communication without manually checking dashboards or email inboxes.

• Lead response pipeline: A demo request form on your Webflow marketing site posts the submitter's name, email, and company to a #leads Slack channel. Sales reps claim leads in real time. Companies like Ruddr use this exact pattern with Zapier to route Webflow form data to both HubSpot and Slack simultaneously.
• Editorial publish notifications: When a content editor publishes a blog post through the Webflow CMS, a formatted Slack message with the article title and live URL hits the #marketing channel. The social media team can start promoting the post within minutes instead of waiting for an email update.
• E-commerce order alerts: New orders from a Webflow store trigger Slack messages in a #fulfillment channel with customer name, shipping address, and line items. Warehouse teams see what to pack without logging into the Webflow dashboard. A Make scenario can simultaneously log the order to Google Sheets and send a confirmation email to the customer.
• Slack-driven CMS content creation: Messages posted to a specific Slack channel automatically create draft CMS items in Webflow. An editorial team can pitch articles in Slack, and approved pitches (marked with an emoji reaction) publish directly to the site. Zapier offers a pre-built template for creating Webflow CMS items from Slack private channel messages.

If you need more control over conditional routing, message formatting, or bidirectional sync, the API integration path covers those cases with full flexibility.