How to add a popup donation form in Wix

Due to Wix’s embed policies, the Donorbox popup donation form unfortunately will not work properly on a Wix website. However, we do have a workaround to make the popup donation form work out of the box, but it requires the Wix site to have premium options enabled. With the premium option enabled, Wix allows you to add custom analytics tracking scripts which we can make use of to make the popup donation form work flawlessly.

Assuming that your Wix site has premium options enabled, here are the steps to make the popup donation work.

Add the donation button on the desired page

1. Go to the site's editor.

2. Choose the page on which you want to add the popup button, and add a button using the Wix editor tools.

3. Make the button link to the campaign's donation page on Donorbox.

4. Save and publish the site.

5. Go to the live page where the above button is added. Inspect on the button using the browser's Developer tools (if using Chrome: 1. open the menu at the top-right of your browser window and select Tools > Developer Tools, 2. right-click on the page element, in this case the button, and select Inspect Element). Copy the value in the ID attribute of the button element.

See the below screenshot for reference.

Enhance the button, added above, to make it work as a popup button.

1. For your Wix site, go to Dashboard > Settings > Tracking & Analytics.

     

2. Click on "+ New Tool" and select Custom.

3. A popup window will be displayed. Add the following Javascript code snippet in the space provided, choose to load the code in all the pages (All pages > Load code on each new page), at the end of the Body (Place code in > Body - end).

<script>
 var element = document.getElementById("<element id>");
 element.classList.add("dbox-donation-button");
</script>
<script src="https://donorbox.org/install-popup-button.js" type="text/javascript" defer></script>

Make sure to replace "<element id>" (bolded in the above code) with the button's ID copied earlier in step 5. See the below screenshot for reference:

Click "Apply" to save the code.

4. Make sure the custom code you just added above is enabled.

5. That's it! Go to the page on the live site and refresh to see if the popup donation button is working properly.