Skip to the main content.

4 min read

Feature Spotlight: Donations Web Component

Feature Spotlight: Donations Web Component

In this blog, we’re shining the spotlight on a Spektrix feature that encourages charitable giving through your website. Find out about our users’ experience, why they’re loving it and how it can work for you.

Donations Web Components

Interactive Donations Web Components easily engage your donors, enabling them to select a donation amount and complete the transaction from anywhere on your website in a few clicks. They give you the power to create on-brand donation asks and boost instant giving online.

gif of a donations web component in action, offering customers a choice of four giving levels with bold visuals and a clear call to action

Donations Web Components are simple, configurable code snippets provided by Spektrix which, with a little bit of help from your web developer, integrate seamlessly into your site and the Spektrix system. They can open the path for future charitable giving and support captivating campaigns tailored to your needs. No space wasted - you have full flexibility to place web components anywhere in the online journey.

"It’s been a really positive experience for us and it really just shows the potential for digital in fundraising long-term."
Robyn Masson, Relationship Coordinator, Opera North

Ease of Use - for everyone

When it comes to visitors to your website, it couldn’t be more straightforward to donate. The engaging nature of the Donations Web Component is only limited by your creativity, meaning that a donation can be made as easy as a click of a button or a shift of a slider.

"The web component has reduced the clicks in the donor journey. We’ve seen decreased rates of donation abandonment."
Robyn Masson

After implementing the Donations Web Component, Opera North in Leeds grew their year on year web donations by 523%

Setting up a web component will take a bit of planning and some time from your web developer, but once it’s done, you can change the donation increments, introduce a new fund or pop the component on a new web page with minimal coding. If you're currently not working with a web developer, have a look at the Web Partner Community or contact Spektrix Support.



"We wanted it to look like part of the website, and the great thing with the components is that we’re able to use our fonts, our colors, so it actually looks really engaging and people want to do it."
Nathan Garwood, Marketing and Development Officer, Mercury Theatre 

No need for drab donation asks: with a bit of HTML and CSS, a simple design language for websites, you can style the components right out of the box to match your brand. This way, our lines of code turn into an attractive, seamlessly integrated part of your website - they look like you, they talk like you. Visually appealing Donations Web Components catch the eye and make success all the more likely.



Meet visitors where they are: web components are designed to work anywhere on your website, so you can place a donation ask where it is relevant. Add it to event listings, make a targeted appeal in a news story or maximize the effect of campaign content. 

They don’t take up much website space either. There is no need to restructure an entire webpage around your donation appeal - and your web team will love you for that. 

You can add as many web components to your website as you like. They can link to a central fund set up in Spektrix, or you can be flexible in your fundraising to support education, programming and other activities. Because it’s so easy to adapt, test styling, key messages and donation amounts, you can encourage giving to various donation pots through distinct components.


Testing & Reporting

Change a word here, add a message there, redefine the increments: with the power of your CMS and the Spektrix segmentation tools at your fingertips, Donations Web Components lend themselves to A/B and user testing until you get it just right. You can set up specific funds in Spektrix linked to your web components for accurate tracking of incoming donations.

"It’s not just the ease of donation for people, it’s also, from our point of view, the ease of knowing who donated when and at what point. We’ve been able to start segmenting our audience massively on that information. It’s been invaluable in that sense."
Abbi Roberts, Head of Development, Mercury Theatre

Because it’s so straightforward, you’ll reach new donors as comfortably as your loyal and generous customers, boosting your reward. The development team at the Mercury Theatre, Colchester, started seeing donations from overseas during their online winter season, their geographical boundaries eliminated by Covid-19 and online fundraising. 

Web components give you powerful insight into who’s donating to you by linking up with your Spektrix reports. Knowing your new donors is the first step on a path to a more engaged relationship with them, so get those “Thank You” emails ready and kick your fundraising campaigns into the next gear.


But does it cost anything?

Short answer: yes. Unless web development is one of your secret superpowers, you’ll need some assistance from your designer on setting up the web components in the first instance, and that usually costs some time and money. We’re trying to keep it affordable, providing you with the base code, so all that’s left to your web developer is styling.

The fundraisers at Opera North and Mercury Theatre agree it’s a worthwhile investment. Both have been seeing a rise in online donors and value of donations flowing in through the components. Having been able to refine their components through testing and evaluating also means that they were able to focus their efforts on getting online donations to a sweet spot, and spend less money on blanket mailouts. 

"Paper-free is becoming the preferred way of giving, more of our regular donors and friends give online now – people that last year would have returned our donation form with a check in the post. We see higher value donations coming through the website."
Robyn Masson


Who can help you with it? What are the next steps?

If you want to get started on Donations Web Components, there are a couple of things we recommend before you contact your web developer. Planning is key; think about what it is you want to achieve and how a web component might fit your development strategy in the most effective way. 

Our Support & Training Consultants have helped many Spektrix users to get the most out of our features, and they will be able to assist you with your journey to a sparkling new Donations Web Component.

If you and your web developer are ready to get started, there is more information about web components on our Web Component Portal, including component examples, code samples and full documentation of the functionality.


And that’s all there is to it

Are you ready to give your online charitable giving a boost? As you’ve seen, it’s easy to encourage instant donations by placing an interactive ask anywhere in your online journey. We’re providing you with the code and support; all you need to bring is your creativity to get your attractive fundraising tool working. Donations Web Components will be a staple of your website before you know it.

The Opera North website was built by Substrakt. The Mercury Theatre website was built by Splitpixel.


Discover more integrated solutions in the Spektrix Partner Directory

Spektrix Partner Directory

Aenne Lotze is Marketing and Communications Specialist at Spektrix