Integrating HelpYouSponsor with your Website
You will see notice that each individual program has a unique frontend URL that looks something like this:
You clearly don’t want your donors to have to type in this URL to be able to donate, so you have two options:
a. Use an Iframe in your existing web-page
An Iframe is essentially a website within another website. This is by far the simpler of the two options.
From your Admin login, If you go into your “Program Options” and click on your desired program, you will see a box that says, “Embed Code.” From here, you can copy the Iframe embed code in the gray box and paste it into the code of your website wherever you like. This will put the frontend into an Iframe window within your existing web-page.
Iframe Scrolling Issue
The Problem: When the donor clicks a button, they have to scroll back to the top of the page.
Why does this happen? Because the HYS Iframe is a window within your website, the web browser doesn’t realize that the page needs to be scrolled back to the top. Because of browser security constraints, we can’t (from inside the iframe) tell your page to scroll to the top.
The Fix: However, you can fix this very easily in the code on your website.
There are three ways you can remedy this:
1. Scroll to Top of Page
Scrolls to the top of the page every time the iframe changes.
Add this code to your iframe tag
This option is best if your iframe code is placed near the top of your page.
2. Scroll to Specified Location
Scrolls to the specified location every time the iframe changes.
First Determine the location you want the page to scroll to (we recommend just above the iframe.)
Then insert this code in that location
Then add this code to your iframe tag
This option is best if your iframe code is not near the top of your page.
3. Don’t use Iframe
If you know what you are doing, you can directly link the frontend to your website and customize it so that the frontend sponsorship page looks just like another page on your website.