There's a few options here. The first option is to place a button that just links out to a Funraise Giving Page. A Giving Page is a stand-alone landing page that hosts a donation form. This will be the easiest way to allow supporters to make a donation on your website. The second method will be to embed a form directly into the page. This is a bit more advanced, but it's entirely possible.
Alrighty, let's take a look at the first option, which is just linking out to a donation page. We can click to add an element, we'll select Button, and then we can just drag this button right into the page here. We'll double click and title this button as "Donate" and then we can add a link. We want to link to a web address, and then we need to paste our URL here. In order to grab the URL, we'll jump right into Funraise. Inside Funraise, here we're looking at our list of Giving Forms. If you're new to Funraise, you can always access your Giving Forms from the side menu. In order to grab the Giving Page URL we'll go ahead and open up the forms editor. The editor is where I can configure the settings and the design for my form, which we've already done.
Now we're ready to jump right into the Publish section. Each Giving Form has its own unique Giving Page, which is hosted by Funraise. You can edit the image, images and content for this page, and you can share this in emails or social media posts or use it, as we are about to, for our website's main donation page. You can see that it's got clear content and the donation form is hosted right on the page.
Alright, so now that we've got this URL, we can paste this right into our Wix button. Easy. So now if we'd like to preview that, we can click Preview, and then we'll just give this a test. Great! It opens up our page where our form is located. Now, that's fairly easy.
So the second option will be to embed the form so that it lives right on this page. There are a few limitations here, and so it'll be up to you to decide which option is best for you. Let's go ahead and delete out the button so we're ready for our second option.
Now, for the second option, we're going to want to add an element and we'll select "embed" and then we'll click "embed a widget." Now, the way that Wix works, it's going to embed anything we put into this box into an iFrame. That means that the contents will be constrained to this box. So there's a few things that we can do to get around that. One is to stretch this box. This will make the box the full width of the page. The other thing that you want to do is to drag this box down. Now, how high should you drag it? Well, that depends on how many items you have on your form. The general rule is that you want the form to appear fully in this box without overlapping the bottom. That way, the user doesn't have to scroll the form within this iFrame.
Alrighty, now we are ready to add content. So I can click "enter code" and we're going to paste some code right into this box. Now to get the embed code we'll jump back into Funraise. We'll click Button Launcher. This will add a button on our site that will open the form when clicked. There's three snippets that we'll need to place, and we need to place these in order. So first we'll copy the Funraise Aware Code. Paste the Funraise Aware Code and then we'll jump back over to Funraise. We'll copy the Form Configuration code. This code makes a specific form available and ready on this page. Paste right below the script we just placed.
So now we're ready to place our button. You can configure your button styles here in this simple editor. We'll go ahead and copy this default button code. OK, so now we're ready. We'll click update, and now we can see that this code has added a button. So if we click "Preview" you can see our button is here, and when we click the button, the form is now opened.
Now remember how we talked about the items in the iFrame being constrained to the iFrame? Well, that's what you're seeing here. This is a limitation of Wix, where this form will not be able to pop over fullscreen without extra advanced work. So another demonstration, we click the button and the form pops up.
That's it! I hope that that was helpful. Have fun.
