Embedding 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. In this article, we’ll provide a step-by-step guide on how to embed and install a donation form and donation button.
Embedding 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
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.
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.
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.
If you are happy with the settings now, go ahead and copy the code from the box.
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.
After the page has loaded, click on the ‘ADD STACK’ button.
In this example, we have added a blank stack. You may choose other formats from the list, as shown below.
Now click on the ‘ADD BLOCK’ button within your newly added stack and select ‘text’ from the options.
On the pop-up ‘Add your text’, select the HTML option (<>) and paste the embedding code.
Click ‘Save’ and you are done!
See how your donation form looks on the Rocketspark website.
Publish your website and now you can collect recurring donations for your cause.
Go to the Donorbox dashboard and choose your campaign.
Next, click the ‘<> Embed Codes’ button.
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.
Copy the embedding code from the desired box.
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.
On your page, click on the ‘ADD STACK’ button.
Here we have added a blank stack. You should choose one depending on your need.
Now click on the ‘ADD BLOCK’ button within your newly added stack and select ‘text’ from the options.
On the pop-up ‘Add your text’, select HTML (<>) and paste the embedding code.
Click the ‘Save’ button and wait for the page to load.
Now you can see the Donorbox donate button on your page.
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.
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.
Go to your Donorbox dashboard and choose your campaign.
Next, click the ‘<> Embed Codes’ button.
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.
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.
Once the page has loaded, click on the ‘ADD STACK’ button.
Here we have added a blank stack as an example.
Next, click the ‘ADD BLOCK’ button within your newly added stack and select ‘text’ from the options.
On the pop-up, select the HTML option (<>) and paste the embedding code in there.
Click ‘Save’ and wait for the page to load.
Now you can see the Donorbox donate button on your page.
Upon clicking it, you’ll see the donation form popping up, like the image below.
You’re all set! Publish the page and start receiving donations.
Go to your Donorbox dashboard and choose your campaign.
Next, right-click on ‘Preview Campaign Page’ and copy the link address.
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.
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.
Now click the ‘Add button’.
Drag your newly created page to under ‘Menu pages’.
Now make it online as shown in the below screenshot.
Go to the Preview section of your page and you can see the donation link in your header navigation bar.
Upon clicking it, donors will be taken to the Donorbox-hosted secure campaign page for your nonprofit.
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.
Chirasree Bose is the Content Editor at Donorbox. Apart from editing and writing, what holds her interest the most is reading books. Chirasree loves to explore the world of fiction and has authored some books herself. Connect with her on Facebook, Instagram, LinkedIn, and Twitter.
Subscribe to our e-newsletter to receive the latest blogs, news, and more in your inbox.
Chirasree Bose