Wix, Giving Forms, and Query Parameters

Learn how to utilize query parameters when hosting your giving form on Wix.

When using Wix to host a giving form, query parameters can get a little tricky. This is because Wix requires you to embed content using a widget, which in turn renders the content in Wix's own iframe. Because of this, you don't get the automatic proxying of query parameters that comes with the embed script. 

Below are the steps required in order to successfully use query parameters on a Wix site:

1. Enable Dev Mode on your site. This can be found at the top of the page editor.
   
   
   
   
2. Once enabled, navigate to the page with your form embedded. In the editor for that page, you should now see an input block below the page content where you can add code to the current page:
   
   
   
   
3. If you've already added the giving form to your page, skip ahead to step 4. Otherwise, to add the giving form to the page, click Add Element > Embed Code > Embed HTML. In the modal that pops up, make sure you select the radio button to add code and paste in the code snippet from the giving form ellipsis in GMS.
   
   
   
   
4. Navigate to your page and hover over the Embed HTML component. You should see a label popup that indicates this is the HTML element and displays the element ID (something like #html1). Take note of this name. 
   
   
   
   
5. In the code section of the page, replace the HTML element ID from step 4 with the following Javascript:
   
   

   import wixLocation from 'wix-location';
   
   
   
   $w.onReady(function () {
   
   let iframe = $w('#html1'); // replace this with the ID from your page.
   
   const queryObj = wixLocation.query;
   
   const queryKeys = Object.keys(queryObj);
   
   
   
   
   // reduce block
   
   const queryParamString = queryKeys.reduce(function(acc, val) {
   
   return `${acc}${val}=${queryObj[val]}&`;
   
   }, '?');
   
   
   
   
   iframe.src = `${iframe.src}${queryParamString}`;
   
   });

6. Save and publish your page.

That's it! Query parameters should now work on your Wix site's iDonate giving form. Check out our knowledge base article on query parameters for more information.