Webflow Brevo (Sendinblue) Integration

What is Brevo

Brevo is an email marketing, CRM, and automation platform formerly known as SendinBlue. It’s designed to help businesses manage and optimize their email and SMS campaigns, customer relationship management (CRM), and marketing automation all from one interface. With Brevo, businesses can create personalized email campaigns, segment contact lists, automate workflows, and track engagement. It also supports SMS marketing, chat features, and transactional emails, making it versatile for different customer communication needs.

In addition to its marketing automation capabilities, Brevo has a CRM system to help users organize and manage customer information, making it easy to integrate marketing and sales processes. It’s particularly popular among small to mid-sized businesses due to its affordability, ease of use, and focus on delivering a comprehensive toolkit for customer engagement.

‍

Why integrate Webflow with Brevo

Integrating Webflow with Brevo can significantly enhance your ability to manage customer relationships, automate marketing, and optimize communication. Here are a few compelling reasons for combining Webflow with Brevo:

1. Streamlined Contact Management

• Integrating Brevo with Webflow allows you to automatically add new contacts from your Webflow forms directly into Brevo’s CRM or specific email lists. This saves time on manual data entry and ensures your contact lists are always up to date.

2. Enhanced Lead Nurturing and Engagement

• With Brevo’s automation workflows, you can create tailored follow-up sequences triggered by specific actions. For instance, when someone submits a Webflow form, they can automatically enter a welcome series, drip campaign, or personalized engagement flow in Brevo, nurturing leads into customers.

3. Centralized Data for Better Analytics

• Integrating both platforms centralizes data, so all engagement and behavior insights are visible in one dashboard. This makes it easier to analyze and measure the success of campaigns and engagement across your Webflow site and Brevo email efforts.

4. Personalized and Targeted Campaigns

• Brevo allows segmentation based on user behavior and attributes, so you can personalize content based on data collected through Webflow. You can also use this data to target specific customer groups with highly relevant offers and updates, increasing engagement rates.

5. Automated Workflows to Save Time

• By linking Webflow to Brevo’s automation capabilities, you can set up workflows that respond automatically to user actions, such as form submissions or site interactions. This enables timely communication without the need for constant manual intervention, making your marketing process more efficient.

6. Scalable Email Marketing

• Brevo’s email marketing tools offer a wide array of templates, A/B testing, and advanced analytics. Webflow integration helps you leverage these tools to send highly optimized and segmented email campaigns, whether for newsletters, product updates, or seasonal promotions.

7. Compliance and Data Management

• Since Brevo provides GDPR compliance tools, integrating it with Webflow ensures that your contact data is handled securely and in compliance with regulations. You can easily manage opt-ins, preferences, and unsubscribes across both platforms.

‍

How to Integrate Webflow with Brevo

To integrate Webflow with Brevo, you can use tools like Zapier, Make (formerly Integromat), or custom API connections. Here’s a step-by-step guide for each method to help you connect Webflow form submissions to Brevo’s contact management system.

Method 1: Integration Using Zapier

Zapier is one of the simplest ways to connect Webflow and Brevo without coding. Here’s how to set it up:

1. Sign Up for Zapier: If you don’t already have a Zapier account, sign up at Zapier’s website.
2. Create a New Zap:
   • In Zapier, create a new Zap and choose Webflow as the trigger app.
   • Set the trigger to “Form Submission” to capture Webflow form submissions.
3. Connect Your Webflow Account:
   • Log into your Webflow account through Zapier to authenticate and select the Webflow site you want to connect.
   • Choose the specific form on your Webflow site that you want to trigger the integration.
4. Set Up the Action in Brevo:
   • For the action app, select Brevo (formerly SendinBlue).
   • Choose the action “Add or Update Contact” to automatically add form submitters to Brevo’s contact list.
   • Connect your Brevo account by entering the API key from your Brevo account settings.
5. Map Webflow Form Fields to Brevo:
   • Map the Webflow form fields (like Name, Email, etc.) to the corresponding Brevo fields.
   • You can also add custom fields or tags to segment contacts in Brevo.
6. Test the Zap:
   • Run a test to ensure the integration works and that a contact is added to Brevo after a form submission.
7. Turn on the Zap:
   • Enable the Zap to start automating the integration.

Method 2: Integration Using Make (Integromat)

Make offers a bit more flexibility and customization options than Zapier:

