LeadConnector

How to integrate LeadConnector with Webflow

LeadConnector connects to Webflow through three distinct approaches that serve different technical requirements. Direct embeds work for chat widgets, prospecting tool widgets, and booking calendars. Automation platforms like Zapier handle form-to-CRM synchronization without code. Inbound webhooks (automated HTTP callbacks that notify your system when events occur) and custom integrations enable advanced workflows with real-time data exchange and custom field mapping.

Direct embeds give you immediate functionality with minimal setup. Generate embed codes from LeadConnector's visual builders and paste them into Webflow's Code Embed element. This approach works for prospecting widgets, chat interfaces, and calendar booking tools.

Important: LeadConnector does not publish a comprehensive REST API reference comparable to Webflow's developer portal. The LeadConnector Zapier API documentation provides high-level capabilities for contacts, opportunities, campaigns, and tasks, but specific endpoint paths, detailed parameter specifications, and complete request/response schemas require contacting LeadConnector developer support directly. The inbound webhook workflow trigger enables custom workflow automation based on Webflow form submissions.

Embed widgets and tracking scripts

LeadConnector provides pre-built embeds for chat, prospecting, and calendar booking that work directly in Webflow without additional middleware. The external tracking script captures form submissions from native Webflow forms and sends data to LeadConnector automatically, where they appear in the Prospect Dashboard with form tags.

Install the tracking script once in your site footer (before the closing </body> tag) and it monitors form submissions from standard HTML forms. Drag a Code Embed element onto specific pages for widgets that appear in designated locations. This approach requires no backend development or API configuration. Note: The tracking script works with native HTML <form> tags but does not support forms inside iframes, popups, or div-based forms without proper form tags.

Implementation example:

1. Generate your account-specific tracking script from LeadConnector dashboard: Navigate to Sites → Forms → Tracking Script and copy the provided JavaScript code
2. In Webflow, go to Project Settings → Custom Code → Footer Code section
3. Paste the tracking script before the closing </body> tag:

<script>
(function() {
var script = document.createElement('script');
script.src = '<https://link.msgsndr.com/js/form_embed.js>';
script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
script.setAttribute('data-debug', 'false'); // Set to 'true' for testing
document.body.appendChild(script);
})();
</script>



1. Publish your site to activate tracking. Test submissions appear in LeadConnector under Sites → Forms → Submissions with "external form" tags.

Common embed use cases:

• Prospecting widgets — Generate lead capture forms in Marketing → Prospecting, copy the embed code, and place in Webflow pages. Submissions appear in the Prospect Dashboard with automatic form tags.
• Webchat widget — Add live chat or AI-powered conversation bots to any page. Configure bot responses and appointment booking through LeadConnector's visual builder.
• Calendar booking embeds — Embed scheduling interfaces that sync with Zoom and trigger automated follow-up sequences. Build calendars in LeadConnector's visual interface and generate embed codes.
• External tracking script — Place before the closing </body> tag to track all form submissions site-wide. Requires standard HTML <form> tags with email fields.

The tracking script does not support forms inside iframes, popups, or div-based forms without proper form tags. To verify that data is being captured properly, you can test with the debug mode by adding data-debug="true" to the script.

Add embed codes through Webflow's Code Embed element for page-specific widgets, or through Webflow Site settings for site-wide integration scripts. For global scripts like tracking codes or site-wide chat widgets, navigate to Site settings and paste the code in the Head Code or Footer Code section. Publish your site to activate tracking and widget functionality.

Connect through automation platforms

Note: No native Webflow Marketplace integration exists for LeadConnector. Automation platforms are the primary method for no-code form-to-CRM synchronization.

Zapier, Make, and Pabbly Connect enable workflows that capture Webflow form submissions and automatically create or update LeadConnector contacts. These platforms handle the connection between Webflow and LeadConnector through pre-built integrations:

Webflow form submitted → Automation platform triggers → LeadConnector contact created/updated

Map Webflow form fields (name, email, phone) to corresponding LeadConnector contact properties through dropdown interfaces. Add conditional logic to route leads to different LeadConnector campaigns based on form source or UTM parameters. Test connections with sample data before activating automation.

