Embedding Donations forms into your website

You can now embed your donation forms directly on your website, giving your supporters a seamless donation experience without ever leaving your site. All donation options and frequencies can be accepted from the embedded forms. This means that you can choose from three flexible options – the standard Standalone Page, Embedded Form and Embedded Button/Popup – to match your next giving campaign's needs.

Each experience offers something different, so consider who your donors are, where they're coming from (e.g. referral) and the goals of your campaign when choosing which to employ – or consider experimenting with them in an A/B test over time to see what's most effective.

Option	Description	Best For
Standalone Page	Dedicated donation page with unique URL	Email campaigns, landing pages, social media sharing, QR codes, capital campaigns, microsites
Embedded Form	Full donation form embedded directly in your webpage	Dedicated donation pages on your site, landing pages
Embedded Button/Pop Up	Donation button that opens form in a popup overlay	Any page where you want to add donation capability

Benefits of embedding

In general, though, there a few benefits of offering a form within your existing website:

• Donors stay on your website throughout the process
• Maintains your brand experience and trust
• Integration with your existing content

Getting started

First, a few prerequisites before getting started:

• Active Donations module campaign created with at least one donation type and frequency enabled
• Website with ability to add custom HTML/JavaScript
• Optional PayPal payment method disabled
• reCAPTCHA disabled in the campaign

Where to find

Embedding options existing all Donations module campaigns, and allow all gift modalities, frequencies and tribute options. To access them:

1. Navigate to your Events tab
2. Select the Event donation form you want to embed
3. Launch the Website Builder
4. Under Pages, choose your preferred embedding method:
   • Embedded Form
   • Modal Flow (i.e. Pop Up Overlay)

Embedded Form Implementation

Embedded forms can be added to any page on your external website, and then linked accordingly to “Donate” CTAs on your website, in email blasts or from ad campaigns.

It's basically like taking the form you create in raisin and dropping it into another website.

We recommend creating a dedicated page to accept donations, and then embedding your form there. Because the form can be dropped in as you please, the layout of the dedicated donation page on your website is flexible to the experience you’d like to provide your visitors.

Step-by-Step Setup

Embedding your form is as simple as copy and paste. The donation options, messages, receiptable amounts and more will all be inherited on the form.

• In the Pages panel of Website Builder, go to Donate (under User Flows)
• Hover over the page to show to "Settings" toggle. Click the toggle.
• In the Page Settings fly out, click Embed
• "Copy" the Embed Code

• Add Embed Code to your website
  • Head to your external (non-raisin) website
  • In a mode that allows HTML, paste the copied code snippet where you want the form to appear
  • By default the form will centre into the region it’s placed
• If your raisin campaign is bilingual, repeat these steps from the French version of the Website Builder in raisin.

Customization Options

The embedded form will reflect Donation Options and User Profile Fields established within the campaign. 

After a donation is made, the Success page from the existing flow will be displayed.

Similarly, "Thank You" Messages, Tax Receipt, Package Codes and all other aspects of setup will remain the same as in the campaign.

Design & Styles

For the most part, styles will be inherited from what you have defined in the Design panel of the campaign. This includes:

• Colour options
• Fonts
• Buttons
• Custom CSS

Depending on how and where the form has been embedded it is possible that the target website’s font families and font sizes may affect the form. For this reason, we recommend testing before going live.

In the event styles leak from your main site, you or your team can leverage the following CSS classes to modify key styles (identified below) accordingly:

.donations h3 {
font-family:
font-size: 
font-weight:
}

donations-stepper .mat-mdc-card *:not(.mat-icon) {
font-family:
font-size: 
font-weight:
}

.mat-mdc-button .mat-mdc-button-persistent-ripple {
font-family:
font-size: 
font-weight:
}

Testing Your Embedded Form

Before going public with your form, we recommend testing it out to preview look and feel, and ensure successful transactions. Steps will vary depending on the CMS you’re embedded in, but in general:

• Add the form to a hidden page or staging environment
• Preview it as if you were a site visitor
• Test the complete donation flow using a real credit card
• Verify mobile responsiveness

Embedded Button/Pop Up Overlay Implementation

The Embedded Button + Pop Up Overlay, while embedded on your website, offers a different experience entirely. It will embed a customizable button on your site that, when clicked, launches your donation form as a pop-up with an translucent overlay behind it.. In raisin, we call this the Embedded Modal Flow.

Given that this experience creates a call-to-action button and overlay, it's generally best suited for primary CTAs while a user's already on your site, like a "Donate" button in your navigation, in your hero or perhaps in your website footer.

Step-by-Step Setup

The Embedded Modal pattern will also inherit all donation options, form fields, messages and settings from the campaign you're working in.

Steps are also decided upon by the system, based on what you've enabled in the Campaign.

Because it's an entirely different donor experience, though, overlay content is customizable to you through to the Website Builder before you embed it. Let's go through the steps to customize and implement:

• In the Pages section of your Website Builder, scroll to Embedded Modal Form
• The Modal experience consists of two steps (i.e. pages or panels):
  • Donation
  • Success

