Donation Widget

Want to add a Givsum "donate" button directly to your website?

By using Givsum's Donation Widget, you can add a "donate" button and allow your visitors to donate from your website.  Copy and paste the code provided in your charity Settings page, or use the code below by replacing [charity] with the charity's url slug.

<a href="https://www.givsum.com/charities/[charity]" class="givbtn">Donate now on Givsum</a>
<script src="https://www.givsum.com/widget.js" type="text/javascript"></script>

Advanced Usage:

The "script" tag only needs to be called once and can be placed anywhere relative to your widget button(s).

Use a "data-style" attribute with the values "full" or "none" to make the button full-width, or remove the default styling.

Use a "data-amount" attribute to pre-populate the donation amount field inside the popup. You can also set the donation to recurring by setting "data-recurring" to 1, 3 or 12 for monthly, quarterly or annually. Note that these pre-set values are not forced and the user can still change them.

Alternatively:

You can also use the Givsum Donation Widget by adding an iframe donation form directly to your website which will allow your visitors to donate from your website. Copy and paste the code provided in your charity Settings page, or use the code below by replacing [charity] with the charity's url slug.

<iframe src="https://www.givsum.com/charities/[charity]/widget?givwidget=true&givembed=true" width="50%" height="400px" style="background-color: #f9f9f9"></iframe>

Advanced Usage:

Use the "width" attribute with a value from "0%" to "100%" to decrease and increase the width of the donation form. 

Use the "height" attribute by increasing or decreasing "400px" to increase and decrease the height of the donation form.

Use the "background-color" attribute held inside the "style" attribute to modify the background color of the form as fit for your website. The value entered after the "#" should be in hexidecimal format for the RGB value. The default recommended color (#f9f9f9) shown above is a light shade of gray.

Custom Donate Button

This is an example of a custom donate button where you can use your own button styling yet still have the payment modal popup work.

Depending on the implementation, the button can have any class. The three key components are

1. givwidget.js file script tag
2. anchor tag href pointing to the url of the organization or opportunity
3. onclick method on the button. this could be customized with a javascript event capture. The event.preventDefault(); code is required to prevent the default button behavior.

Implementation if you can edit onclick for the link

<script src="https://www.givsum.com/widgetgiv.js" type="text/javascript"></script>

<a class="givbtn" href="https://www.givsum.com/charities/demo-organization" onclick="event.preventDefault();gsw.modal.load(this);">Donate</a>

Implementation if you can't edit onclick for the link, for a single button on the page

<a id="givbtn" href="https://www.givsum.com/charities/demo-organization">Donate</a>
<script src="https://www.givsum.com/widgetgiv.js" type="text/javascript"></script>
<script>
    function givsumReady() {
        givsumButton = document.getElementById('givbtn');
        givsumButton.addEventListener('click', function(e) {
            e.preventDefault();
            gsw.modal.load(this)
        });
    }
    document.addEventListener("DOMContentLoaded", givsumReady);
</script>

Implementation for multiple buttons on a page

<a class="givbtn" href="https://www.givsum.com/charities/demo-organization">Donate 1</a>
<a class="givbtn" href="https://www.givsum.com/charities/demo-organization">Donate 2</a>
<a class="givbtn" href="https://www.givsum.com/charities/demo-organization">Donate 3</a>
<script src="https://www.givsum.com/widgetgiv.js" type="text/javascript"></script>
<script>
    function givsumReady() {
         let givsumButtons = document.querySelectorAll('.givbtn');

         givsumButtons.forEach(function (givsumButton) {
            givsumButton.addEventListener('click', function(e) {
               e.preventDefault();
               gsw.modal.load(this)
            });
         });
    }
    document.addEventListener("DOMContentLoaded", givsumReady);
</script>