⚠️Important: This option is available only in the Donorfy Professional plan.
The web widget allows you to add functionality to your website to take one off or recurring payment card donations.
A web widget comprises HTML code which you will add to a page on your website to allow a donation to be made.
Before you add the widgets
Connect Donorfy to Stripe, as it will process the payment on your behalf.
Register for Google reCaptcha v3.
Paste the reCaptcha secret keys into your configuration.
Once your Stripe account is set, login to your Stripe account.
Find your publishable key: the Stripe documentation will tell you how to perform that.
Add pages to your website, the minimum you will need is:
a page to host the web widget - e.g. a make a donation page.
a thank you page which is displayed when a donation is made.
You can add as many web widgets as you want, for example, to make donations to different funds or on landing pages for different campaigns. You can use the same ‘thank you’ page for many web widgets.
Create the Widget
In Donorfy:
Navigate to Settings, find Web widgets and add a new widget.
Give the widget a meaningful description.
Complete the Website Settings section:
Select Payment Card Donation using Stripe as the type of widget you want.
Fill in the Stripe Publishable key.
Fill in the URLs of the page to display to thank a donor.
Complete the Transaction Settings section: this setting swill correctly process donations received. Product and Payment Method must be entered, the other settings are optional.
Specify the acknowledgements you want to use depending on whether you want to send the acknowledgement by email or mail:
if you specify an email acknowledgement and the donor provides an email address, the email acknowledgement will be used.
If no email acknowledgement is available, a mail acknowledgement is issued if the donor has supplied a postal address.
📌Note:
Transaction-related acknowledgements are used for one-off donations, Recurring payment instructions acknowledgements are used for recurring gifts.
If you prefer to use Mailchimp instead of an Acknowldgement a Mailchimp Automation can be assigned to the Web Widget.
📌Note:
Mailchimp are in the process of sunsetting the Classic Automations feature. The option is now only available to accounts that have previously created a Classic Automation.Click here for further details
If your Mailchimp account does not have this feature, the suggestion is to use a Donorfy Trigger coupled with the Supporter Journey option.
Save the widget and re-open it.
Click Generate Widget button.
Paste the copied HTML code into the donation page on your website.
🤓Tip:
When you paste the widget code is has to be pasted in as HTML (or mark up) rather than just as 'content'. How that is exactly done depends on your website.
Make sure that your mode is switched to HTML, if you are using Wordpress this may help, also whoever looks after your web site may be able to help you.
Save and publish the page.
Test the Web Widget
After you have added the widget to your site you can enter a test donation using:
Test donor information e.g. John Smith, email [email protected]
Test card details.
The test payment will be passed to Stripe, then a confirmation will be received and displayed on the page noting that the payment had failed due to being a known test card.
To test end-to-end, you will need to make a donation with a live bank card. Once the payment has been accepted by Stripe, it will be passed back to Donorfy and the Thank you page displayed.
If you then go into Donorfy and search for your test donor you will find the transaction and if it was a recurring donation their recurring payment instruction on their timeline.
Changing the Widget
If you change anything in the Website Settings section of the widget then you need to re-generate the Widget and copy the HTML code to your website
If you change anything in the Transaction Settings section then you don’t need to re-generate the widget - your new settings will be used for new donations as they are received.
Donation Processing Details
If you open a donation made via a web widget and display the payment details you can see the card information and transaction codes.
Donations from Existing Donors
When we receive details of donation we will try to find an existing donor using the email address entered, if we have
No matching email address we will add a new donor and add the transaction to the new donors timeline
One matching email address we will add the transaction to the existing donors timeline
More than one matching email address we will add the transaction to the list found under Financial | Online Donations - this allows you to choose which constituent the donation should be recorded against.
Donations that Fail
If a donation cannot be collected - e.g. due to a lack of available funds - then a message will be displayed to the donor at the time
Editing the HTML in the Generated Widget
After you paste the widget HTML into your website you can edit it - e.g. make the style consistent with the rest of your website, change the layout, add graphics, change the wording etc. The key things are that you must NOT change are:
The form tag
The ids, names and maximum field lengths of the input fields
The hidden fields at the end of the generated HTML - after the comment 'Do not change these values' - these are used to control the operation of the widget.