Embed your donation or payment form on your website

You can embed a donation or payment form directly on your website using an iframe generated in RaiseNow Hub. This allows supporters to complete a donation or payment without leaving your site.

Overview

With our promotion channel Embeddable donation form, you can embed your donation or payment form directly on your website instead of using the Paylink which opens the donation form on a page hosted by RaiseNow. 

Embed it by using a simple embed code generated by us, and provide a more integrated and customised supporter experience. Embedding the form on your site enables your supporters to contribute without leaving your page, while increasing donor confidence, making the process feel more familiar and trustworthy. 

How to embed the form on your website

In RaiseNow Hub - generate the embed code

1. Create the form: Create a Touchpoint Solution and customise it to your needs
2. Publish the Touchpoint Solution
3. Scroll down to Embed donation form into your website

4. Optional: Configure language and appearance (find the section below for more information)

5. Copy the embed code: We automatically generate an embed code for you. The code will be the same, even if you make changes to your Touchpoint Solution. You only have to embed it once.
    

On your own website - paste the code

1. Log in to your website's Content Management System
2. Open the HTML code of your page where you want the donation form to show
3. Paste the code snippet into the desired section of your page's code.
4. If needed: adjust the width to fit your page layout (the height automatically adapts to your page).
5. Save and Publish: Once the code is in place, save your changes and publish the page.

Your donation form will now appear directly on your website. 

Configure language and appearance (optional)

When you click on Configure in RaiseNow Hub, the Embedding options panel opens with a live preview of your Touchpoint Solution. At the top, you can switch between mobile and desktop preview. On the right-hand side, you can fine-tune how the embedded form looks and behaves:

Show info section

• Toggle Show info section on or off.

This controls whether the info section from your Touchpoint Solution is displayed in the embedded form on your website.

Width

• Default: keeps the original form width (580px).

• Auto: lets the form automatically adapt to the available width on your website.

• Custom: lets you set a fixed width (minimum 352px).

Style

• Frame: shows the form with a simple frame.
• Card: adds a subtle shadow so the form appears as a card on your page.

Choose the style that best fits your website design. As with width, some visual differences may not appear on the mobile version because it is optimised for small screens.

Restrictions with the embeddable form

Please note the following limitations when using the embedded touchpoint solution:

• Apple Pay does not work yet so we have disabled it for you. It will still work on your Touchpoint Solutions.
• If you configured an info section, logo, or organisation name in your Touchpoint Solution, these are hidden by default in the embed. You can choose to show the info section in the configuration modal.
• When embedding, form customisations are limited to adjusting the form's width, adding a border, and choosing to show or hide the info section. All other design and content changes must be made in the Touchpoint Solution editor.
• You can only embed each form once to a single landing page.