Integration Widget

Easily integrate our widget into your website by copying and pasting the following code snippet.

1. Place this snippet to head tag

<script defer id="foundation-widget" type="module" src="https://gnfifoundation.org/assets/widget/widget.js" widget-container="donation-container"></script>

2. Inside your page, add this snippet.

Place it anywhere you want, it will render button donation automatically
Set program with slug. You can get list programs here 
<div class="donation-container" program="local-heroes-development-program-lhdp"></div>

# How to customize button style

Use button-style attribute to add custom css for the Donation button

Example:

button-style="width:100% !important;background:#000 !important; color:#fff !important;"


# How to change button label

Use button-label attribute to change the label for the Donation button

Example:

button-label="Dukungan"


# How to add analytics

Navigate to script widget.js, and add new attribute called ga-id

Example: 

<script defer id="foundation-widget" ... ga-id="G-1234567890"></script>

Example (Preview)

Click to open donation modal

Default Style

Black Style

Outline Style

Let’s Make a Difference in
the Lives of Others

become a volunteer