How we customize Raisely to run successful fundraising campaigns

What is Raisely

Raisely is a SaaS platform for running all kinds of fundraising activities from small local events to huge charity campaigns. We're verified Raisely partners and use customization to make it even better.

Features-wise, Raisely is part site builder, part fundraising platform and part charity CRM. Most of its functionality, as well as the super-friendly Raisely customer support, is available on a free plan. The main source of Raisely income is from a small optional per-donation charge that appears as a pre-ticked checkbox on Raisely donation forms. 

Creating an appealing campaign website in Raisely is easy, thanks to their well designed starter templates that follow many fundraising best practices. In this article, we will review various customisation options that we at SystemSeed use for building highly effective fundraising campaigns using Raisely.

Using the Raisely visual editor

Raisely campaign customisation starts from adjusting your brand settings and editing content in Raisely’s visual editor. The editor requires a little bit of learning, but after some practice, you will be able to make 90% of any customisations to your Raisely site without involving a developer. 

Pros:

• No developer skills required. After a quick onboarding, designers and content editors can work on pages directly in Raisely.
• Unlimited number of pages per site
• Responsive page layouts using rows and columns
• Mobile & tablet versions of pages can be configured and previewed separately
• Configurable site header, footer and menu
• Configurable sign-up & donation form fields
• Dozens of built-in content block types
• Row templates for reusing content and styling across multiple pages
• Good documentation and out-of-the-box templates
• Built-in accessibility checks and colour advice 
• Dynamic tokens and merge fields like {{user.profile.name}} are available in page templates

Cons:

• Multiple people can’t work on the same page template at the same time. The changes from the first person may be completely lost because of the changes made by the second person.
• No ability to revert back to previous versions if someone accidentally saved the wrong thing. 
• No auto-saving - work in the visual editor requires clicking Save buttons here and there all the time.
• The colour palette is not fully configurable, tones are set automatically after your primary and secondary colours are set. It can benefit non-designers but at the same time it limits professional designers who want to fully control the colour palette.

As most customisations happen in a visual editor, developers need to understand it well when implementing custom components or applying custom CSS styling. 

More flexibility with CSS & SCSS

Modern CSS is a very powerful visual customisation tool, but Raisely goes one step further and enables SCSS support so that more experienced developers and designers can make use of existing variables and mixings in their styles.

Pros:

• Developer-friendly CSS & SCSS editor with syntax highlighting and basic validation
• CSS classes can be added to any row or block in a visual editor
• CSS class helpers, variables and mixins (docs)
• CSS changes are available on the site immediately

Cons:

• Raisely colour variables are not fully customisable leading to a lot of custom CSS overrides 
• As the amount of customisations grows, it becomes harder to keep them all in one CSS file (one solution to this problem is available later in this article)
• No code revisions (a solution to this problem is available later in this article)

Obviously, not everything can be solved with CSS in 2021, so let’s dig deeper. 

Analytics

Raisely pays a lot of attention to analytics and A/B testing for the platform. They shared some very useful data in their Fundraising Insights sessions (watch here: 1, 2).

When you create a fundraising campaign in Raisely, you can choose from several analytics integrations. Our favourite is Google Analytics with out-of-the-box support of Enhanced Ecommerce and a handful of other events.

Pros:

• 10+ integrations with easy setup
• Full integration with Google Analytics (Enhanced Ecommerce, most common events)
• Google Tag Manager and custom code support for more advanced setup
• Cookie banner can be enabled for GDPR compliance in the EU

Cons:

• Google Tag Manager doesn’t have as good out-of-the-box support as Google Analytics (one solution to this problem is available later in this article)

The two items at the bottom of the integrations list are particularly interesting for developers, so let’s have a look.

JavaScript events

Raisely sites are single-page applications powered by React. The easiest way to inject your JavaScript code in the application lifecycle is to use custom events such as page.viewed or donation.success.