1. Sign Up for Make: Register for an account on Make.
2. Create a New Scenario:
   • In Make, create a new scenario and select Webflow as the first module.
   • Set the trigger to capture Webflow form submissions.
3. Set Up Webflow Module:
   • Connect your Webflow account in Make and select the site and form you wish to use for the trigger.
4. Add a Brevo Module:
   • Add another module in Make and search for Brevo.
   • Choose “Create or Update Contact” to add form submissions to Brevo’s contact list.
5. Map Fields from Webflow to Brevo:
   • Match the Webflow fields to Brevo’s fields (like email, name, and any custom fields).
   • Optionally, set conditions to add tags or further customize the contact data.
6. Run the Scenario:
   • Test the scenario to ensure the integration works.
   • Save and activate the scenario to automate it.

Method 3: Direct Integration Using Brevo API and Webflow Custom Code

For more control, you can use Brevo’s API to handle the integration:

1. Get Brevo API Key:
   • Log in to Brevo, navigate to SMTP & API settings, and generate an API key if you haven’t already.
2. Add Custom Code to Webflow:
   • In Webflow, add custom JavaScript in the “Custom Code” settings or directly to the form’s embed code.
   • Write code to capture form data, such as email and name.
3. Use Fetch API to Send Data to Brevo:
   • Use the fetch function in JavaScript to send a POST request to Brevo’s /contacts endpoint.
   • The basic request would look like this:

   • document.getElementById('yourFormId').onsubmit = async function(event) {
         event.preventDefault();
     
         const formData = new FormData(this);
         const email = formData.get('email');
         const name = formData.get('name');
     
         const response = await fetch('https://api.brevo.com/v3/contacts', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
                 'api-key': 'YOUR_BREVO_API_KEY'
             },
             body: JSON.stringify({
                 email: email,
                 attributes: { FIRSTNAME: name },
                 listIds: [yourListId]
             })
         });
     
         if (response.ok) {
             console.log('Contact added successfully');
         } else {
             console.error('Failed to add contact');
         }
     };

   • Replace 'YOUR_BREVO_API_KEY' with your Brevo API key, yourFormId with your Webflow form ID, and yourListId with the list ID in Brevo you want to add contacts to.
4. Test the Code:
   • Publish the site and test the form to ensure that data is being sent to Brevo.

These methods allow you to leverage Brevo’s capabilities for marketing automation, segmentation, and CRM while collecting leads and user data seamlessly from your Webflow site.

‍

Resources about Webflow and Brevo integration

To deepen your knowledge on integrating Webflow with Brevo, here are some valuable resources:

1. Brevo’s Documentation

• Brevo has detailed API documentation that provides instructions on managing contacts, creating campaigns, setting up automations, and more.
• You can access it at Brevo API Documentation.

2. Zapier’s Learning Center

• Since Zapier is a popular tool for no-code integrations between Webflow and Brevo, Zapier’s Learning Center offers tutorials and guides for setting up integrations with Webflow forms and automating tasks in Brevo.
• Start with Zapier’s Webflow Integrations and Brevo Integrations.

3. Make (Integromat) Tutorials

• Make provides in-depth tutorials and resources on setting up custom workflows. You can look at specific tutorials for Webflow and Brevo integrations to learn advanced automation.
• Visit Make’s Help and Tutorials.

4. Webflow University

• Webflow University has several tutorials on using Webflow’s forms, custom code embedding, and working with third-party integrations. Although it doesn’t specifically cover Brevo, these resources can help you understand the basics of form handling and custom code.
• Check out Webflow University.

5. YouTube Tutorials

• YouTube has numerous tutorials on Webflow and Brevo integrations, often covering both Zapier and Make. Channels like Flux, Pixel Geek, and Webflow’s official channel frequently cover integrations, automation, and using Webflow forms.
• Search YouTube for terms like “Webflow Brevo integration,” “Webflow Zapier tutorial,” or “Webflow Make automation.”

6. Webflow & Brevo Community Forums

• Both Webflow and Brevo have active communities where users share solutions, workflows, and custom integration tips. For specific questions, these forums can be helpful.
• Webflow Forum: Webflow Community Forum
• Brevo Forum: Brevo Community Forum

These resources will help you learn more about integrating Webflow with Brevo, from simple automation to more complex, custom solutions.