How to Embed Donation Form and Donate Button in Rocketspark

How to Embed Donation Form and Donate Button in Rocketspark

how to add donate button on rocketsparkEmbedding a donation form and donate button on your Rocketspark website can be a breeze with Donorbox. We offer you a fast, optimized, and easy way to attract donors and accept donations on a regular basis.

The Donorbox donation form is recurring and gives your donors the ease of making one-time/monthly/weekly donations to their favorite cause.

You can also install a donate button with our simple copy-paste code on your website. This is especially useful if your site doesn’t support SSL. The button will take your donors to an SSL-secured donation page hosted for free on Donorbox.

In this article, we’ll provide you with a step-by-step guide on how to

  1. Embed a donation form,  
  2. Install a donate button,
  3. Add a popup donation form, and
  4. Add a donation link on the navigation menu of your Rocketspark website.

                                     


How to Embed the Donorbox Donation Form into Your Rocketspark Website


Step 1

On the Donorbox dashboard, open your campaigns and find the one you want to embed into your website.

Click the ‘<> Embed Codes’ button as shown in the image below.

donation form

Note: If you don’t have a Donorbox account, please create a Donorbox account for free. Here’s a step-by-step guide to creating a donation form.


Step 2

If you wish, you can change some of the default settings of your donation form. For example, hiding the goal meter or changing default recurring interval or default prefilled donation amount, etc.

The code highlighted in the below image will change automatically according to your changes.

donation form

If you are happy with the settings now, go ahead and copy the code from the box.


Step 3

Go to your Rocketspark dashboard and click on the hamburger menu on the top left corner.

Select the option ‘Manage Pages’. Then, click on the page you want to customize.

rocketspark donation form

Step 4

After the page has loaded, click on the ‘ADD STACK’ button.

rocketspark donation form

In this example, we have added a blank stack. You may choose other formats from the list, as shown below.

donation form

Step 5

Now click on the ‘ADD BLOCK’ button within your newly added stack and select ‘text’ from the options.

donation form

On the pop-up ‘Add your text’, select the HTML option (<>) and paste the embedding code.

donation form

Step 6

Click ‘Save’ and you are done!

See how your donation form looks on the Rocketspark website.

rocketspark donation form

Publish your website and now you can collect recurring donations for your cause.


How to Install the Donorbox Donate Button on Your Rocketspark Website


Step 1

Go to the Donorbox dashboard and choose your campaign.

Next, click the ‘<> Embed Codes’ button.

donate button

Step 2

Select the ‘Donate Button’ tab and you’ll find CSS button code and PNG button code in 2 different sections. Choose the one you wish to embed.

You can also customize the size and color of the CSS donate button according to your nonprofit brand.

donate button

Copy the embedding code from the desired box.


Step 3

Go to your Rocketspark dashboard and click on the hamburger menu on the top left corner.

Select the ‘Manage Pages’ option. Click on the page you want to customize.

rocketspark donate button

Step 4

On your page, click on the ‘ADD STACK’ button.

how to add donate button on rocketspark

Here we have added a blank stack. You should choose one depending on your need.

donate button

Step 5

Now click on the ‘ADD BLOCK’ button within your newly added stack and select ‘text’ from the options.

rocketspark donate button

On the pop-up ‘Add your text’, select HTML (<>) and paste the embedding code.

rocketspark donate button

Step 6

Click the ‘Save’ button and wait for the page to load.

Now you can see the Donorbox donate button on your page.

donate button

When your donors click this button, they’ll be taken to your Donorbox-hosted campaign page. Here is an example of how it looks like.

rocketspark donate button

Publish the website and you’re done!

With the Donorbox donate button and campaign page, you’re all set to receive recurring donations.

Pro tip: It’s a good practice to add the donate button or a donation link on the header navigation bar. It instantly catches your donors’ attention when they land on your page. Here you’ll find a step-by-step guide on how to add a donation link in the header bar.


How to Add the Donorbox Popup Form to Your Rocketspark Website


Step 1

Go to your Donorbox dashboard and choose your campaign.

Next, click the ‘<> Embed Codes’ button.

rocketspark donation form

Step 2

Select the ‘Popup Form’ tab. Here you can make changes to the popup donation form according to your need.

Once done, copy the embedding code.

donation form

Step 3

Go to your Rocketspark dashboard and click on the hamburger menu on the top left corner.

Select the ‘Manage Pages’ option. Click on the page you want to customize.

popup donation form

Step 4

Once the page has loaded, click on the ‘ADD STACK’ button.

rocketspark donation form

Here we have added a blank stack as an example.

donation form

Step 5

Next, click the ‘ADD BLOCK’ button within your newly added stack and select ‘text’ from the options.

donation form

On the pop-up, select the HTML option (<>) and paste the embedding code in there.

popup donation form

Step 6

Click ‘Save’ and wait for the page to load.

Now you can see the Donorbox donate button on your page.

rocketspark donation form

Upon clicking it, you’ll see the donation form popping up, like the image below.

popup donation form

You’re all set! Publish the page and start receiving donations.


How to Add Donation Link on Your Navigation Menu


Step 1

Go to your Donorbox dashboard and choose your campaign.

Next, right-click on ‘Preview Campaign Page’ and copy the link address.

donation link

Step 2

Go to your Rocketspark dashboard and click on the hamburger menu on the top left corner.

Select the ‘Manage Pages’ option. Next, click on the ‘Add page’ button.

rocketspark donation form

Step 3

Type your page name and select the ‘Goes to a URL’ option from the dropdown.

After that, paste your campaign URL in the ‘Redirect to URL’ box, highlighted in the image below.

donation link

Now click the ‘Add button’.


Step 4

Drag your newly created page to under ‘Menu pages’.

rocketspark donation

Now make it online as shown in the below screenshot.

rocketspark donation

Step 5

Go to the Preview section of your page and you can see the donation link in your header navigation bar.

donate button

Upon clicking it, donors will be taken to the Donorbox-hosted secure campaign page for your nonprofit.


Over to You

Rocketspark offers you a 5-star website building experience. With useful blocks and simple stacks, it is now one of the most preferred website builders for nonprofits.

But you have to make the most of it to create a stunning at the same time effective donation page for your nonprofit. With Donorbox’s tools, features, and resources, it becomes rather simple.

Visit our nonprofit blog to know more.

Join the Nonprofit Movement
Receive our free email updates to get nonprofit tips, resources and freebies sent directly to your inbox.

Join us in serving the nonprofit world!

Take your donor experience to the next level!
Join the 35,000+ nonprofits already raising funds online.
(No setup fee. Unsubscribe anytime)
Join Our Newsletter
Get a monthly curated round-up of our best posts and feature updates. (You can unsubscribe anytime.)
Join Our Newsletter
Get a monthly curated round-up of our best posts and feature updates. (You can unsubscribe anytime.)