--- title: Embedding Donations forms into your website description: Embedded Forms for the Donations module are currently in closed Beta. For more information, please contact your Client Experience Manager directly. You can now embed your donation forms directly on your website. --- [Skip to content](https://knowledgebase.akaraisin.com/en/support/embedding-donations-forms-into-your-website#main-content) [Submit a request ↗](https://knowledgebase.akaraisin.com/en/support/kb-tickets/new?hsLang=en) [![raisin Logo](https://knowledgebase.akaraisin.com/hs-fs/hubfs/logo_raisin.png?height=40&name=logo_raisin.png)](https://raisinsoftware.org/) - [Help Centre](https://knowledgebase.akaraisin.com/en/support) Open main navigation Close main navigation - [Help Centre](https://knowledgebase.akaraisin.com/en/support) - [Submit a request ↗](https://knowledgebase.akaraisin.com/en/support/kb-tickets/new) How can we help out? - There are no suggestions because the search field is empty. 1. [Help Centre](https://knowledgebase.akaraisin.com/en/support?hsLang=en) 2. [Event Setup](https://knowledgebase.akaraisin.com/en/support/event-setup?hsLang=en) 3. [Event Details](https://knowledgebase.akaraisin.com/en/support/event-setup?hsLang=en#event-details) # Embedding Donations forms into your website **Embedded Forms for the Donations module are currently in public Beta. We are monitoring adoption during this time.** 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](https://knowledgebase.akaraisin.com/en/support/embedding-donations-forms-into-your-website#embed) and [Embedded Button/Popup](https://knowledgebase.akaraisin.com/en/support/embedding-donations-forms-into-your-website#modal) – 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](https://knowledgebase.akaraisin.com/support/revenue-management/payment-and-fundraising-information/connecting-your-paypal-account-to-your-event?hsLang=en) payment method disabled - [reCAPTCHA](https://knowledgebase.akaraisin.com/en/support/whats-re-captcha?hsLang=en) disabled in the campaign - Whitelisted URL Some basic HTML knowledge is needed in order to embed forms. ### **Whitelisting your domain(s)** For security purposes, you must authorize, or whitelist, the location where you wish to embed forms. This ensures that a third party cannot impersonate you and accept donations on unaffiliated website. Domain whitelist can be performed by System Administrators in **General Setup**. In your Organization Profile, scroll to "Domain Whitelisting". In the text box, enter the domain, with protocol, and any associated subdomains (including "www.") where the form is going. Wildcard entries are accepted. Multiple entries should be comma separated. For example, if your the website domain where you intend to add the form is amazingcharity.com, it's advisable to minimally enter the following to cover visitors to a www. and non-www. version of your site. `https://amazingcharity.com,https:/www.amazingcharity.com` Domains can be added and modified at anytime. ### **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 ![Animation of selecting Form embed code](https://knowledgebase.akaraisin.com/hs-fs/hubfs/Knowledge%20Base/Embedded%20Forms/ani_web-copyembed.gif?width=670&height=395&name=ani_web-copyembed.gif) - **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. If you do notice something weird happening with styling on your site, first try removing this from the following from the embed code: `` 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](https://knowledgebase.akaraisin.com/en/support/embedding-donations-forms-into-your-website#donation-panel) - [Success](https://knowledgebase.akaraisin.com/en/support/embedding-donations-forms-into-your-website#success-panel) 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.  On mobile, these regions will collapse, with the creative panel above the system content. - 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. HTML is allowed in these regions if you want to take things a step further. Be sure to test anything 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. We've also added a new merge field that populates with the donor's first name for more personalized stewardship. The merge field is `[donor:firstname]`. You can move, copy/paste or add it anywhere on the page.  **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. The Pop Up Flow cannot be used on the following platforms, due to limitations in how they are built: - Wix - Framer #### **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) buttons or links** The pop-up can be launched in one of two ways: 1. Connect to a link on your site 2. A system-generated "Donate Now" CTA button **Link on your site** To associate with a link on your site, add `open-rx-modal` as a class to the link. For example, let's say the main "Donate" call-to-action button on your site looks like this unmodified: ``` Donate now ``` To instruct visitors' browsers to launch the pop-up, modify reference and the class so that the link is: ``` Donate now ``` `` **System-generated 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": ``` ``` **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 Not every CMS behaves the same, so testing form implementation is important before launch. We **cannot guarantee** the form will render perfectly across all CMS platforms or browsers. If you are stuck, though, contact our Support team for assistance. **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 - [Account & General Setup](https://knowledgebase.akaraisin.com/en/support/account-general-setup?hsLang=en#main-content) - [Organization](https://knowledgebase.akaraisin.com/en/support/account-general-setup?hsLang=en#organization) - [Modules](https://knowledgebase.akaraisin.com/en/support/account-general-setup?hsLang=en#modules) - [Payment](https://knowledgebase.akaraisin.com/en/support/account-general-setup?hsLang=en#payment) - [Shared Content](https://knowledgebase.akaraisin.com/en/support/account-general-setup?hsLang=en#shared-content) - [Security Management](https://knowledgebase.akaraisin.com/en/support/account-general-setup?hsLang=en#security-management) - [Invoice](https://knowledgebase.akaraisin.com/en/support/account-general-setup?hsLang=en#invoice) - [Email](https://knowledgebase.akaraisin.com/en/support/account-general-setup?hsLang=en#email) - [Event Setup](https://knowledgebase.akaraisin.com/en/support/event-setup?hsLang=en#main-content) - [Event Details](https://knowledgebase.akaraisin.com/en/support/event-setup?hsLang=en#event-details) - [Go Live](https://knowledgebase.akaraisin.com/en/support/event-setup?hsLang=en#go-live) - [Registration Information](https://knowledgebase.akaraisin.com/en/support/event-setup?hsLang=en#registration-information) - [Sponsorship Items](https://knowledgebase.akaraisin.com/en/support/event-setup?hsLang=en#sponsorship-items) - [Content Management](https://knowledgebase.akaraisin.com/en/support/content-management?hsLang=en#main-content) - [Pages](https://knowledgebase.akaraisin.com/en/support/content-management?hsLang=en#pages) - [Sections and blocks](https://knowledgebase.akaraisin.com/en/support/content-management?hsLang=en#sections-and-blocks) - [Design](https://knowledgebase.akaraisin.com/en/support/content-management?hsLang=en#design) - [User Profile Fields](https://knowledgebase.akaraisin.com/en/support/content-management?hsLang=en#user-profile-fields) - [Edit Content (Legacy)](https://knowledgebase.akaraisin.com/en/support/content-management?hsLang=en#edit-content-legacy) - [Message Templates](https://knowledgebase.akaraisin.com/en/support/message-templates?hsLang=en) - [User Management](https://knowledgebase.akaraisin.com/en/support/user-management?hsLang=en#main-content) - [Surveys](https://knowledgebase.akaraisin.com/en/support/user-management?hsLang=en#surveys) - [Donors](https://knowledgebase.akaraisin.com/en/support/user-management?hsLang=en#donors) - [Participants & Teams](https://knowledgebase.akaraisin.com/en/support/user-management?hsLang=en#participants-teams) - [Tickets & Tables](https://knowledgebase.akaraisin.com/en/support/user-management?hsLang=en#tickets-tables) - [Revenue Management](https://knowledgebase.akaraisin.com/en/support/revenue-management?hsLang=en#main-content) - [Assign Package Codes (Solicitation Codes)](https://knowledgebase.akaraisin.com/en/support/revenue-management?hsLang=en#assign-package-codes-solicitation-codes) - [Offline Pledges](https://knowledgebase.akaraisin.com/en/support/revenue-management?hsLang=en#offline-pledges) - [Payment and fundraising information](https://knowledgebase.akaraisin.com/en/support/revenue-management?hsLang=en#payment-and-fundraising-information) - [Promo Codes](https://knowledgebase.akaraisin.com/en/support/revenue-management?hsLang=en#promo-codes) - [Transactions](https://knowledgebase.akaraisin.com/en/support/revenue-management?hsLang=en#transactions) - [Tax Receipts](https://knowledgebase.akaraisin.com/en/support/tax-receipts?hsLang=en#main-content) - [Manage](https://knowledgebase.akaraisin.com/en/support/tax-receipts?hsLang=en#manage) - [Setup](https://knowledgebase.akaraisin.com/en/support/tax-receipts?hsLang=en#setup) - [Analytics](https://knowledgebase.akaraisin.com/en/support/analytics?hsLang=en) - [Reports](https://knowledgebase.akaraisin.com/en/support/reports?hsLang=en#main-content) - [General Questions](https://knowledgebase.akaraisin.com/en/support/reports?hsLang=en#general-questions) - [General Donation](https://knowledgebase.akaraisin.com/en/support/reports?hsLang=en#general-donation) - [Downloads](https://knowledgebase.akaraisin.com/en/support/reports?hsLang=en#downloads) - [Common Reports](https://knowledgebase.akaraisin.com/en/support/reports?hsLang=en#common-reports) - [Pledge / Multi-Pledge](https://knowledgebase.akaraisin.com/en/support/reports?hsLang=en#pledge-multi-pledge) - [Export Data](https://knowledgebase.akaraisin.com/en/support/export-data?hsLang=en#main-content) - [Flat File](https://knowledgebase.akaraisin.com/en/support/export-data?hsLang=en#flat-file) - [Integrations](https://knowledgebase.akaraisin.com/en/support/integrations?hsLang=en#main-content) - [Google Analytics](https://knowledgebase.akaraisin.com/en/support/integrations?hsLang=en#google-analytics) - [Strava](https://knowledgebase.akaraisin.com/en/support/integrations?hsLang=en#strava) - [360MatchPro by Double the Donation](https://knowledgebase.akaraisin.com/en/support/integrations?hsLang=en#360matchpro-by-double-the-donation) - [Address Complete](https://knowledgebase.akaraisin.com/en/support/integrations?hsLang=en#address-complete) - [MailChimp](https://knowledgebase.akaraisin.com/en/support/integrations?hsLang=en#mailchimp) - [Live streaming](https://knowledgebase.akaraisin.com/en/support/integrations?hsLang=en#live-streaming) - [DonorPerfect](https://knowledgebase.akaraisin.com/en/support/integrations?hsLang=en#donorperfect) - [Customer Support](https://knowledgebase.akaraisin.com/en/support/customer-support?hsLang=en) [![Chill listening crop-3](https://knowledgebase.akaraisin.com/hs-fs/hubfs/logo_raisin.png?width=63&height=24&name=logo_raisin.png "Chill listening crop-3")](http://www.akaraisin.com) The digital fundraising partner to growing non-profits. Copyright © 2026 raisin Software | [Privacy Policy](https://raisinsoftware.org/privacy-policy/) ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://stream.mux.com/kimQs3EADtDlC359SBoH6NMypVk02nD8bdZziFXYmw7Y/capped-1080p.mp4", "dateModified" : "2025-07-15T21:34:06.420Z", "duration" : "PT1M50S", "height" : 1080, "name" : "video_customizeembedform", "thumbnailUrl" : "https://537388.fs1.hubspotusercontent-na1.net/hubfs/537388/Knowledge%20Base/Embedded%20Forms/video_customizeembedform.mp4/medium.jpg", "uploadDate" : "2025-07-15T21:30:02.977Z", "width" : 1732 } ```