Yep!

If you use Wix to host your website and you’re attempting to embed your form or a widget, here are some tips.

Wix handles individual sites differently, and sometimes does not play well with widgets on mobile. If you're experiencing issues with the display of your form, please contact us at support@qgiv.com so we can lend a hand!

Please note: Wix doesn’t support Abandoned Gift Reminders for embedded donation forms.

Wix also handles donation forms and event registrations a bit differently, so we’ve included instructions for both kinds of embeds.

Contents:

• Embedding Donation Forms
• Embedding Event Registrations

 

Embedding Donation Forms

If you’ve created a widget in your Qgiv control panel, you can go into the widget settings and copy the code you see listed:

If you need help generating the form embed code, check out this article.

In Wix's site editor, click the Add Elements button.

Select Embed Code and then Embed HTML.

Paste the widget embed code you copied from Qgiv and click Update.

Please note: You may need to resize the element in the Wix editor for it to display correctly.

Use the small circles around the edge of the resulting window to adjust the size of your embedded form.

Save and Publish your website. Then, view the live website.

Right-click near the container box that you placed on the website. A drop-down menu will open near your cursor. Click the "Inspect" option in the menu to open the browser's devTools. This will open a panel that will show you the website's HTML.

Locate the iFrame that is loading in the embedded form. There are a couple of ways to do this:

• While on the Elements tab of devTools, press Ctrl+F or CMD+F on your keyboard and type "Embedded Content" in the search box. That should be the title of the iFrame we’re looking for.

• While on the Elements tab of devTools, click the element selector tool (it looks like a pointer on the edge of a dash-outlined box) and then click on the form. You should be able to scroll up through the elements in the HTML and find the iFrame with the title "Embedded Content."

Once you have found the iFrame, copy the "src" property's URL. It should look something like this:

https://product011-wixsite-com.filesusr.com/html/<hash>.html

To copy the URL from the inspect tool, right-click on the URL and then select “Copy Link Address.”

Now we’ll paste the URL in the Page URL field of the widget editor in Qgiv. Once you’ve pasted in the new Page URL, make sure to save your widget.

That’s it! If you have any issues or questions, don’t hesitate to contact us.

 

Embedding Event Registrations

Embedding an Event Registration widget on a Wix site is a little more involved because of some technical limitations on the Wix side. Here’s what you’ll need to do for the Event Registration embedded widget to work correctly.

First, you’ll need to be on one of Wix’s Premium Subscriptions. This is a requirement on the Wix side and isn’t connected with any Qgiv fees or technical requirements.

Next, from the Website Editor in Wix, you’ll need to add a container box to the website and place it where you want the event registration button to go. When you have the placement correct, make the background color of this container transparent.

Publish these changes and then view the website.

Pro tip: We recommend using Google Chrome to follow along with these steps, though Safari and Firefox work similarly.

Right-click near the container box that you placed on the website. A drop-down menu will open near your cursor. Click the Inspect option in the menu to open the browser's devTools. This will open a panel that will show you the website's HTML.

While on the Elements tab of devTools, click the element selector tool (it looks like a pointer on the edge of a dash-outlined box). Then, hover over the container box on the website.

This will highlight and select the specific section of HTML for the container box. Once you have the HTML for the container box selected, you'll see a line that starts with <div> immediately above the selected HTML. This <div> contains an ID. Copy that ID because we are going to be using it later.

Now we’ll head back to the Widgets section of your Qgiv control panel. You’ll need to generate an embed code for the Event Registration widget that you’ll copy and paste into your website. In the next few steps, we’ll make some adjustments to the code so we can paste it into Wix.

If you need help generating the embed code, check out this article.

Here is an example of the embed code you can copy from the Widgets section (if you have a styled button):

We need to split this embedded code into two sections, which we’ll call “Section A” and “Section B.”

• Section A will be the code that needs to be injected into the Head of the website. It is the last line in the original code block and consists of the script tag. Here’s an example, (example: starting with <script> and ending with </script>).

• Section B will be the rest of the code, which includes a style tag (example: <style> </style>) and button element (example: <button></button>). This will be injected into the Body of the website. We are going to need to add a line to the style section and also a custom script tag.

Next, navigate back to your Wix Home Dashboard. On the left pane, look for the Settings section. Within Settings is an advanced section called Custom Code, which is only accessible to users who have upgraded to a Wix Premium Subscription.

Once you’re in the Custom Code section, there are going to be three places to place Custom Code: Head, Body - Start, and Body - End.

In the Head section, if there is not currently any code, you should see a link that says Add Code. Click that link and a modal will open. Paste the Section A code from above and make sure that these settings are applied:

• Name: Can be whatever you want
• Add code to pages: All Pages, Load code once
• Place code in: Head

Click Apply to save Custom Code.

Also in the Custom Code section, there is a section for Body - End. Paste the Section B code from above and make sure these settings are applied:

• Name: Can be whatever you want
• Add Code To Pages: Choose Specific pages - Page where the container is placed
• Place Code in: Body - end

Click Apply to save Custom Code.

Everything should now be set up to have the embedded Event Registration modal work correctly! If you have any questions, please don’t hesitate to reach out to our Customer Experience team.