MailChimp Popup Opens on Button Click in Squarespace

Current research indicates that mailing list conversions are higher when visitors can "say" YES before they're asked for their email address.  For those using MailChimp, the Popup form can only be configured inside of MailChimp to appear automatically after a period of time. 

For MailChimp users using Squarespace, I describe below how you can modify the behavior of the Popup form to appear after the visitor has clicked on a "Yes" link instead of appearing automatically.

 

First, get the MailChimp Popup code from your account

  1. Choose [Select] for "Subscriber popup
  2. Choose [View Code]
  3. In your own code, you will need the specific data I have highlighed here, which is three fields: "baseUrl", "uuid", and "lid"

First, get the MailChimp Popup code from your account

 

Second, Add the Correct <script> code to the <head> of your web page 

For the correct form to appear when the visitor clicks the "button" or link on the web page, some code is required between the <head> and </head> tags of the Page where the form is triggered. For a Squarespace Page, that means placing the code in the "Page Header Code Injection" field under Settings > Advanced. 

<!-- MAILCHIMP MODAL FORM -->
 <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
 
<script>
function showMailingPopUp() {
    require(["mojo/signup-forms/Loader"], function(L) {
          L.start({"baseUrl":"mc.usXX.list-manage.com","uuid":"3a3a3a3a3a3a3a",
          "lid":"5d5d5d5d5d5d"
        }) 
     })
     document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
 };
 </script>
 

Want To Receive Upcoming Guides & Checklists?

 

You must now REPLACE the List-Specific-Variables with YOUR MailChimp List-Specific Values.

That means replacing this section:

"baseUrl":"mc.usXX.list-manage.com","uuid":"3a3a3a3a3a3a3a",
          "lid":"5d5d5d5d5d5d"
 

With the Variables MailChimp provides to you in THEIR Popup Code (from Step 1). For the purposes of this example, I'll say that the variables for my MailChimp List are:

"baseUrl":"mc.usO0.list-manage.com","uuid":"0z0zz000zz0000z0zzz00zzz0",
 "lid":"0z00z00z00"
 

The final Code would look like this:

<!-- MAILCHIMP MODAL FORM -->
 <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
 
<script>
function showMailingPopUp() {
require(["mojo/signup-forms/Loader"], function(L) {
L.start({"baseUrl":"mc.usO0.list-manage.com","uuid":"0z0zz000zz0000z0zzz00zzz0",
"lid":"0z00z00z00"
}) 
 })
 document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
 };
 </script>
 

Third, Add the Link Code Which Triggers the Form

On the web page itself, you now can add the code to trigger the form. 

If you're using a text link, Add a Code Block, inserting the following code, replacing the "Yes! I want in on the Awesomeness" text with your specific wording:

<a href="#" id="open-mc-popup" onclick="showMailingPopUp(); return false;">
YES! I want in on the Awesomeness
</a>
 
 

If, instead, you're using an image (to represent a "button"), use the following code.

Remember to modify the IMG Tag with your own link to an image and the proper Alt Text:

<a href="#" id="open-mc-popup" onclick="showMailingPopUp(); return false;">
<img src="http://example.com/graphicbutton.png" alt="YES! I want in on the Awesomeness">
</a>
 
 

NOTE: 

The PRECISE spelling and capitalization of the onclick variable must MATCH what's written in the <script> code from Step 2.

 

Finally, Test the Code

Open your web page from a brand new browser window.

Click on the link or button, and the MailChimp form should appear "over" the web page. When you fill-in the form and click the "Submit" button, the "Almost finished" message will appear on screen, and then the visitor can close the form overlay to return to the web page.

 

Troubleshooting

If the link doesn't work the way you expect, here are common issues:

  • Your web browser is displaying a previously-cached version of the page. 
    • Solution: Open the web page in a New Private or New Incognito browser window and click the link again
  • Your web browser is holding on to old Javascript data.
    • Solution: Quit the web browser entirely, and launch it again (or try a different web browser)
  • There's a typo in the code
    • Look VERY carefully at the code for a missing (or extra!) quotation mark
    • The Script is CASE-SENSITIVE, so make sure BOTH the spelling and capitalization of the ONCLICK variable matches what's in the <script>.
    • Double-triple-check the data you copied from YOUR MailChimp Popup (looks like: "baseUrl":"mc.usO0.list-manage.com","uuid":"0z0zz000zz0000z0zzz00zzz0",
              "lid":"0z00z00z00")
 
 
 
 
Amazing Andrea