In addition to JavaScript code, you can add custom HTML in the page head which is handy for connecting external CSS & JS from CDN.

Pros:

• Simple API with 10 most common user events and relevant metadata
• Allows the triggering of any custom analytics events, for example, firing additional events in Google Tag Manager or HotJar 
• Allows connection with, and initialisation of, simple external libraries (must be React-friendly!)

Cons:

• The Javascript events API was originally designed for customising analytics. Manipulating the DOM outside of the React application model is not really possible. 
• There is a risk of breaking the site with poorly-tested or React-incompatible custom code. Developer attention and thorough testing are required.   
• A custom HTML head will be added to all pages (it’s not configurable per-page). 

If the limitations of custom Javascript & HTML don’t meet all your requirements, you could consider building a custom component or an API integration. 

Custom Components

As we’ve seen in the previous sections, there are plenty of no-code & low-code customisation options available. If you want to build something more sophisticated and unique, Raisely offers Custom Components API. It allows developers to extend existing components or build completely new features using Raisely APIs or external tools.

At SystemSeed, we use custom components to fine-tune sign-up flows and donation or sponsorship forms. It also works very well for building bespoke functionality such as a content grid, custom filters, or integrations with third-party APIs. 

Pros:

• Developer-friendly editor with syntax highlighting and basic validation
• Modern React-based API
• A catalogue of examples and existing components
• Access to all necessary data, API calls and utility functions from inside of the component

Cons:

• Requires understanding of React framework and Raisely architecture
• Customised components lose some “out-of-the-box” features, e.g. the mobile sticky menu doesn’t work with a customised donation form
• The custom components code is loaded later than the default Raisely code. Developers should be aware of it and take care of page jumps. 
• Custom code requires support and maintenance as the platform evolves 
• A developer needs an “Organisation Admin” role (full access to everything) to work with custom components.

With Custom Components, it’s possible to launch projects with unique development requirements on Raisely in several weeks or even days, thanks to the capabilities of the platform.

Third-party integrations with Zapier & API

Raisely is not a fully-featured CMS like Drupal or Falcon and eventually a growing charity organisation may hit platform limits. In this case, third-party integrations can help close some gaps in functionality. With APIs, you can integrate Raisely into your existing website, CRM, email marketing platform, etc.

Pros:

• Zapier integration for simple use cases (no coding required)
• Feature-rich & well-documented developer API that allows almost unlimited development flexibility

Cons:

• Developer oversight & support are required to ensure the long-term success of the integration.
• Data & business logic are spread across multiple systems that should be maintained.

Automation with CLI tool

It is important to be able to customise the platform, but it is equally important to be able to extend and support it in the long run. Raisely CLI can be a good starting point for setting up your development processes.

Pros:

• Code for styles and custom components can be tracked in git and deployed using CI tools like CircleCI or GitHub Actions
• SCSS styles can be broken down into multiple files
• Easy to re-use styles and components across multiple campaigns
• In “watching” mode any changes to the code are immediately available in the Raisely campaign

Cons:

• It’s not possible to store the entire campaign configuration in code. Most things are only editable in the admin UI.
• No examples of integrations with popular CI tools, you’ll need to figure it out yourself.
• Raisely CLI auth doesn’t work with two-factor authentication (I had a fun time with this issue!)

Summary

In this article, we reviewed different approaches to Raisely campaigns customisation, from basic CSS to advanced API integrations. In combination they allow us to launch successful  fundraising campaigns easily and efficiently. 

As verified Raisely partners, SystemSeed offers strategy, design & development services for Raisely campaigns of any size. With 10+ years of experience in the charity sector, we have the expertise and knowledge required to build and support successful IT solutions for non-profit organisations. Raisely is one of the trusted platforms in our charity toolkit along with Falcon and Gift Shop. If you have any questions about our services for charities, or would like some help setting up an online fundraising site, please contact us.

Want to learn more about our services for charities and nonprofits? Click here.