MailChimp Popup Script that works with Wix sites

mailchimp-popup-for-wix.md

Original credit for the code and instructions goes out to nickcernis. See fork source for that gist.

This was originally presented for WordPress, but I had the same issues on Wix. If you're having issues getting MailChimp's popup forms to work on your Wix site, do the following:

1. Take the code below and set the baseUrl, uuid, and lid values in the mailchimpConfig object to the ones specified in the popup script that MailChimp provided.

   <script>
     // Fill in your MailChimp popup settings below.
     // These can be found in the original popup script from MailChimp.
     var mailchimpConfig = {
       baseUrl: 'YOUR_BASE_URL',
       uuid: 'YOUR_UUID',
       lid: 'YOUR_LID'
     };
   
     var chimpPopupLoader = document.createElement("script");
     chimpPopupLoader.src = '//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js';
     chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');
   
     var chimpPopup = document.createElement("script");
     chimpPopup.appendChild(
       document.createTextNode(
         'window.dojoRequire(["mojo/signup-forms/Loader"], function (L) { L.start({"baseUrl": "' +  mailchimpConfig.baseUrl + '", "uuid": "' + mailchimpConfig.uuid + '", "lid": "' + mailchimpConfig.lid + '", "uniqueMethods":true})});'
       )
     );
   
     jQuery(function ($) {
       document.body.appendChild(chimpPopupLoader);
       $(window).load(function () {
         document.body.appendChild(chimpPopup);
       });
     });
   </script>

2. Go to the Dashboard for your site
3. Navigate to Settings > Tracking & Analytics (note that you'll need to scroll down in the left side menu after clicking on Settings to see "Tracking & Analytics")
4. Click the "New Tool" button on the page and select "Custom"
5. Fill out the form:
   • Paste the following code into the code snippet field:

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

   • Select your domain and give the custom code a name (I used "JQuery")
   • Under "Add Code to Pages", add the pages you want the popup to appear on (I left this as the default (all pages)).
   • Under "Place Code In", select "Header"
   • Click "Apply"
6. Click the "New Tool" button again and select "Custom"
7. Fill out the form:
   • Paste the code from above with your MailChimp specific values substituted.
   • Select your domain and give the custom code a name (I used MailChimp Popup)
   • Under "Add Code to Pages", add the page(s) you want the popup to appear on.
   • Under "Place Code In", select "Header"
   • Click "Apply"
8. Make sure your JQuery Custom Code is above your MailChimp Popup code
9. Enjoy!

Note that MailChimp stores a cookie for one year to prevent you from seeing a pop-up repeatedly after you've closed it or filled it in. If you're testing this you may need to clear cookies, use a different browser, or open a private browser window to see the form on repeat visits after dismissing or filling it.

Code provided under the ISC license.