{"id":5817,"date":"2024-04-14T20:32:09","date_gmt":"2024-04-14T12:32:09","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5817"},"modified":"2024-04-14T20:32:09","modified_gmt":"2024-04-14T12:32:09","slug":"include-followers-to-mailchimp-with-webflow-logic","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/include-followers-to-mailchimp-with-webflow-logic\/","title":{"rendered":"Include followers to Mailchimp with Webflow Logic"},"content":{"rendered":"\n
\n

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.<\/p>\n

Prior to initiating:<\/strong> In case you haven\u2019t done so already, formulate a Mailchimp account<\/a> as well as a Mailchimp audience<\/a>. 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.<\/h6>\n

This tutorial will encompass:<\/p>\n

    \n
  1. Ways in which you can generate your Mailchimp API key<\/li>\n
  2. How to establish your Logic flow\u2019s validation system<\/li>\n
  3. Ways in which you can obtain your Mailchimp audience ID<\/li>\n
  4. Setting up your HTTP request<\/li>\n
  5. How to conduct testing and release your flow<\/li>\n
  6. How to tackle challenges with your flow<\/li>\n<\/ol>\n

    Generating your Mailchimp API key<\/h2>\n
      \n
    1. Proceed to your Mailchimp control panel<\/li>\n
    2. Tap on your profile icon and choose Account & billing<\/strong><\/li>\n
    3. Proceed to Extras<\/strong> > API keys<\/strong>\u00a0<\/li>\n
    4. Hit Create a key\u00a0<\/strong><\/li>\n
    5. Replicate your recent API key <\/strong>and maintain this tab extant<\/strong>!<\/li>\n<\/ol>\n
      \n
      <\/div>\n<\/figure>\n
      \n
      <\/div>\n<\/figure>\n
      \n
      <\/div>\n<\/figure>\n

      Establishing your Logic flow\u2019s validation system<\/h2>\n
        \n
      1. Launch your webpage within the Webflow Designer on a new browser tab<\/li>\n
      2. Choose your form block on the Designer canvas and reveal Form block settings<\/strong><\/li>\n
      3. Press the Source<\/strong> list and opt for Logic<\/strong><\/li>\n
      4. Tap on Add new flow<\/strong><\/li>\n
      5. Name your new flow (e.g. \u201cInclude follower to Mailchimp bulletin\u201d) within the Name<\/strong> section and include a description in the Description<\/strong> segment as desired<\/li>\n
      6. Drag a Make HTTP request<\/strong> block to the flow editor canvas and name it (e.g. \u201cDispatch request to Mailchimp\u201d)\u00a0<\/li>\n
      7. Select API token <\/strong>from the Authentication<\/strong> dropdown\u00a0<\/li>\n
      8. Select Header<\/strong> from the Add to<\/strong> dropdown<\/li>\n
      9. Type \u201cAuthorization\u201d in the Header<\/strong> field\u00a0<\/li>\n
      10. Hit Select a credential<\/strong> > Add new credential<\/strong>\u00a0<\/li>\n
      11. Label your API token (e.g. \u201cMailchimp API token\u201d) in the Name<\/strong> segment and add a description in the Description<\/strong> segment as desired\u00a0<\/li>\n
      12. Enter \u201cBearer {API key}<\/strong>\u201d in the Token<\/strong> field, replacing the {API key} <\/strong>with the API key you copied from Mailchimp<\/li>\n
      13. Tap Create<\/strong> to store your new credential and maintain this tab extant<\/strong>!\u00a0<\/strong><\/li>\n<\/ol>\n
        Insider’s tip: <\/strong>You can also link your form to a new Logic flow from the Logic panel<\/strong> > Flows<\/strong>list. Acquaint yourself with more details regarding form submission triggers in Logic.\u00a0<\/h6>\n
        \n
        <\/div>\n<\/figure>\n
        \n
        <\/div>\n<\/figure>\n
        \n
        <\/div>\n<\/figure>\n
        \n
        \n
        \n
        \n \"The<\/div>\n<\/figure>\n

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

          CRUCIAL: <\/strong>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 \u2014 including this in your HTTP request is vital.<\/p><\/blockquote>\n

          \n
          \n \n <\/div>\n<\/figure>\n
          \n
          \n \n <\/div>\n<\/figure>\n
          \n
          \n \n <\/div>\n<\/figure>\n

          Configuring your HTTP request<\/h2>\n

          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.\u00a0<\/p>\n

          Note: <\/strong>If you closed the tab where your Webflow site was open, navigate to Logic panel<\/strong> > Flows<\/strong> tab and choose the flow configured in the prior steps. Then, select the Make HTTP request<\/strong> block on the flow editor canvas to open the block settings and complete the subsequent steps.<\/h6>\n
            \n
          1. Choose the Request method<\/strong> from the dropdown menu and select POST<\/strong><\/li>\n
          2. In the URL<\/strong> field, substitute the placeholders with “https:\/\/{dc}<\/strong>.api.mailchimp.com\/3.0\/lists\/{list_id}<\/strong>\/members”. Replace {dc}<\/strong> with your Mailchimp data center and {list_id}<\/strong> with the audience ID extracted from Mailchimp\u00a0<\/li>\n
          3. Insert the below content in the Body <\/strong>field:<\/li>\n<\/ol>\n
            \n
            \n
            \n         \n            {\n               \"email_address\": \"\",\n               \"status\": \"subscribed\"\n            }\n         <\/code>\n      <\/pre>\n<\/p><\/div>\n<\/div>\n
              \n
            1. Position your cursor between the empty quotes in the Body<\/strong> section<\/li>\n
            2. Click the purple \u201cdot<\/strong>\u201d icon and opt for your Email<\/strong> form field\u00a0<\/li>\n<\/ol>\n
              \n
              \n      \n   <\/div>\n<\/figure>\n
              Testing and deploying your flow<\/h2>\n
                \n
              1. Click Run test to finalize setup\u00a0<\/strong><\/li>\n
              2. Enter a sample email address into the provided input field<\/li>\n
              3. Click Run test\u00a0<\/strong><\/li>\n
              4. Choose Cancel<\/strong> or Apply data<\/strong> to exit the test modal<\/li>\n
              5. Opt for Publish<\/strong>\u00a0<\/li>\n
              6. Select Stage flow for publish<\/strong><\/li>\n
              7. Publish your site<\/li>\n<\/ol>\n
                Note: <\/strong>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.<\/h6>\n
                Troubleshooting flow-related issues<\/h2>\n
                If errors are surfacing while testing your flow, consider the following actions:<\/p>\n