Copper

How to integrate Copper with Webflow

Connecting your website forms directly to your CRM prevents leads from sitting in email inboxes or spreadsheets. When prospects submit contact forms or demo requests on your Webflow site, their information should flow immediately into your sales pipeline where your team can act on it. Manual data transfer creates delays and errors that cost you opportunities.

You can integrate Copper with Webflow through third-party automation platforms or direct API integration. Zapier provides the fastest setup with pre-built templates that work without code. n8n and Make offer native node support for custom workflows and bi-directional synchronization. Direct API integration gives you complete control over data flow and field mapping but requires custom development work.

Use third-party automation apps

Connect Copper to Webflow through automation platforms like Zapier, n8n, or Make. These platforms capture Webflow form submissions via webhooks and create corresponding records in Copper CRM.

This approach requires no coding and typically takes 10-15 minutes to configure using visual workflow builders. Zapier provides pre-built automation templates ready to use, while n8n offers full native node support for custom workflows, and Make provides module support for building custom scenarios.

You authenticate both platforms through OAuth, map form fields to CRM fields using dropdown menus, and activate the workflow. These templates create leads from form submissions, create or update person records with deduplication logic, and submit forms to create new persons.

This integration enables the following actions:

• Create Copper leads from form submissions automatically routes website inquiries into your sales pipeline
• Create or update Copper persons builds your contact database while preventing duplicate records
• Route leads based on form data using automation workflows to organize incoming inquiries
• Create tasks and activities for follow-up on new leads and contacts
• Automate lead synchronization to keep your CRM updated with website form submissions

Zapier works best for straightforward workflows with clear trigger-action patterns. The platform exposes Lead, Person, Company, Opportunity, Task, and Activity actions through pre-built templates.

You cannot access all Copper API endpoints or implement complex conditional logic beyond basic filtering. For more advanced workflows requiring conditional logic or bi-directional synchronization, n8n or Make provide native nodes with greater flexibility.

n8n provides native nodes for both Copper and Webflow, giving you access to full CRUD operations across all entity types. The Copper node supports Company, Person, Lead, Opportunity, Task, and Activity management, while the Webflow node handles CMS operations and form submission triggers. Use n8n when you need complex conditional logic, loops, or custom JavaScript functions within your workflow.

Make offers Copper integration modules paired with Webflow integration modules for CMS and form operations. Make provides visual scenario building similar to Zapier but with more granular control over data transformation and error handling. The platform lacks pre-built Copper-to-Webflow templates, requiring custom scenario construction.

Build with Webflow and Copper APIs

Direct API integration gives you complete control over data flow, field mapping, and synchronization logic. You write code that receives Webflow webhook notifications and makes corresponding calls to Copper's Developer API. This approach works best when you need custom business logic, handle high request volumes requiring optimization, or sync data bi-directionally with conflict resolution. If you don't have a development team, use Zapier instead.

The Webflow Data API uses REST architecture with Bearer token authentication. The Copper API uses REST with three required headers for authentication and identification. Both platforms require HTTPS and support webhook notifications for real-time updates.

API integration requires a server environment to receive webhooks, process payloads, and make outbound API calls. You can deploy this as a serverless function (like AWS Lambda or Vercel), a microservice, or integrate it into your existing application backend.

Capture form submissions in real time

Set up Webflow webhooks to receive form submission data in real-time when visitors submit forms. Create a webhook subscription with the form_submission trigger type, pointing to your server endpoint. Webflow sends a POST request to your URL containing the complete form data, including field values, submission timestamp, and form metadata.

Note that setting a webhook URL in your form's action attribute will redirect users to that URL after submission. For a seamless user experience without redirects, use Zapier or implement custom code that handles the webhook in the background while keeping users on your site.

The webhook payload includes security headers (x-webflow-timestamp and x-webflow-signature for HMAC SHA256, a cryptographic signature method) that you must validate before processing. Webflow will retry failed webhook deliveries up to 3 times and may deactivate webhooks after repeated failures.

Example payload structure (actual fields depend on your form configuration):

{
  "payload": {
    "data": {
      "name": "Jane Smith",
      "email": "jane@example.com",
      "phone": "(555) 123-4567",
      "company": "Acme Corp",
      "message": "Interested in enterprise pricing"
    },
    "d": "2024-01-15T14:30:22.084Z",
    "site": "60f7d8e8f1e4e60011b9c123"
  }
}

Validate webhook authenticity using the x-webflow-signature header before processing. Webflow generates this HMAC SHA256 signature using your webhook secret. Always return HTTP 200 responses to prevent webhook deactivation. Webflow disables webhooks after repeated failures. For Copper CRM webhooks specifically, validate using the secret parameter configured in your webhook subscription.