Platform-specific Webflow + LeadConnector workflows:

• Zapier integration — Pre-built templates for creating LeadConnector contacts from Webflow form submissions and adding Webflow eCommerce orders to LeadConnector sales pipelines.
• Make.com integration — Visual workflow builder for Webflow form data to LeadConnector contact sync with custom field mapping.
• Pabbly Connect integration — Step-by-step guides for routing Webflow leads to different LeadConnector campaigns based on submission source.

Each platform offers free tiers for testing. Authentication requires API keys from both platforms. Generate LeadConnector API keys through private integrations setup. Webflow site tokens come from Site settings → Apps & Integrations → API Access. Webflow tokens expire after 365 days of inactivity, while LeadConnector private integration tokens require manual rotation every 90 days regardless of usage—set calendar reminders to prevent service interruption.

Set up webhooks in LeadConnector to trigger automation when specific events occur. Generate the webhook URL from your LeadConnector location, then navigate to Workflows → Triggers → Inbound Webhook to configure form submission triggers or other events. Provide the webhook URL from LeadConnector to establish the connection with your automation platform.

Build with Webflow and LeadConnector APIs

The Webflow webhooks API sends POST requests to your endpoint when forms are submitted, CMS items change, or sites publish. Configure Webflow to send form submission data to LeadConnector's inbound webhook workflow endpoint to create contacts, update opportunities, or start campaign sequences.

Authenticate API requests with bearer tokens (authentication credentials passed in HTTP headers to verify API access). Webflow uses site tokens that expire after 365 days of inactivity, while LeadConnector private integration tokens require manual rotation every 90 days regardless of usage—set calendar reminders to prevent service interruption.

Sync form submissions to CRM contacts

Capture Webflow form data and create LeadConnector contacts with custom field mapping and tag assignment. Use Webflow's form submission webhooks to trigger contact creation immediately when users submit forms.

Configure Webflow webhooks through the API rather than the dashboard to receive signature validation headers (x-webflow-signature). Verify webhook authenticity with HMAC validation (Hash-based Message Authentication Code, a cryptographic method to confirm message integrity) to prevent spoofed requests.

Sample webhook payload structure:

Webflow form submission webhook sends:

{
"triggerType": "form_submission",
"_id": "form_submission_id",
"siteId": "site_id",
"formId": "form_id",
"name": "Contact Form",
"data": {
"name": "John Doe",
"email": "[email protected]",
"phone": "+1234567890",
"message": "Interested in services"
},
"d": "2024-01-15T10:30:00.000Z"
}



Transform to LeadConnector contact creation format:

{
"firstName": "John",
"lastName": "Doe",
"email": "[email protected]",
"phone": "+1234567890",
"tags": ["webflow-contact-form"],
"source": "Webflow Website",
"notes": "Interested in services"
}



LeadConnector contact creation requires either email or phone number for each submission. Map Webflow form fields to contact properties ensuring at least one identifier is present:

• Required: Either email OR phone (both not required, but one must be present)
• Recommended: firstName, lastName, email, and/or phone
• Optional: address, companyName, city, state, postalCode, country, tags, notes

Send POST requests to LeadConnector's contact creation endpoint with proper Bearer token authentication. Specific endpoint paths, detailed parameter specifications, and complete request/response schemas require contacting LeadConnector developer support directly, as LeadConnector does not publish a detailed REST API reference comparable to Webflow's developer portal.

Trigger workflows from site activity

LeadConnector workflows respond to specific Webflow events through inbound webhook triggers. Route leads to different campaigns based on form location, start nurture sequences for specific content downloads, or assign opportunities based on UTM parameters.

Configure workflow triggers to filter by domain, page path, or custom data fields. Set up conditional branches that handle different form sources with appropriate follow-up sequences.

Webhook payloads must use JSON format. LeadConnector does not support arrays in custom values, so avoid passing multi-select form fields directly. Additionally, contact creation requires either an email address or phone number. When sending data to LeadConnector webhook triggers, ensure field values are properly formatted as strings rather than arrays.

Implement proper error handling for webhook delivery failures.

Send CRM data to Webflow CMS

