Connect Mailchimp with a sign up form through Corvid

Ask the community
, ,
1

I thought this might be helpful for others as well. You can create a signup form that doesn’t depend on the Wix integration for Mailchimp, which I’ve heard is going away.

I use two ways of e-mail marketing: the Wix marketing system for site updates, and the Mailchimp list for less frequent Newsletter updates. So it would have been inconvenient that the Mailchimp integration would stop. Luckily I had already created a code for the Mailchimp Api in Wix, which I would also like to share with you as a gift.

(prerequisite: you need to switch on developer mode in the editor)

PREPARATION:

  1. Log into your Mailchimp account and then go to this page to create your API key. Make a note of the API key.

  2. In the Mailchimp interface, select audience and head to the overview of the list you would like to link. Go to the ‘settings’ menu and choose ‘audience name and default’. Look for the ‘Audience ID’ which is also called ‘list ID’ and make a note of it for later.

THEN OPEN THE EDITOR:

  1. With developer mode on, click on the {} icon, and head to the npm packages (aka node modules). When you hover over it, a gearwheel or plus sign appears. Click on it and choose install a new package. Install the package mailchimp-api-v3 . Repeat this step to also install crypto-js

  2. Create a new backend module and call it chimp.jsw . Paste the following code in there

import mailchimp from 'mailchimp-api-v3'
import wixUsersBackend from 'wix-users-backend';
import md5 from 'crypto-js/md5'

var client = new mailchimp("<your-api-key>");

export function addContact(email, firstName, lastName) {
return client.post('/lists/381b95ed80/members', {
  email_address : email,
      merge_fields: {
      FNAME: firstName,
      LNAME: lastName
    },
  status : 'subscribed'
})
       .catch((err) => {
            console.log(err)
 return {type: "Newsletter", status: "Error", details: err}
        })
        .then((result) => {
            console.log(result)
 return {type: "Newsletter", status: "Success", details: result}
        })
}

export function addMember(userId) {

 return wixUsersBackend.getUser(userId)
        .then((userInfo) => {
 return client.post('/lists/<your-list-id>/members', {
                email_address: userInfo.loginEmail,
                merge_fields: {
                    FNAME: userInfo.firstName,
                    LNAME: userInfo.lastName
                },
                status: 'subscribed'
            })
        })

        .catch((err) => {
            console.log(err)
 return {type: "Newsletter", status: "Error", details: err}
        })
        .then((result) => {
            console.log(result)
 return {type: "Newsletter", status: "Success", details: result}
        })
}

export function removeMember(userId) {

 return wixUsersBackend.getUser(userId)
        .then((userInfo) => {
 let x = "/lists/<your-list-id>/members/" + md5(userInfo.loginEmail)
 return client.delete(x)
        })

        .catch((err) => {
            console.log(err)
 return {type: "Newsletter", status: "Error", details: err}
        })
        .then((result) => {
            console.log(result)
 return {type: "Newsletter", status: "Success", details: result}
 //return couponEmail (email, firstName, lastName)
        })
}

export function isMemberSubscribed(email) {
 let query = email
 return client.get('/search-members', {
                fields: ["members.email_address", "members.status"],
                list_id: "<your-list-id>",
                query: query
            }).then((result)=>{
                console.log(result)
 if (!(result.exact_matches && result.exact_matches.members && result.exact_matches.members[0])){return false}
 let member = result.exact_matches.members[0]
 if (member.status !== "subscribed" && member.status !== "pending"){return false}
 return true
            })

}

  1. Change the the placeholders in the code: for the key you got in step 1 and for the value you got in step 2

  2. Almost done! Now you can call the code from the front end. Create input elements for first name, last name, and e-mail. Then also create a button and a text element for a status message. Here is a code example:

import { addContact } from 'backend/chimp'

export function button2_click(event) {
 let firstName = $w('#inputFirstName').value
 let lastName = $w('#inputLastName').value
 let email = $w('#inputEmail').value
 if ($w('#inputEmail').valid === false) {
        $w('#inputEmail').updateValidityIndication()
    } else {
        addContact(email, firstName, lastName).then((result)=>{$w('#statusmessage').text = result.status; $w('#statusmessage').show()}).catch((err)=>{console.log(err)})
    }
}

The other functions in the backend code are for: adding a site member to your mailing list by id, removing a site member, and looking up if someone is a member of your mailchimp list.

(note: I tried to save the API key to Secrets, but I couldn’t call it through wix secrets unfortunately)

1 Like