Here is a step by step tutorial about how to make mailchimp’s popup appear with click on a button or link.
Mailchimp’s default pop up code appears either immediately after loading or after a few seconds as set by you at the admin panel in mailchimp, but if you want to make the mailchimp’s pop-up to appear with a click on a button or a link then the following tutorial will show you how to do that.
First login to your mailchimp acccount and then click on the Audience button and then select the Signup Forms and then click on the Subscriber pop-up or click on the select button next to it. From the settings on the left set Display to immediately so the pop up shows straight away when somebody clicks on the button.
Before they give you the code you have to connect your website first. For that reason they will give you the code which you will have to put in the header so it can find it and verify it. After you are done now is the time to play with the code and make it work the way we want it to work, i.e. to make mailchimp’s popup appear with a click on a button or link with a specific id.
If you have the code, fine! if you haven’t or you want it again then click on the Edit button at the top and then Manage Connected Sites and there click on the Site Code to access site code. Your code will look something like this.
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/9f0ff62a247e302836e834a77/d986f27b70963c46c0ce59ec7.js");</script>
By default mailchimp gives you the above code but it doesn’t do anything and it will just automatically appears if you put it in your site straight away. So you’ll have to use the following code in order to make the mailchimp popup windows appear on click only.
<script id="mcjs">
function showPopup() {
!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/9f0ff62a247e302836e834a77/d986f27b70963c46c0ce59ec7.js");
//unsetting the cookie
document.cookie = "MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "MCPopupSubscribed=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
document.getElementById("show-popup").onclick = function() { showPopup(); }
</script>
In the above code the function has been wrapped in a function showPopup() and it will be called when someone clicks on an element with the id of show-popup. And on the last line of above function we are expiring the cookie so the form appears every time when someone clicks on that element.
HI!
I have seen that in this page (soure code of this page) you do not use
document.getElementById(“show-popup”).onclick = function() { showPopup(); }
is it required ?
Yes it is, it will actually call the function on click.
Good evening!
I have been trying and trying and somehow my button won’t do anything when I click on it (I’ve also tried it with just a text but that wasn’t doing anything either). I was hoping you could help me? The button can be found on https://hopefulhome.co.uk/uk-seasonal-food-chart. It’s a landing page that has been made with the help of Seedprod so the buttons are already given id’s. So I’ve changed the open-popup text in your code to #sp-m2i87n (I also tried it without the hashtag). I’ve had to add your entire code into the ‘Insert headers and footers’-plugin and I’ve changed the https link in your code to the one Mailchimp gave me. What am I doing wrong? Getting slightly desperate now! I hope you can help me.
Jenna
Good Evening!
Just add a button and then add the code and then let me know and I’ll check and help you with whatever you are doing wrong.
This is great and works perfectly, thank you! Now I’m trying to make the popup redirect to a custom thank you page instead of showing the SUCCESS on the pop up. I can redirect an embedded form, why not a pop up? Do you know how to do this? Thanks!
Hi Rahman Zeb!
i am facing the issue that when i am login in wordpress the popup is working, but when i logout from wordpress it’s not working the popup?
please help me out it’s urgent.
Thank you.
Just share the url of the site with me and I’ll check it for you.
Your script assumes everyone is in the `us20` location for mailchimp and in my case I was not. You may want to add one for step in addition to copying the UUID and LID and also copy the subdomain of the baseURL:
mc.us20.list-manage.com
Yeah you are right and the easiest way would be to put that whole script or code inside the second script tag you got from the mailchimp inside that function and you’ll be fine.
Interesting – I added the ID to my link and entered the code into my footer. On click the form appears but then quickly disappears. Scratching my head on this one. Any clues as to what might be wrong?
Can you kindly share with me your website url where you are implementing this.
Hi Rahman Zeb!
i am facing the issue that when i am login in wordpress the popup is working, but when i logout from wordpress it’s not working the popup?
Please help me out It’s urgent.
Thank you
Hi Rahman Zeb,
I am using wordpress to create my website which is pretty much finished. Where do I copy the code for the button to? Also where do I copy the code in wordpress that mailchimp provided me for the popup form? I am very confused as coding is not my strongest skill.
Please help a brother out,
Cheers
-omarco
Hey Omarco,
You gotta use wp_enqueue_script function in order to embed the code that mailchimp gives you. And I’ll edit this blog soon to include that step for people like you so they can easily embed it in their sites and some themes by default comes with a box where you can easily copy/paste your code. And for wp_enqueue_script reference please check the following link.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
And anyway thanks for pointing it out, I’ll soon make it helpful for people like you.
Thank you for this detailed post. Perfecto!
Hello
This is not working
Hello Boston,
It is working and I did it myself, you might be doing something wrong.
Hi there! I was wondering if it was possible to link the pop up to an image rather than a button?
Yeah just give it an of “open-popup” and it will work.
This is fantastic, but I still don’t know how to get it to pop up…. you missed out the last step… how do I link the code to a button??/
Just create a button with an id of open-popup and it will work. Other than that if there is anything else please do not hesitate to ask me.
Thanks for making this post!
If I’m linking the pop up to a Call to Action button, what would I put in as the Button Link?
just give that call to action button an id and replace “open-popup” in document.getElementById(“open-popup”) with your id and it should work.
So just to clarify we leave the button link section lank and in the css id we put the “open-popup” id?