Push LeadConnector contact updates, appointment bookings, or opportunity changes to Webflow CMS collections for display on your site. Create dynamic testimonial collections, team directories, or client portal dashboards that reflect real-time CRM data.

Use LeadConnector webhooks to receive notifications when contacts are created (ContactCreate), appointments are booked (AppointmentCreate), or deals are won (OpportunityStatusUpdate). Process these events and update Webflow CMS items through the CMS API.

Available webhook events include: ContactCreate, ContactUpdate, ContactDelete, ContactDndUpdate, ContactTagUpdate, OpportunityCreate, OpportunityUpdate, OpportunityDelete, OpportunityStageUpdate, OpportunityStatusUpdate, OpportunityMonetaryValueUpdate, OpportunityAssignedToUpdate, AppointmentCreate, AppointmentUpdate, AppointmentDelete, InvoicePaid, InvoiceCreate, InvoiceUpdate, InvoiceDelete, InvoicePartiallyPaid, InvoiceSent, InvoiceVoid, TaskCreate, TaskComplete, TaskDelete, OrderCreate, OrderStatusUpdate, NoteCreate, NoteUpdate, and NoteDelete.

• ContactCreate, ContactUpdate, ContactDelete — Contact record changes with full field data
• AppointmentCreate, AppointmentUpdate — Booking events with calendar details and assignment
• OpportunityCreate, OpportunityStatusUpdate — Pipeline changes with deal values and stage information
• InvoicePaid, InvoiceCreate — Transaction events with payment details

Create or update Webflow CMS items using POST requests to create new items or PUT/PATCH requests to update existing items at /collections/{collection_id}/items and /collections/{collection_id}/items/{item_id} respectively. Include the Authorization: Bearer {token} header with your Webflow site token for authentication. Map webhook payload fields to CMS field IDs to maintain proper data types. Note that the API returns a maximum of 100 items per request, requiring pagination for larger datasets. Ensure custom fields exist in LeadConnector before attempting field mapping, as the External Tracking Script and webhook payloads require proper field alignment to avoid validation failures.

Implement idempotency by checking for existing items before creating duplicates. Use the contact ID or opportunity ID from LeadConnector webhooks as a unique identifier in Webflow CMS to prevent duplicate records. Ensure that all contact records include either an email address or phone number, as both platforms require at least one of these fields for proper identification and record matching.

What you can build

Integrating LeadConnector with Webflow enables automated lead capture workflows, appointment booking systems, client portals, and CRM-powered dynamic content.

• Automated lead capture funnels — Capture leads through Webflow landing pages using the External Tracking Script (install once in site footer) or Zapier/Make automation (no-code workflow setup). Form submissions automatically create CRM contacts with proper tagging and trigger email nurture sequences based on form source or UTM parameters. Implementation: Install tracking script → Configure LeadConnector workflows with domain/page filters → Route high-value leads to sales pipelines while lower-intent visitors enter educational campaigns.
• Appointment booking pages — Embed LeadConnector booking widgets on Webflow service pages using Code Embed element. Widgets sync with team availability, generate Zoom links automatically, and trigger confirmation sequences through SMS and email. Implementation: Build calendar in LeadConnector visual interface → Generate embed code → Paste into Webflow Code Embed element → Configure automated follow-up workflows in LeadConnector based on booking confirmations.
• Client portal dashboards — Display appointment history, invoice status, and project updates by syncing LeadConnector data to Webflow CMS collections through Zapier or Make automation. Implementation: Configure LeadConnector webhooks for ContactUpdate and AppointmentCreate events → Connect to automation platform → Map webhook data to Webflow CMS fields → Update CMS items via Webflow API → Build member-only Collection Pages displaying personalized contact data.
• SMS marketing campaigns from website actions — Trigger LeadConnector SMS sequences when users download resources, register for webinars, or reach cart abandonment thresholds. Implementation: Webflow form submission webhook → LeadConnector inbound webhook workflow trigger → Campaign enrollment with SMS sequence start. Build A2P 10DLC campaigns (Application-to-Person 10-Digit Long Code, a registered SMS messaging format for business communications) for account notifications, delivery updates, or promotional messages with proper compliance registration.