In this guide, we'll show you how to accept donations on your website using some custom javascript and css that will create a popover on your website that contains your GivingFuel page. This will create a window overlay on top of your own website with your GivingFuel donation page.
This guide requires you to have access to the code of your website to implement. If you are using a website builder like Wix, Squarespace, Webflow, Wordpress, this method works too.
Jump To...
Method 1: Popover with Button Included in Code
Step 1: Add the following custom CSS link inside the <head> tag of your website.
The first step is to get access to the <head> tag of your website. We would recommend adding this line of CSS to every page of your website, but if your website uses a template file, you can add it once and this file will be loaded on all pages
Add the custom CSS link inside your <head> tag of your website
<link rel="stylesheet" href=" https://assets.webconnex.com/widgets/embed-modal/modal.css" media="screen" type="text/css">
Pro Tip: While your website may vary here are some links for editing the head tag in some popular builders.
Editing <head> tag using Worpress (your theme or template may vary)
Step 2: Copy and Paste HTML that will add a Button that will Trigger the Popover
To complete this step, you must be able to add or edit HTML on your page. Most website editors allow you to insert an HTML element or switch a text block to HTML view—either works as long as you can edit the HTML
Locate where you want the button to appear in the page body and paste the following code (you will need to customize this code slightly)
<!-- Trigger/Open The Modal --> <button id="myBtn">REGISTER NOW</button> <!-- Modal --> <div id="myModal" class="wbxModal" style="z-index: 9999999"> <span class="wbxModal-close"></span> <!-- Modal Content --> <div class="wbxModal-content"> <iframe src="https://dundermifflin.givingfuel.com/my-first-givingfuel-page" style="width:100%;height:100%;border:hidden;"></iframe> </div> </div> <!-- Modal Script --> <script src="https://assets.webconnex.com/widgets/embed-modal/modal.js" type="text/javascript" ></script>
Step 3: Customize the HTML For Your Event Page
Review the HTML to customize the embed code for your event. Locate the line in the code that says
src="https://dundermifflin.givingfuel.com/my-first-givingfuel-page", and replace the URL inside the quotations with your own GivingFuel page URL. Ensure you only change the URL starting from https:// and keep the quotes intact (otherwise, it will break)To change the button text, locate the first line of the code snippet where it says "REGISTER NOW." Replace this text with your preferred wording, ensuring you don't remove any necessary formatting characters
Step 4: Save, Publish, and Test Your Website
You can now test the popover on your website to ensure it functions correctly. Visitors will be able to donate directly from your site
Method 2: Customize Your Own Website Button to Use the Popover
If your website tool has pre-designed and pre-built buttons that are consistent with your style and theme, this method allows you to use one of those buttons to trigger the popover.
Step 1: Add the following custom CSS link inside the <head> tag of your website.
The first step is to get access to the <head> tag of your website. We would recommend adding this line of CSS to every page of your website, but if your website uses a template file, you can add it once and this file will be loaded on all pages
Add the custom CSS link inside your <head> tag of your website
<link rel="stylesheet" href=" https://assets.webconnex.com/widgets/embed-modal/modal.css" media="screen" type="text/css">
Step 2: Add a Code Snippet Anywhere in the Body of Your Page
Insert a custom HTML object anywhere on your web page. Since it will be invisible, placement doesn't matter. This code snippet controls the popover, and you'll set the trigger in the next step
<!-- Trigger/Open The Modal --><!-- Modal --> <div id="myModal" class="wbxModal" style="z-index: 9999999"> <span class="wbxModal-close"></span> <!-- Modal Content --> <div class="wbxModal-content"> <iframe src="https://dundermifflin.givingfuel.com/my-first-givingfuel-page" style="width:100%;height:100%;border:hidden;"></iframe> </div> </div> <!-- Modal Script --> <script src="https://assets.webconnex.com/widgets/embed-modal/modal.js" type="text/javascript" ></script>
Step 3: Customize the HTML For Your Event Page
Review the HTML to customize the embed code for your event. Locate the line in the code that says
src="https://dundermifflin.givingfuel.com/my-first-givingfuel-page", and replace the URL inside the quotations with your own GivingFuel page URL. Ensure you only change the URL starting from https:// and keep the quotes intact (otherwise, it will break)
Step 4: Add a Button To Your Web Page and Give it the Appropriate ID
Using your website builder, add or drag a button onto the page where you want to provide the button for people to donate. Then Using the properties or settings for the button, look for an option to declare an ID on the button. When you find where to put the ID, give the following ID:
myBtnIn your website builder, add or drag a button on the page where you want to provide the button for people to donate. Using the properties or settings for the button, look for an option to declare an ID on the button. Set the ID to:
myBtn
Step 5: Save, Publish, and Test Your Website
You can now test the popover on your website to ensure it functions correctly. Visitors will be able to donate directly from your site
FAQS
How does the pop-over feature work on mobile devices?
How does the pop-over feature work on mobile devices?
The pop-over method works seamlessly on mobile. On mobile devices, the pop-over automatically adjusts to fit phone screens.
Does the pop-over feature affect conversion tracking or analytics?
Does the pop-over feature affect conversion tracking or analytics?
While linking directly to your GivingFuel page is recommended, your traffic stats, conversion tracking, and other integrations will work when using the pop-over feature. However, backlink tracking from sources outside of your website won't be captured, as this method requires your own website to open the window to the donation page.