What we're looking at here is a simple donation page that we've constructed inside the Weebly editor. Our goal over the course of this video will be to add a button right below the headline so that when the button is clicked, the Funraise form will pop up in the center of the screen where a supporter can make a donation without leaving your site. Alright, let's get started.
The first step will be to connect this website with Funraise, and we'll do that by placing several snippets into the header code of this website. In order to do that, we'll jump into settings, then click SEO. And then we'll scroll down to access the header code injection.
Now, in order to grab the snippets we'll place here, we can jump into Funraise. Here in Funraise, we're looking at our Giving Forms. If you're new to Funraise, you can always access your Giving Forms right from the side menu. We'll go ahead and click to open up the Giving Forms editor. This is where we can edit the settings or the design for the form, which we've already done. So now we're ready to publish.
There are several different ways to publish a Giving Form. The most recommended option, and the option for this example, will be the button launcher. The button launcher has three snippets of code that need to be placed into the right place. We'll start with the Funraise Aware Code. This code simply connects your website with the power of Funraise. We'll just place this here. Now it's important to note you should only place the Funraise Aware Code once because it only needs to load once across your entire site. Next, we'll grab the Form Configuration Code. This code creates a specific form on your website so that it's ready to go when the button's clicked. We'll paste that right below the Funraise Aware Code. Once we're done placing those snippets, we can click Save.
Now we're ready to jump into the builder where we can add a button. Rather than adding a normal button element, we're going to add an embed code. We'll place that right below the headline, and we're going to paste some code in here that will create the button. So we'll jump back into Funraise just once more. Here we can grab our button code. You can style the button with the simple settings in the editor. You can also override the inline styles, or if you're a web developer, you might want to use your own classes. We'll go ahead and click Copy.
Back in Weebly, we can click into our custom HTML element and we'll paste our button code right there. Alright! Now we can see our button. In order to see that live, we'll go ahead and click Publish. Excellent, and then let's refresh our page. There we go. So you've got a wonderful button and when the button's clicked, the form opens—just as expected. Wonderful.
I hope this was helpful. Have fun!
