Neon One Help Center home page
Neon One Help Center home page
support

Articles in this section

How to embed a donation page on my site

Last updated

If you have a standalone donation or standalone ticketing pages with Neon Fundraise, you can embed these pages on your organization's website.

The embed code can be found in your organization's Admin interface.

  1. Log in to the Admin at admin.rallybound.com
  2. Double-click on the standalone donation or ticket page you would like to embed
  3. Click on the Embed Code button at the bottom of the page
  4. Click the Copy button located underneath the embed code
  5. Paste the code into your site's HTML editor.

For best performance we recommend loading our plugin before any heavy javascript assets so the iframe can begin loading in the background.

7jCuj2Ch_u9oHa3hdiQ01svfGFl5Tn__OA.png

Whitelisting URLs

The donation page may be embedded on whitelisted URLs only (the same applies when attempting to embed any other campaign page via iframing). Whitelisted URLs are listed on the embed code interface. The site entered in the Admin as the organization's website is whitelisted by default and cannot be removed.

To add a URL to the whitelist:

  1. Click the "Add domain" button
  2. Enter the URL to whitelist 
  3. Click Save

To remove a URL from the whitelist: 

  1. Click the trash icon on the URL to remove
  2. Click Remove

image.png

Tips and Tricks

In the embed code there's a section that begins "_rbConf.otherParams". This section can be used to set various defaults on the embedded donation page. When adding to this list, ensure that all but the last one have a comma after them.

  • To set a default donation amount, add:
    donate: [amount]
  • To set the donation to be recurring by default (this requires Recurring Donations to be enabled on your page), add:
    recur: true
  • For the donor to cover fees by default (Donor Covers Fees must be enabled in the admin panel), add:
    coverfee: true
  • To set the language on the form, add:
    lan: [language key]
  • To auto populate the donor's name, add:
    name: [name]
  • To auto populate the donor's email, add:
    email: [email]

For sites that have a 'sticky' navigation or other sticky elements that can cover the embedded form add: "_rbConf.additionalOffsetTopForScroll = {pixel amount - ex. 200};" above "_rbConf.otherParams" for the page to scroll a bit more to ensure that the form scrolls enough on success or error.

How to modify the embedded donation form with URL parameters

If you'd like to utilize URL parameters on your site to modify the embedded donation form in some way, for example to set the preselected donation amount or display language, add the code block below just above "//_rbConf.defaultAmount = 100; // optional" in the embed code.

For example, to capture the rbref tracking code on an embedded donation form, add:

var qsParm = {};
if (window.location.search.length > 1) {
    var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i = 0; i < parms.length; i++) {
        var pos = parms[i].indexOf('=');
        if (pos > 0) {
            var key = parms[i].substring(0, pos);
            var val = parms[i].substring(pos + 1);
            qsParm[key] = val;
        }
    }
}
if(qsParm.rbref){
_rbConf.otherParams.rbref = qsParm.rbref;
}
 
For other parameters, replace "rbref" in the second to last line with the desired paramater (see list above, under Tips and Tricks).

Other Embed Options — For advanced users only!

In addition to embedding the entire donation form into a webpage, the donation form can also be embedded in a widget style. Note that the same whitelist requirement outlined at the top of this article applies here as well.

There are two styles for this. Follow these instructions to add them:

  1. Retrieve the URL of the donation page you'd like to embed.
  2. You will need to add parameters at the end of the URL, as follows: 
    • For the smaller widget with a 3-step donation process, add "/plugin?narrow=true"
    • For the wider widget that displays the entire form at once, add "/plugin?wide=true"
  3. Wrap your URL in an iframe tag as follows:
    • For the smaller widget:
      <iframe src="[your URL]" height="415" width="320"></iframe>
    • For the wider widget:
      <iframe src="[your URL]" height="422" width="638"></iframe>
  4. Paste your code as HTML in the desired location of your website.

The same tips and tricks mentioned above can also be used on the widget (and more!), but in this case they should be added as parameters directly to the end of the URL:

  • To set a default donation amount, add:
    &donate=[amount]
  • To add amount buttons to the widget, add multiple comma-delimited amounts to the "donate" parameter, like this:
    &donate=[amount],[amount],[amount]
  • To set the donation to be recurring by default (this requires recurring to be enabled on your page), add:
    &recur=true
  • For the donor to cover fees by default (this must be enabled in the admin panel), add:
    &coverfee=true
  • To preset the recipient of the donation, you will need to retrieve the goal ID of the recipient (could be the campaign, a team, or a fundraiser), and add it to the URL:
    &id=[Goal ID]
  • If you are embedding the donation page of a fundraising campaign, the user can select the recipient of the donation if you add:
    &selectors=true
  • To auto populate the donor's name, add:
    &name=[name]
  • To auto populate the donor's First name, add:
    &firstName=[first name]
  • To auto populate the donor's Last name, add:
    &lastName=[last name]
  • To auto populate the donor's email, add:
    &email=[email]

narrow.pngwide.png