How to enable donations

1. Load the Blink SDK on your website

2. Integrate Blink donation components

A donation component is an HTML node that usually wraps text content, pictures etc. and an action button. Once the action button is clicked, a donation flow is started. There are several ways of managing donation elements with Blink.

2.1. Blink managed native components

You can embed a Blink donation component natively in your website by placing an empty HTML node with the blink-donation-container class:

<div class=”blink-donation-container”></div>

The Blink SDK will automatically find this node and insert a Blink element inside it. This element will contain branding and messaging components such as images and text, as well as an action button that starts the donation flow. Branding components like fonts, image URLs, spacing, text etc. are managed and configured by Blink to create a natural fit for your website.

2.2. Custom native components

Add your own donate button (or any other call-to-action component) on the website, wherever you want to integrate the donation flow (e.g. on the application's sidebar/navigation bar).

A user starts the donation flow by clicking the button (or generally performing the action in the call-to-action component), and the website's code calls the appropriate Blink SDK hook. Here's an example of such a button:

<button onclick="blinkSDK.showDonationModal()" class="support-button">
    Support us!
</button>

There are 2 hooks available for starting a donation flow: blinkSDK.promptDonationPopup() and blinkSDK.showDonationModal(). Both of them open a modal dialog, obstructing the rest of the page and drawing the user's full attention.

The blinkSDK.showDonationModal() hook is more appropriate when the call-to-action component is minimal (e.g. a button in the sidebar), since the modal dialog will show a detailed page with text and images.

The blinkSDK.promptDonationPopup() hook is more appropriate when the call-to-action component is already surrounded with relevant context (e.g. a button within a How to contribute page), since it will open the dialog directly with an authentication form or, if the user is already authenticated in the Blink system, directly with the donation form.