Understand What the Web Widget Does
A GoCardless Web Widget is a block of HTML code generated in Donorfy and embedded on your website. It enables supporters to set up recurring donations using Direct Debit through GoCardless.
The widget inherits styling from your website and processes donations directly into Donorfy.
Create a GoCardless Web Widget
Follow these steps to create the widget in Donorfy.
Go to Settings, then click Web Widgets.
Click Add Web Widget and enter a meaningful description.
Configure Website Settings
These settings control the donor experience on your website.
Enter the Thank you page URL shown after a successful Direct Debit setup.
Enter the Error page URL shown if setup fails.
Select Direct Debit Sign Up using GoCardless as the widget type.
Enter the full HTTPS URL of the page where the widget will be displayed.
Optionally add custom text for the GoCardless sign-up form, keeping it under 100 characters.
Configure Transaction Settings
These settings control how recurring donations are processed in Donorfy.
Select a Product and Payment Method.
Optionally select additional values such as Campaign, Fund, or Channel.
Configure Acknowledgements
Acknowledgements for GoCardless widgets apply to Recurring Payment Instructions, not one-off transactions.
If an Email acknowledgement is set and the donor provides an email address, it is used.
If no email acknowledgement is set or no email address is provided, a Mail acknowledgement is used if a postal address exists.
Use Mailchimp Instead of Acknowledgements
You can trigger Mailchimp communications instead of Donorfy acknowledgements.
Please see this article: Initiating Mailchimp Automations or Supporter Journeys from Donorfy
Assign a Mailchimp Automation to the Web Widget.
Use this option only if your Mailchimp account supports Classic Automations.
If Classic Automations are not available, use a Donorfy Trigger with Supporter Journeys instead.
Generate and Publish the Widget
Once configuration is complete, generate and publish the widget.
Click Generate Widget to preview the form fields.
Copy the generated HTML code.
Paste the HTML into your website page.
Save and publish the page.
📌Note: The widget must not be embedded inside an iFrame.
Update an Existing Widget
How updates behave depends on what you change.
Website Settings Changes
Regenerate the widget.
Replace the HTML code on your website.
Transaction Settings Changes
No regeneration is required.
New settings apply automatically to future donations.
Check Recurring Donations Created by the Widget
You can review recent sign-ups in Donorfy.
Go to Financial, then click Online Donations.
Open the History tab to view donations set up in the last 30 days.
Each recurring donation is stored on the constituent timeline as a Recurring Payment Instruction.
Handle Donations from Existing Donors
Donorfy attempts to match recurring donations using the donor’s email address.
No match found creates a new constituent.
One match adds the RPI to the existing constituent.
Multiple matches place the donation in Financial, then Online Donations so you can choose the correct constituent.
Edit the Generated HTML Safely
You can customise the appearance of the widget after publishing.
You may change:
Styling and layout.
Wording and labels.
Graphics and page structure.
⚠️ Important: Do not change any of the following:
The form tag.
Input field IDs, names, or maximum lengths.
Hidden fields marked Do not change these values at the end of the HTML.
These elements are required for the widget to function correctly.