Contact Us

What are You Looking for?

ByEwan Mak
April 14, 2024

Include followers to Mailchimp with Webflow Logic

Use Logic’s Make HTTP request block to collect contact information and register new subscribers on Mailchimp.

By utilizing Mailchimp, you have the ability to craft and dispatch promotional emails, bulletins, and focused campaigns. Logic empowers you to enroll fresh followers on Mailchimp from your Webflow portal, smoothly uniting two vital components of your marketing approach.

Prior to initiating: In case you haven’t done so already, formulate a Mailchimp account as well as a Mailchimp audience. Additionally, you will need to insert a form to your Webflow page and incorporate a mandatory field with Text category: email where visitors can sign up.

This tutorial will encompass:

  1. Ways in which you can generate your Mailchimp API key
  2. How to establish your Logic flow’s validation system
  3. Ways in which you can obtain your Mailchimp audience ID
  4. Setting up your HTTP request
  5. How to conduct testing and release your flow
  6. How to tackle challenges with your flow

Generating your Mailchimp API key

  1. Proceed to your Mailchimp control panel
  2. Tap on your profile icon and choose Account & billing
  3. Proceed to Extras > API keys 
  4. Hit Create a key 
  5. Replicate your recent API key and maintain this tab extant!

Establishing your Logic flow’s validation system

  1. Launch your webpage within the Webflow Designer on a new browser tab
  2. Choose your form block on the Designer canvas and reveal Form block settings
  3. Press the Source list and opt for Logic
  4. Tap on Add new flow
  5. Name your new flow (e.g. “Include follower to Mailchimp bulletin”) within the Name section and include a description in the Description segment as desired
  6. Drag a Make HTTP request block to the flow editor canvas and name it (e.g. “Dispatch request to Mailchimp”) 
  7. Select API token from the Authentication dropdown 
  8. Select Header from the Add to dropdown
  9. Type “Authorization” in the Header field 
  10. Hit Select a credential > Add new credential 
  11. Label your API token (e.g. “Mailchimp API token”) in the Name segment and add a description in the Description segment as desired 
  12. Enter “Bearer {API key}” in the Token field, replacing the {API key} with the API key you copied from Mailchimp
  13. Tap Create to store your new credential and maintain this tab extant! 
Insider’s tip: You can also link your form to a new Logic flow from the Logic panel > Flowslist. Acquaint yourself with more details regarding form submission triggers in Logic. 
The “New credential” modal window displays fields for the name, description, type, and value of an API credential.

Acquiring your Mailchimp audience ID

  1. Return to your Mailchimp dashboard
  2. Proceed to Audience > All contacts
  3. If you possess multiple Mailchimp audiences, click the Current audience dropdown and select the audience you wish to link to your Webflow site
  4. Choose Settings from the dropdown and then select Audience name and defaults
  5. Retrieve your Audience ID

CRUCIAL: Make a note of the initial segment of the URL on this page (e.g., us5, us6, etc.), which corresponds to the data center for your Mailchimp account — including this in your HTTP request is vital.

Configuring your HTTP request

After establishing your Logic flow and Mailchimp authentication credentials, revisit Webflow and set up an HTTP request within your flow. This configured HTTP request will add a new subscriber to Mailchimp whenever a site visitor submits your subscription form. 

Note: If you closed the tab where your Webflow site was open, navigate to Logic panel > Flows tab and choose the flow configured in the prior steps. Then, select the Make HTTP request block on the flow editor canvas to open the block settings and complete the subsequent steps.
  1. Choose the Request method from the dropdown menu and select POST
  2. In the URL field, substitute the placeholders with “https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members”. Replace {dc} with your Mailchimp data center and {list_id} with the audience ID extracted from Mailchimp 
  3. Insert the below content in the Body field:
         
            {
               "email_address": "",
               "status": "subscribed"
            }

  1. Position your cursor between the empty quotes in the Body section
  2. Click the purple “dot” icon and opt for your Email form field 

Testing and deploying your flow

  1. Click Run test to finalize setup 
  2. Enter a sample email address into the provided input field
  3. Click Run test 
  4. Choose Cancel or Apply data to exit the test modal
  5. Opt for Publish 
  6. Select Stage flow for publish
  7. Publish your site
Note: If you encounter an error message during the flow test, follow our diagnostic guidelines and repeat the above steps. Find additional information on testing HTTP requests.

Troubleshooting flow-related issues

If errors are surfacing while testing your flow, consider the following actions:

  • Validate that your request URL employs the accurate data center and audience ID
  • Scrutinize your request body for potential errors using a complimentary tool like JSONLint 
Ewan Mak
Latest posts by Ewan Mak (see all)

Related Posts

ByEwan Mak
Updated on