They can be modified at any time.

Donation Page

• Start with your Donation page, which is a what that visitors will see throughout their experience. The left-hand panel is for creative and customizable in in the Website Builder, whereas the region-hand region named "System content" will inherit Donation Options (gift matrix, donation upsell) and User Profile Fields already defined in the Campaign. 

• Use the drag-and-drop Content Blocks to populate the region and further customize with inline editing tools. Styles defined in the Design panel, including headers and buttons, will affect the content you add.

• Save changes as you go, or once complete. You can come back to modify any time.

Success Page

The Modal Flow also has a unique Success page. To update:

• Click the plus-sign ("+") next to the Donation page to expand
• Select "Success"
• Like the Donation page, grab blocks from the Content library and customize as needed. The [transaction:code] merge field should always be present for compliance purposes.

Add Embed Code to your website

• In the Embedded Modal Flow section, hover over Donation and click the Settings toggle (looks like gears)
• Of the Embed Options, presented click "Copy" next to Button Link
• Now, head to the CMS of your target website
• In a mode that allows HTML, paste the copied code snippet where the button to launch to pop-up form to appear
• A button reading "Donate Now" will render.
• If your campaign is bilingual, repeat these steps on the French version of your campaign. The button will read "Donnez" by default.

Customization Options

The Embedded Modal Flow will reflect Donation Options and User Profile Fields established within the campaign. Similarly, "Thank You" Messages, Tax Receipt, Package Codes and all other aspects of setup will behave the same as in the rest of the campaign.

Call-to-action (CTA) button

This version of the form renders a "Donate Now" call-to-action (CTA) button that, when clicked, launches the overlay content and form. The CTA text is editable through the button snippet embed code by adding the following into the array and replacing "Your text here" with that you'd like the button to read:

openModalCustomText: "Your text here"

Here's an example of the button snippet update where button reads "Make a donation":

<script>
window.raisin = {
   donationsConfigPath: 'https://raisincdn-si.akaraisin.com/raisin/js',
   subeventCustomPart: 'donationform',
   organizationId: 1,
   overlayEnabled: true,
   openModalCustomText: "Make a donation",
}
</script>
<donations-wrapper></donations-wrapper>

CTA button styles

The button itself can also be re-styled through your website's CSS. You may wish to do this match the appearance of other buttons on your site.

Use the .donations .progress-button class to do so on your website for the static and hover states:

/* Example Embedded Donate Button */

.donations .progress-button {
background:
color:
font-family:
border-radius:
}

.donations .progress-button:hover {
background:
color:
font-family:
border-radius:
}

When styling your button, consider these best practices:

• Visibility: Place buttons in prominent, easily discoverable locations
• Contrast: Ensure buttons stand out from surrounding content
• Brand: Match yours or your website's brand
• Mobile: Test button size and placement on mobile devices

Pop up flow styles 

Styles will be largely inherited from what you have defined in the Design panel of the campaign. This includes:

• Font colours in left-hand panel
• Button colours on the form

System-generated content on the form (right-hand) panel and the related styles are generated by raisin. Of note, is the font-family – which will default to Lato – and the button shadows.

Like the purely Embedded Form, it is also possible for styles to leak from your external website that override either the defaults or what you have set in raisin. If this occurs, below is a detailed stylesheet you can leverage to modify from your website. Copy and paste as needed.

/* -- Content Panel on Left Hand Side -- */

/* Paragraph */
#story_wrapper p {
font-family:
font-size: 
font-weight:
}

/* Headers */
#story_wrapper h1 {
font-family:
font-size: 
font-weight:
}

#story_wrapper h2 {
font-family:
font-size: 
font-weight:
}

#story_wrapper h3 {
font-family:
font-size: 
font-weight:
}

#story_wrapper h4 {
font-family:
font-size: 
font-weight:
}

/* -- System Generated Form Content -- */

/* Font */
donations-stepper .mat-mdc-card *:not(.mat-icon) {
font-family:
}

/* Donation Matrix Button Selected */
#modal #wrapper .donations .donations-step .donations-step-content-container rx-donation-matrix .donation-matrix-button.selected {
box-shadow: inset 0 0 0 2px #209dcb, 0 0 #209dcb;
}

*/ Background overlay colour */
#modal {
background: #00000080;
z-index: 1000;
}

Technical Considerations

Besides the prerequisites identified above, when implementing embedded forms, consider these technical aspects of your website and your donor's experience:

Website Compatibility

• Content Management System (CMS) that allows for external code injection
• Access to Website navigation
• Plugins or themes added to the CMS

Mobile Responsiveness

• Both embedded forms and modal are automatically mobile-responsive

Security and Compliance

Embedded forms load using Javascript (not iframes) and are protected by the same security features that are part of your raisin subscription:

• SSL/TLS requirements
• Cross-browser injection
• PCI Compliance, per raisin Terms

Given that the form will sit outside of raisin, it's important, however, that you consider:

• Data privacy and data privacy laws
• Opt-outs

Loading Performance

• Script loading impact
• Lazy loading options
• Page speed optimization tips