Creating a GoCardless Web Widget


This web widget allows you to add functionality to your web site to allow people to make recurring donations via direct debit using Go Cardless

A web widget comprises HTML code which you will add to a page on your web site to allow a donation to be made.

Before you can add the widgets you need to connect Donorfy to GoCardless - see the knowledge base article 'Connecting to GoCardless' for details 

Creating the Widget

In Donorfy open the settings and find the web widgets - add a new widget as follows:

  • Give the widget a meaningful description
  • Complete the Web Site Settings section
    • to thank a donor after setting up a direct debit
    • if there has been a problem setting up the direct debit
    • Choose 'Direct Debit Sign Up using GoCardless' as the type of widget you want
    • Enter the full URL (i.e include the HTTPS:// ) of the page on your website to display
    • Optionally you can enter some text to appear on the GoCardless sign-up forms - note this text must be less than 100 characters long
  • Complete the Transaction Settings section - these settings are used to correctly process donations received, the Product and Payment Method must be entered, the other settings are optional
  • You can specify the different acknowledgements you want to use depending on whether you want to send the acknowledgement by email or mail - these work as follows:
    • if you specify an email acknowledgement and the donor provides an email address then the email acknowledgement will be used 
    • if you do not specify an email acknowledgement or the donor does not provide an email address any mail acknowledgement will be used - provided the donor has provided a postal address
  • Transaction-related acknowledgements are used for one-off donations so are not sent for GoCardless sign-ups the Recurring payment instructions acknowledgements are used instead
  • If you prefer to use Mailchimp instead of an Acknowledgement a Mailchimp Automation can be assigned to the Web Widget - for further information please see this article: Initiating Mailchimp Automations or Supporter Journeys from Donorfy

Please 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.

  • Press the Generate Widget button, the preview will show the fields in the widget - the display does not include any styling as this will be inherited from your website
  • Paste the HTML code into the donation page on your website, save and publish the page - Note the widget must not be embedded in an iFrame as it will not work properly 

 Changing the Widget

If you change anything in the Web Site 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 Setting section then you don’t need to re-generate the widget - your new settings will be used for new donations as they are received.

Checking the Recurring Donations set up by the Web Widget

Click the plus sign next to the Financial menu to open the sub menu, click on Online Donations  - click on the History tab - this will show the donations setup in the last 30 days - you can select a constituent from the list.

Donorfy stores the details of recurring donations on a constituents timeline as a Recurring Payment Instruction

Recurring Donations from Existing Donors

When we receive details of the recurring 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 recurring donation to the new donor's timeline
  • One matching email address we will add the recurring donation to the existing donor's timeline
  • More than one matching email address we will add the details to the list found under Financial /  Online Donations - this allows you to choose which constituent the details should be recorded against.

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.


Please sign in to leave a comment.
Powered by Zendesk