Connecting Wix to MailChimp

Not sure if this is possible…
My MailChimp account has a ‘Connected Sites’ section where you can connect your website.
As Wix isn’t one of the standard connections they offer, code is provided to add to your website.
Is there an easy way to copy/paste this MailChimp provided code when I have no coding knowledge?

Add our code to your site
  1. Copy code Click Copy and access your site’s HTML.

  2. Add code Decide which pages you want to connect to MailChimp. For each of these pages, paste in your site code just before the closing tag.

  3. Check connection After you’re done, return to this page and check connection .

1 Like

Hi,
There’s no option to access your site HTML code. You can try adding header tags as explained here .

Best,
Tal.

It is not working for me to place the code in the head for MailChimp. Is this not supported?

1 Like

Pretty sure its not supported Anne. I have done so much google searching and help desk emails to try and resolve this but nothing works.

1 Like

Hi,
We have a new feature which can be useful:

For further questions about it, please contact Wix support team .

Have a good day,
Tal.

2 Likes

Wow thanks Tal! That has actually worked. Finally fixed the problem!

1 Like

That worked!! Whoo Hooo I’ve been waiting to be able to connect my site. Thank you!!

What did you use to connect mailchimp to your site? x

Interested in this too ? How can I connect my site to mail chimp ? Thanks !

Maybe this is what you are after?

You can use an app for that, this app is really good as it allows you to completely customize the form to match your website design and it is also GDPR friendly.
https://www.wix.com/app-market/contact-collection/overview

1 Like

Hi -

If anyone is interested in the “WixCode” way to do this, here is a solution:

Also, you will need to obtain a MailChimp API-Key and MailChimp LIST ID prior to using the code below. Here is a link to another Wix Forum post where we’ve provided the steps to get these 2 pieces of info: https://www.wix.com/code/home/forum/questions-answers/connecting-mailchimp-using-wix-code

SCENARIO:

  1. Want to add a “Subscribe for Newsletter” section to the Footer of a website. You must add 2 controls to your Footer (i.e. an Input box / Text box and a Button). Set their ID’s to: txtEmailSignup & btnSubscribeNow (respectively).

  1. To the “Site Code” section/tab of the Wix Code area, Add code to Import the Backend function you will create below. (Note that in practice, you should probably create the Backend code first, and then add this code. )
  2. Add a Button click event to the “Site Code” section (that calls the Backend function to add the new email subscriber)

  1. Create a Backend file called “mailChimp.jsw”
  2. Add the following code
  3. Run and Test your form. Verify results in MailChimp’s API-KEY section.

Here is the Raw Code:

“mailChimp.jsw”

import {fetch} from ‘wix-fetch’;

export function addSubscriber(email){

fetch("https://us10.api.mailchimp.com/3.0/lists/[YOUR LIST ID HERE]/members/", { 
body: '{\"email_address\": \"' + email + '\", \"status\": \"subscribed\"}', 
headers: { 
    Authorization: "apikey [YOUR API KEY HERE]", 

“Content-Type”: “application/json”
},
method: “POST”
})

}

“SITE CODE”

import {addSubscriber} from ‘backend/mailChimp’;

$w.onReady( function () {
//TODO: write your page related code here…

});