Create Copper leads using POST /v1/leads with the extracted form data. The only required field is name, but you'll typically populate email, phone_numbers, company_name, and details from form submissions. Include tags to identify the lead source for attribution tracking.

// Create lead in Copper from form data
const copperResponse = await fetch(
  'https://api.copper.com/developer_api/v1/leads',
  {
    method: 'POST',
    headers: {
      'X-PW-AccessToken': process.env.COPPER_API_KEY,
      'X-PW-Application': 'developer_api',
      'X-PW-UserEmail': process.env.COPPER_EMAIL,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: formData.name,
      email: { email: formData.email, category: 'work' },
      phone_numbers: [{ number: formData.phone, category: 'work' }],
      company_name: formData.company,
      details: formData.message,
      tags: ['Webflow Form', 'Website Lead']
    })
  }
);

The Copper API responds with the created lead object including its id, creation timestamp, and all field values. Store this ID if you need to update the lead later or associate activities with it.

Sync CMS content to contact records

Pull data from Webflow Collections and create corresponding records in Copper. Use GET /v2/collections/{collection_id}/items to retrieve collection items with pagination support via limit and offset parameters. Map collection fields to Copper entity fields (such as leads, people, companies, opportunities, tasks, or activities) based on your data model.

Create companies using POST /v1/companies when syncing client portfolios, partner directories, or case study collections. The only required field is name, but you can populate email_domain, phone_numbers, websites, and custom fields for additional context.

Create people using POST /v1/people when syncing contact directories or team member collections. Include first_name, last_name, email, and optionally link them to company records using company_id.

Implement Copper webhooks for bi-directional sync. Subscribe to update events on entities like Person or Company, then update corresponding Webflow collection items using PUT /v2/collections/{collectionid}/items/{itemid} when Copper data changes. Copper webhooks support new, update, and delete events across Person, Company, Opportunity, Lead, Project, and Task entities, with up to 30 record IDs per notification.

// Subscribe to Copper company updates
await fetch('https://api.copper.com/developer_api/v1/webhooks', {
  method: 'POST',
  headers: {
    'X-PW-AccessToken': process.env.COPPER_API_KEY,
    'X-PW-Application': 'developer_api',
    'X-PW-UserEmail': process.env.COPPER_EMAIL,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    target: 'https://your-server.com/copper-webhook',
    type: 'company',
    event: 'update'
  })
});

Copper webhook notifications include an updated_attributes object showing exactly which fields changed with before and after values. This feature is available only for update events and prevents unnecessary updates to Webflow when irrelevant fields change.

Handle custom fields and complex data

Map Webflow form fields to Copper custom fields using the custom_fields array parameter. Each custom field requires its custom_field_definition_id and corresponding value. Retrieve available custom field definitions using GET /v1/customfielddefinitions.

Webflow lacks native date pickers and multi-select fields, creating format incompatibilities. Implement data transformation logic in your middleware to convert text input dates into Copper's expected format (typically Unix timestamps or ISO 8601 date strings). For multi-select scenarios, use multiple Webflow checkboxes and combine their values into the array format Copper expects.

// Transform Webflow checkbox values to Copper multi-select
const interestFields = {
  'checkbox-enterprise': 'Enterprise Solutions',
  'checkbox-consulting': 'Consulting Services',
  'checkbox-support': 'Premium Support'
};

const selectedInterests = Object.entries(formData)
  .filter(([key, value]) => key.startsWith('checkbox-') && value === 'true')
  .map(([key]) => interestFields[key]);

// Include in custom_fields array
custom_fields: [
  {
    custom_field_definition_id: 123456,
    value: selectedInterests
  }
]

Search existing records using POST /v1/people/search before creating new ones to prevent duplicates. Search by email, phone, or custom field values. Update existing records with PUT /v1/people/{person_id} when matches are found.

What you can build

Integrating Copper CRM with Webflow through Zapier or similar automation platforms enables automated lead capture workflows that connect your website directly to sales pipelines.

• Automated lead capture and routing: Create Copper leads from Webflow form submissions with automatic assignment to sales reps based on territory, product interest, or company size through automation workflows
• Client portfolio synchronization: Maintain a Webflow CMS collection showcasing active clients that automatically updates when you add companies to specific pipeline stages in Copper
• Progressive contact profiling: Build detailed contact profiles as individuals interact with multiple forms across your site by updating existing Copper person records rather than creating duplicates using Zapier's deduplication template
• Task automation for sales follow-up: Generate Copper tasks automatically when prospects submit forms through Zapier to ensure every qualified lead receives timely follow-up with assignments and due dates based on lead type