How to add Giving Checkout buttons to your website

There are three ways to add pop-up Giving Checkout donation forms to your website:

Note: If you're having trouble, don't forget you can still use your standard Giving Checkout URL behind any of your own website buttons, but that will result in a redirect rather than a pop-up.  

If you have a WordPress website, click here for more instructions.

1. Standard Button

• Change the colour of the button and button text
• Choose a large or small button
• Add or remove payment logos

All you have to do is copy and paste the HTML code into your website's code

2. JustGiving Button

• The large option shows ‘JustGiving 100% goes to Charity’, and the small option shows simply ‘JustGiving’
• Choose a large or small button
• Add or remove payment logos

All you have to do is copy and paste the HTML code into your website's code

________________________________________________

3. Add to existing button to your website (Advanced)

This is an advanced function where you can add a pop-up Giving Checkout form to the button of your choice.

Heads up - this requires some technical ability!

1. Copy the code we provide into your website’s HTML.
2. Add a script to the bottom of the HTML body tag

We've got even more detailed instructions for option 3 here:

1. Choose the element on your website where you want to add your donation button. This could look like…

<button class="example-button"> Donate now</button>

2. Once you have chosen the HTML element on your website where you want to add the donation button. Add the following attributes to that element:

1. data-jg-donate-button
2. add one or other of the below attributes (but not both):
   • For the "simple shareable link":  data-charityId="2050" (use your real charity id)
   • For a custom link: data-linkId="bdteg3y67" (use a real link id)
3. Add data-marketCode="GB" (Or other market code, as appropriate - note this should be uppercase - GB, US, AU, or NZ)
4. And finally, data-linkType="givingCheckout"

This could look like:
<button class=”example-button” data-jg-donate-button data-charityId=”2050” data-marketCode=”GB” data-linkType=”givingCheckout”>Donate now</button>

3. If you want to add multiple donation buttons to your page, repeat steps 1-2 for each element.

4. Lastly, copy and paste the following code at the bottom of the HTML body element of the page. It's important to add this code at the bottom of the body element to ensure it works properly:

<script src="https://www.justgiving.com/widgets/scripts/widget.js" data-version="2" data-widgetType="attachCheckout" type="text/javascript" ></script>

The script referenced in step 4 will check the entire page for HTML elements with the data-jg-donate-button attribute (added in step 2). It will then use the other data attributes added in step 2 to generate the correct URL for the JustGiving Giving Checkout. Finally, it will add a "click" event listener that opens the pop-up checkout and prevents any default click behavior of the element.

If you encounter any errors, check your browser console for error messages which may provide useful guidance.

Make sure that your element has appropriate accessibility markup if required. For example, if you're not using a button element, consider adding the attributes’ role="button" and aria-label="Donate with JustGiving"

(Note - this may not be required, depending on the rest of your markup).

Still struggling? Our team is here to help.