export function btnSubscribeNow_click(event, $w) {

//Add your code for this event here:
let email = $w(“#txtEmailSignup”).value;
addSubscriber(email).then(result => {
console.log(‘Email subscribed to Newsletter list.’)
})
. catch (error => {
console.log("Subscribe Now error: " + error);
});

}

Hope this helps,
Nick

1 Like

Hey Nick - this was super helpful I think, but I still seem to be missing a step or two somewhere. After following this information, the last bit that comes up when I preview it is in the code section: Cannot find module ‘backend/mailChimp’ in ‘public/pages/gvlpy.js’ - any advice? I’ve tried to follow info outlined in this Wix info section but that hasn’t helped -

Are you just trying to send Wix Contacts to MailChimp? I did this without any code, just a plain old Wix Contact form www.virtuops.com. Go down a bit and click on the MailChimp icon and you can send your Wix contact form information to any MailChimp list you want.

Hey just a heads up! You can now integrate Mailchimp with Wix again without using code.

Steps

  1. Go to your site Dashboard (not editor)
  2. On the left side click Marketing Tools
  3. Then click Marketing Integrations
    There is an integration for Mailchimp, it will have you login to your account. You can add multiple subscriber opt-in options whether they are a new subscriber, purchase a product, etc. and link them to a specific Mailchimp list you’ve set up.
1 Like

I saw that…glad that’s there. Stinks that you need a premium plan with a connected domain to get this: https://support.wix.com/en/article/about-marketing-integrations

2 Likes

@jaosh48441 yep, Zapier along with Tray.io, Automate.io and about a dozen other apps out there all work great. All super platforms. If you are just starting out and doing fewer than 100 contacts per month and you don’t plan on automating anything else, the free Zapier tier works out great. Thanks for the link and info.

Hi Nick,

I’ve followed your instructions to a “T”. I’ve read and re-read my code at least 100 times. Can you help me figure out what’s wrong? I’m getting the expected success message through the console but the emails never show up in my list. I’ve checked my list ID, I’ve checked my API key. Any more thoughts? I’ve replaced my list ID and code with “[MASKED]”.

BACKEND: maillChimp.jsw

import {fetch} from ‘wix-fetch’;

export function addSubscriber(email) {

fetch("https://us10.api.mailchimp.com/3.0/lists/[MASKED]/members/", { 
body: '{\"email_address\": \"' + email + '\", \"status\": \"subscribed\"}', 
headers: { 
    Authorization: "apikey [MASKED]", 

“Content-Type”: “application/json”
},
method: “POST”
})

}


PAGE
import wixUsers from ‘wix-users’;
import wixWindow from ‘wix-window’;
import wixLocation from ‘wix-location’;
import {addSubscriber} from ‘backend/mailChimp’;

// Allergy Switch Toggle
function toggleFold(index) {
let $fold = $w(‘#fold’ + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
}
else {
$fold.collapse();
}
}

export function allergySwitch_click(event) {
toggleFold(1);
}

$w.onReady( function () {
// Sign-Up Form LIVE Personalizations
$w(‘#ThankYouText’).text = “”;
$w(‘#ReferredByLastName’).onBlur(() => {

let nbsp = String.fromCharCode(160) //returns non-breaking space as HTML text

if ($w(‘#ReferredByFirstName’).value !== “”) {
$w(‘#ThankYouText’).text = nbsp+"Thank you! We’ll send some extra :heart: " + $w(‘#ReferredByFirstName’).value + “'s way.”+nbsp;
}
});

$w('#firstName').onBlur(() => { 

if ($w(‘#firstName’).value !== “”) {
$w(‘#greeting’).text = "Nice to meet you, " + $w(‘#firstName’).value + “!”;
}
});

// Form Validation
$w(‘#validationMessages’).collapse();

const validatePassword = (otherPasswordElementID) => (value, reject) => {
let otherPasswordElement = $w(otherPasswordElementID);

if (value === otherPasswordElement.value) {
otherPasswordElement.validity.valid = true ;
otherPasswordElement.resetValidityIndication();
return ;
}

    console.log("Passwords do not match"); 
    otherPasswordElement.validity.valid =  **false** ; 
    otherPasswordElement.updateValidityIndication(); 
    reject("Passwords do not match"); 
}; 

$w("#passwordVerify").onCustomValidation(validatePassword("#password")); 
$w("#password").onCustomValidation(validatePassword("#passwordVerify")); 

$w('#submit').onClick(() => { 

if (!($w(‘#firstName’).valid && $w(‘#lastName’).valid && $w(‘#email’).valid && $w(‘#Hugs’).valid &&
$w(‘#phoneNumber’).valid && $w(‘#ReferredByFirstName’).valid && $w(‘#ReferredByLastName’).valid && $w(‘#password’).valid)) {

let validationMessage = ‘’;

if (!$w(‘#ReferredByFirstName’).valid || !$w(‘#ReferredByLastName’).valid) {
validationMessage += ‘Please enter the full name of the person who referred you.\n’;
}

if (!$w(‘#firstName’).valid || !$w(‘#lastName’).valid) {
validationMessage += ‘Please enter your full name. \n’;
}

if (!$w(‘#phoneNumber’).valid) {
validationMessage += ‘Please enter a valid phone number. \n’;
}

if (!$w(‘#email’).valid) {
validationMessage += ‘Please enter a valid email address. \n’;
}

if (!$w(‘#Hugs’).valid) {
validationMessage += ‘Please select your hug preference. \n’;
}
if (!$w(‘#password’).value)
validationMessage += ‘Please choose a password. \n’;
if ($w(‘#password’).value.length < 4 && $w(‘#password’).value.length > 0)
validationMessage += ‘Please choose a password greater than 4 characters. \n’;
if ($w(‘#password’).value.length > 24 )
validationMessage += ‘Please choose a password less than 24 characters. \n’;
if ($w(‘#password’).value !== $w(“#passwordVerify”).value) {
validationMessage += ‘Passwords do not match. \n’;
}

        $w('#validationMessages').text = validationMessage; 
        $w('#validationMessages').expand(); 

    }  **else**  { 
        $w('#validationMessages').collapse(); 

let emails = ;
let phones = ;
let allergies = ;

// Allergy Labels
if ($w(‘#eggs’).checked)
allergies.push(‘Egg Allergy’);
if ($w(‘#soy’).checked)
allergies.push(‘Soy Allergy’);
if ($w(‘#wheat’).checked)
allergies.push(‘Wheat Allergy’);
if ($w(‘#milk’).checked)
allergies.push(‘Milk Allergy’);
if ($w(‘#peanuts’).checked)
allergies.push(‘Peanut Allergy’);
if ($w(‘#shellfish’).checked)
allergies.push(‘Shellfish Allergy’);
if ($w(‘#treeNuts’).checked)
allergies.push(‘Tree Nut Allergy’);
if ($w(‘#fish’).checked)
allergies.push(‘Fish Allergy’);

if ($w(‘#fold1’).collapsed) {
allergies = ;
$w(‘#eggs’).checked = false ;
$w(‘#soy’).checked = false ;
$w(‘#wheat’).checked = false ;
$w(‘#milk’).checked = false ;
$w(‘#peanuts’).checked = false ;
$w(‘#shellfish’).checked = false ;
$w(‘#treeNuts’).checked = false ;
$w(‘#fish’).checked = false ;

        } 

var value1 = $w(‘#ReferredByFirstName’).value;
var value2 = $w(‘#ReferredByLastName’).value;
var ReferredBy = value1 + " " + value2;

        emails.push($w('#email').value); 
        phones.push($w('#phoneNumber').value); 

// register as member using form data
wixUsers.register($w(‘#email’).value, $w(‘#password’).value, {
“contactInfo”: {
“firstName”: $w(‘#firstName’).value,
“lastName”: $w(‘#lastName’).value,
“phones”: phones,
“emails”: emails,
“ReferredBy”: ReferredBy,
“Hugs”: $w(‘#Hugs’).value,
“labels”: allergies
}

        }); 

  $w('#submit').collapse(); 
  $w('#validationMessages').expand(); 
  $w('#validationMessages').text = 'Thank you, ' + $w('#firstName').value + '! \n Your request has been recieved.\n Please check your email for confirmation and next steps.\n ❤️ TCB';    
    } 
}); 

});

// MailChimp Integration
export function submit_click(event, $w) {

//Add your code for this event here:
let email = $w(“#email”).value;
addSubscriber(email).then(result => {
console.log(‘Email subscribed to Newsletter list.’)
})
. catch (error => {
console.log("Subscribe Now error: " + error);
});

}

@ryanrayla Hi Ryan,

I reformatted the code and found a few issues before the MailChimp code. Wherever you see a comment in the code below with " // TODO: ", you may want to address these issues and then retry executing the code to see if you still have issues:

import wixUsers from 'wix-users'; 
import wixWindow from 'wix-window'; 
import wixLocation from 'wix-location'; 
import {addSubscriber} from 'backend/mailChimp'; 

// Allergy Switch Toggle 

function toggleFold(index) { 
 let $fold = $w('#fold' + index); 
 // toggle the fold at the index 
 if ($fold.collapsed) { $fold.expand(); } 
 else { $fold.collapse(); } 
}     
 
export function allergySwitch_click(event) { toggleFold(1); } 

$w.onReady(function () { 
 // Sign-Up Form LIVE Personalizations 
    $w('#ThankYouText').text = ""; 
    $w('#ReferredByLastName').onBlur(() => { 
 let nbsp = String.fromCharCode(160)    // TODO: <------- ADD A SEMI-COLON HERE
 //returns non-breaking space as HTML text 
 if ($w('#ReferredByFirstName').value !== "") { 
            $w('#ThankYouText').text = nbsp+"Thank you! We'll send some extra ❤️ " + $w('#ReferredByFirstName').value + "'s way."+nbsp; 
        }

    }); 
 
    $w('#firstName').onBlur(() => { 
 if ($w('#firstName').value !== "") { 
            $w('#greeting').text = "Nice to meet you, " + $w('#firstName').value + "!"; 
        } 
    }); 
 
 // Form Validation 
    $w('#validationMessages').collapse(); 
 
 const validatePassword = (otherPasswordElementID) => (value, reject) => { 
 let otherPasswordElement = $w(otherPasswordElementID); 
 if (value === otherPasswordElement.value) { 
            otherPasswordElement.validity.valid = true; 
            otherPasswordElement.resetValidityIndication(); 
 return; 
        } 
        console.log("Passwords do not match"); 
        otherPasswordElement.validity.valid = false; 
        otherPasswordElement.updateValidityIndication(); 
        reject("Passwords do not match"); 
    }; 
 
        $w("#passwordVerify").onCustomValidation(validatePassword("#password")); 
        $w("#password").onCustomValidation(validatePassword("#passwordVerify")); 
        $w('#submit').onClick(() => { 
 if (!($w('#firstName').valid 
            && $w('#lastName').valid 
            && $w('#email').valid
            && $w('#Hugs').valid 
            && $w('#phoneNumber').valid 
            && $w('#ReferredByFirstName').valid 
            && $w('#ReferredByLastName').valid 
            && $w('#password').valid)) { 
 let validationMessage = ''; 
 if (!$w('#ReferredByFirstName').valid || !$w('#ReferredByLastName').valid) { 
                    validationMessage += 'Please enter the full name of the person who referred you.\n'; 
                } 
 if (!$w('#firstName').valid || !$w('#lastName').valid) { 
                    validationMessage += 'Please enter your full name. \n'; 
                } 
 if (!$w('#phoneNumber').valid) { 
                    validationMessage += 'Please enter a valid phone number. \n'; 
                } 
 if (!$w('#email').valid) { 
                    validationMessage += 'Please enter a valid email address. \n'; 
                } 
 if (!$w('#Hugs').valid) { 
                    validationMessage += 'Please select your hug preference. \n'; 
                } 
 if (!$w('#password').value) validationMessage += 'Please choose a password. \n'; 
 if ($w('#password').value.length < 4 && $w('#password').value.length > 0) validationMessage += 'Please choose a password greater than 4 characters. \n'; 
 if ($w('#password').value.length > 24 ) validationMessage += 'Please choose a password less than 24 characters. \n'; 
 if ($w('#password').value !== $w("#passwordVerify").value) { validationMessage += 'Passwords do not match. \n'; }   // TODO: <------- YOU SHOULD REMOVE THIS RIGHT SQUIGGLY BRACKET. AS OF NOW, THE BELOW TWO LINES OF CODE ARE NOT CONTAINED IN THE "IF".
                    $w('#validationMessages').text = validationMessage; 
                    $w('#validationMessages').expand(); 
                } 
 else { 
                    $w('#validationMessages').collapse(); 
 let emails = []; 
 let phones = []; 
 let allergies = []; 
 // Allergy Labels 
 if ($w('#eggs').checked) allergies.push('Egg Allergy'); 
 if ($w('#soy').checked) allergies.push('Soy Allergy'); 
 if ($w('#wheat').checked) allergies.push('Wheat Allergy'); 
 if ($w('#milk').checked) allergies.push('Milk Allergy'); 
 if ($w('#peanuts').checked) allergies.push('Peanut Allergy'); 
 if ($w('#shellfish').checked) allergies.push('Shellfish Allergy'); 
 if ($w('#treeNuts').checked) allergies.push('Tree Nut Allergy'); 
 if ($w('#fish').checked) allergies.push('Fish Allergy'); 
 if ($w('#fold1').collapsed) { 
                        allergies = []; 
                        $w('#eggs').checked = false; 
                        $w('#soy').checked = false; 
                        $w('#wheat').checked = false; 
                        $w('#milk').checked = false; 
                        $w('#peanuts').checked = false; 
                        $w('#shellfish').checked = false; 
                        $w('#treeNuts').checked = false; 
                        $w('#fish').checked = false; 
                    } 
 var value1 = $w('#ReferredByFirstName').value; 
 var value2 = $w('#ReferredByLastName').value; 
 var ReferredBy = value1 + " " + value2; 
                    emails.push($w('#email').value); 
                    phones.push($w('#phoneNumber').value); 
 // register as member using form data 
                    wixUsers.register($w('#email').value, $w('#password').value, 
                        { "contactInfo": { "firstName": $w('#firstName').value, "lastName": $w('#lastName').value, "phones": phones, "emails": emails, "ReferredBy": ReferredBy, "Hugs": $w('#Hugs').value, "labels": allergies } 
                        }); 
 
                    $w('#submit').collapse(); 
                    $w('#validationMessages').expand();
                    $w('#validationMessages').text = 'Thank you, ' + $w('#firstName').value + '! \n Your request has been recieved.\n Please check your email for confirmation and next steps.\n ❤️ TCB'; 
                    } 
                }); 
            }); 
 
 
 // MailChimp Integration 
export function submit_click(event, $w) { 
 //Add your code for this event here: 
 let email = $w("#email").value; 
    addSubscriber(email)
    .then(result => { console.log('Email subscribed to Newsletter list.') }) 
    .catch(error => { console.log("Subscribe Now error: " + error); }); 
}

Nick

Nick, thanks for the thoughtful and easy-to-follow instructions! I have some required merge fields in MailChimp that are preventing me from creating new users. I am getting an error from MailChimp saying “Your merge fields were invalid.”

I tried putting additional merge fields into your code above but am now getting this error, “The resource submitted could not be validated. For field-specific details, see the ‘errors’ array.” I think this is probably because the fields are listed in the wrong format.

I’d like to post more fields than just the email address to MailChimp. If you or anyone else on this forum could show me how to format that in the backend file, I’d greatly appreciate it! (I am very new to coding).

Here’s what I tried in the “body” section but keep getting the error.

body: '{\"email_address\": \"' + email + '\", \"status\": \"subscribed\", \"merge_fields[FNAME]\": \"'+ firstName +'\"}}',

body: {
 "email_address":email,
 "status": "subscribed", 
 "merge_fields": {
 "FNAME":firstName
        }
    },