{"id":873,"date":"2020-11-10T17:17:46","date_gmt":"2020-11-11T01:17:46","guid":{"rendered":"http:\/\/donorbox.org\/nonprofit-blog\/?p=873"},"modified":"2026-06-19T13:44:05","modified_gmt":"2026-06-19T20:44:05","slug":"donate-now-button-for-nonprofits","status":"publish","type":"post","link":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits","title":{"rendered":"How To Add A Donate Button To Your Website [Step-By-Step Guide]"},"content":{"rendered":"<p>It&#8217;s simple: your nonprofit needs donations to keep doing your mission-driven work.<\/p>\n<p>With this in mind, it makes sense to invest time and thought into your nonprofit&#8217;s website, <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/create-a-donation-page\" target=\"_blank\" rel=\"noopener\">donation page<\/a>, and donate button. Your donate button is the main call to action on your website \u2013 and it&#8217;s important to make it stand out. A well-designed donate button on your nonprofit website drives online fundraising, achieving nonprofit goals.<\/p>\n<p>Optimizing your donate button, your website, your landing pages, and your <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/donation-page-best-practices\" target=\"_blank\" rel=\"noopener\">donation page<\/a> will lead to an increase in online donations. In essence, your donate button should act as an invitation for your website visitors to support your nonprofit.<\/p>\n<p>In this article, we\u2019ll cover the best practices for a donate button, tips to make your button better, and steps to add one to your website. Plus, we have three great examples of successful donation buttons and some FAQs.<\/p>\n<hr \/>\n<h2><a id=\"post-873-_4xw35ce22d3g\"><\/a><strong>What is a Donate Button?<\/strong><\/h2>\n<p>A donate button &#8211; also known as a donation button &#8211; is simply a button on a nonprofit\u2019s website or on any other online <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/fundraising-sites-for-nonprofits-and-individuals\" target=\"_blank\" rel=\"noopener\">fundraising platform<\/a> that leads donors to a donation page or pop-up donation form. This allows them to quickly and easily make a contribution to the organization. Donate buttons on a giving platform enhance donor engagement and help secure donations.<\/p>\n<p>Donate buttons can be used on a nonprofit\u2019s website as well as on platforms such as YouTube, <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/twitch-donate-button-online-donations\" target=\"_blank\" rel=\"noopener\">Twitch<\/a>, and Facebook. Adding donate buttons to these platforms is a great way to encourage giving from people who are already engaged with your content and who may feel more compelled to donate as a result.<\/p>\n<p><a href=\"https:\/\/donorbox.org\/\" target=\"_blank\" rel=\"noopener\"><strong>Donorbox<\/strong><\/a> makes it easy for nonprofits to add a donate button to their websites. You can simply copy and paste the code into your website editor to start using the button.<\/p>\n<p>You can access two embeddable donate buttons, including &#8211;<\/p>\n<ul>\n<li><strong>A donate button linked to your secure donation page.<\/strong> When the donor clicks on the donate button, they will be taken to your donation page hosted on Donorbox.<\/li>\n<li><strong>A donate button for a pop-up donation form.<\/strong> With this, a click on the donate button will make your donation form pop up on the same webpage your support is currently visiting.<\/li>\n<\/ul>\n<p>With the secure donation page, you don&#8217;t need to install any additional SSL on your website. However, if you want to use a pop-up modal form, make sure that your website is SSL-secured.<\/p>\n<p>Here&#8217;s an example of what a pop-up donation form looks like using Donorbox.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-68734\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/pop-up-donation-form-1-958x1024.png\" alt=\"\" width=\"434\" height=\"464\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/pop-up-donation-form-1-958x1024.png 958w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/pop-up-donation-form-1-281x300.png 281w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/pop-up-donation-form-1-768x821.png 768w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/pop-up-donation-form-1.png 1242w\" sizes=\"auto, (max-width: 434px) 100vw, 434px\" \/><\/p>\n<p style=\"text-align: center;\"><a class=\"maxbutton-1 maxbutton maxbutton-get-started-with-donorbox\" target=\"_blank\" title=\"Sign up\" rel=\"noopener\" href=\"https:\/\/donorbox.org\/orgs\/new?utm_source=Blog_Button&amp;utm_medium=Button&amp;utm_campaign=Button_Signup\"><span class='mb-text'>Add a Donate Button Today<\/span><\/a><\/p>\n<hr \/>\n<h2>Make Your Donate Button Stick to Raise More<\/h2>\n<p>A donate button that stays in the same place as your website visitors browse is a constant and effective reminder to give \u2013 and it can pay off big time. Organizations that choose to use a <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/sticky-donate-button\" target=\"_blank\" rel=\"noopener\">Sticky Donate Button<\/a> <span style=\"font-weight: 400;\">can bring in up to 50% more donations. Sticky <\/span>donate buttons improve conversion rates.<\/p>\n<p>Donorbox&#8217;s Sticky Donate Button is easy to add to your website and it has a subtle animation to draw your donors&#8217; eyes right to it. We&#8217;ll show you how to create one for either your donation page or your pop-up donation form in the steps below!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-74760\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Sticky-Donate-Button.png\" alt=\"Screenshot of the Sticky Donate Button. \" width=\"318\" height=\"258\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Sticky-Donate-Button.png 533w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Sticky-Donate-Button-300x244.png 300w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/p>\n<p>See it in action in <a href=\"https:\/\/youtube.com\/shorts\/C7YfTbLkZzY?feature=shared\" target=\"_blank\" rel=\"noopener\">this short video<\/a>!<\/p>\n<hr \/>\n<h2><a id=\"post-873-_884e9a6kdhhi\"><\/a>Getting Started &#8211; Set Up Your Donation Form<\/h2>\n<p>Before we start with the steps to install a donate button on your website, you must make sure your donation form is set up.<\/p>\n<p>Keep in mind that your donation form should be as simple and well-designed as your donate button. The donor experience lasts from the very beginning of the donation process to the end! Create your donation form with fundraising software like Donorbox that supports recurring donations and donor management.<\/p>\n<p>The good news is it only takes about fifteen minutes to create your donation form and embed it in your website. Follow the<a href=\"https:\/\/donorbox.org\/nonprofit-blog\/get-started-with-donorbox\" target=\"_blank\" rel=\"noopener\"> simple steps<\/a> outlined below to start using the Donorbox donate buttons &#8211;<\/p>\n<ol>\n<li>Sign up for a free <a href=\"https:\/\/donorbox.org\/orgs\/new\" target=\"_blank\" rel=\"noopener\">Donorbox<\/a> account.<\/li>\n<li>Create a donation form. Customize your form with recurring donation intervals, questions for your donors, donation levels and descriptions, and more! Plus, choose colors that match your branding.<\/li>\n<li>Connect your payment processor &#8211; Stripe or PayPal &#8211; to receive donations.<\/li>\n<\/ol>\n<p>That&#8217;s it! You can now copy the code of the donate button you need and add it to your website to start using it.<\/p>\n<p>Watch our video tutorial to sign up easily on Donorbox and start fundraising in four simple steps &#8211;<\/p>\n<p><iframe title=\"Start Nonprofit Fundraising in Just 4 Steps\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/t8ANLui75YM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<hr \/>\n<h2><a id=\"post-873-_oy00fpjzndb1\"><\/a><strong>How to Add a Donate Button to Your Nonprofit\u2019s Website<\/strong><\/h2>\n<hr \/>\n<h3><a id=\"post-873-_s3lni79v8ks2\"><\/a><strong>Type 1: How to add a donate button that redirects to the donation page<\/strong><\/h3>\n<p>This donate button will send donors to your donation page hosted on Donorbox. From there, they can complete their secure donation.<\/p>\n<h3><a id=\"post-873-_j6orm9g51ehi\"><\/a><strong>Step 1<\/strong><\/h3>\n<p>Go to your <a href=\"https:\/\/donorbox.org\/org_admin\/forms\" target=\"_blank\" rel=\"noopener\">Donorbox Campaigns page<\/a> and find the campaign that you want to embed. Click &#8220;Go to Launchpad&#8221;. From here, you can access the donate button code via Donorbox to enable website integration for fundraising campaigns.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-76149 aligncenter\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Campaign-launchpad-1.png\" alt=\"Screenshot shows where to locate the Go to Launchpad option from the Campaigns page. \" width=\"574\" height=\"282\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Campaign-launchpad-1.png 574w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Campaign-launchpad-1-300x147.png 300w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/p>\n<p>From the Launchpad, click the &#8220;Donate Button&#8221; tab.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-76157 aligncenter\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button-tab.png\" alt=\"Screenshot of the donate button tab on the Donorbox Campaign Launchpad. \" width=\"928\" height=\"546\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button-tab.png 2470w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button-tab-300x176.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button-tab-1024x602.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button-tab-768x451.png 768w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button-tab-1536x903.png 1536w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button-tab-2048x1204.png 2048w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/p>\n<hr \/>\n<h3><a id=\"post-873-_hamicxwusng3\"><\/a><strong>Step 2<\/strong><\/h3>\n<p>On the left side of this page, you can customize the look and settings of the donate button that will link your donors to your donation page. Customize your donate button with customizable button options.<\/p>\n<p>You can set the default recurring donation interval, choose the pre-filled default donation amount, change the size\/color of your button,\u00a0 and add custom text. You can also choose to hide the logo if you want a simpler button.<\/p>\n<p>You\u2019ll notice the code in the CSS Button box change as you set your preferences.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-76139 aligncenter\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Button-customization.png\" alt=\"Screenshot showing the pop-up form customization options.\" width=\"340\" height=\"477\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Button-customization.png 846w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Button-customization-214x300.png 214w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Button-customization-730x1024.png 730w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Button-customization-768x1077.png 768w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/p>\n<p>You can also turn your button into a <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/sticky-donate-button\" target=\"_blank\" rel=\"noopener\"><strong>Sticky Donate Button <\/strong><\/a>that anchors to the side of the screen and stays in the same place as your website visitors browse.\u00a0 Simply toggle this option on and choose which side of the screen you&#8217;d like your button to anchor to. You&#8217;ll get to see a preview of your button right from the launchpad.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-76165 aligncenter\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Sticky-Donate-Button-Toggle-1.png\" alt=\"Screenshot showing how to turn your donation page donate button into a Sticky Donate Button. \" width=\"738\" height=\"529\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Sticky-Donate-Button-Toggle-1.png 1012w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Sticky-Donate-Button-Toggle-1-300x215.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Sticky-Donate-Button-Toggle-1-768x550.png 768w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><\/p>\n<p>When your button looks how you want it, simply copy the code. <strong>Note that you must paste the code for your Sticky Donate Button into the header of your website in order for it to appear on every page. <\/strong>Constant access to your donate button will bring in more donations!<\/p>\n<p><strong> Note: <\/strong>You\u2019ll also find the copy for <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/png-donate-buttons\" target=\"_blank\" rel=\"noopener\">PNG donate buttons<\/a> on this page. These buttons can be used in email campaigns and other places where you can\u2019t use the CSS code.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_vcpkjyjq6tmv\"><\/a><strong>Step 3<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Head over to your website editor. Find or create the page on which you wish to add your <\/span><b>donate button<\/b><span style=\"font-weight: 400;\">. Embedding the <\/span><b>donate button<\/b><span style=\"font-weight: 400;\"> code will allow your supporters to donate right from your website, enhancing the <b>donor experience<\/b>.<\/span><\/p>\n<p>Access the code or text editor for the page and paste your donate button embed code into the appropriate box. If you&#8217;re installing a Sticky Donate Button, remember to paste the code into your website&#8217;s header so your button will appear on every page.<\/p>\n<p><strong>Note:<\/strong> Donorbox donation forms and donate buttons can be easily embedded on various website builders such as<a href=\"https:\/\/donorbox.org\/nonprofit-blog\/wix-donation-button\" target=\"_blank\" rel=\"noopener\"> Wix<\/a>,<a href=\"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits\" target=\"_blank\" rel=\"noopener\"> WordPress<\/a>,<a href=\"https:\/\/donorbox.org\/nonprofit-blog\/squarespace-donations\" target=\"_blank\" rel=\"noopener\"> Squarespace<\/a>, and<a href=\"https:\/\/donorbox.org\/nonprofit-blog\/weebly-donate-button\" target=\"_blank\" rel=\"noopener\"> Weebly.<\/a><\/p>\n<hr \/>\n<h3><a id=\"post-873-_g0uuum56rlpg\"><\/a><strong>Step 4<\/strong><\/h3>\n<p>Publish the page, and you&#8217;re all set!<\/p>\n<p><strong>Note:<\/strong> If you make any changes to your button from the Launchpad, you will need to re-copy and paste the new code to make the updates on your website.<\/p>\n<p>Clicking on the donate button will take you to your secure donation page. A donate button featured on your website\u2019s donation page boosts supporter trust due to its branded design that aligns with your organization.<\/p>\n<p style=\"text-align: center;\"><a class=\"maxbutton-1 maxbutton maxbutton-get-started-with-donorbox\" target=\"_blank\" title=\"Sign up\" rel=\"noopener\" href=\"http:\/\/donorbox.org\/orgs\/new\/\"><span class='mb-text'>Build Your Donate Button<\/span><\/a><\/p>\n<hr \/>\n<h3><a id=\"post-873-_zepb8pvxhovu\"><\/a><strong>Type 2: How to add the donate button for a pop-up donation form<\/strong><\/h3>\n<p>In addition to the secure donation page, Donorbox offers the pop-up form as another option for the donation button integration.<\/p>\n<p>This means that instead of redirecting your donors to a separate donation page, a donation form pops up on the same screen when someone presses your donate button. This is a more dynamic option that keeps them on the page they\u2019re browsing \u2013 instead of taking them to a different website.<\/p>\n<p>Check out this blog on how to <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/popup-donation\" target=\"_blank\" rel=\"noopener\">add a pop-up donation page<\/a> to your website for more info.<\/p>\n<p><strong>Note:<\/strong> You will need to install SSL on your website in order to use our pop-up modal form, in order to ensure the security of your donors.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_ia0axl9a03r8\"><\/a>Step 1<\/h3>\n<p>Go to your Campaign Launchpad, as outlined in Step 1 above. From the Launchpad, click \u201cPop-up Donation Form.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-74644\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Pop-Up-Form-Campaign-Launchpad.png\" alt=\"Screenshot showing where to locate the pop-up donation form tab of the campaign launchpad. \" width=\"901\" height=\"466\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Pop-Up-Form-Campaign-Launchpad.png 1439w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Pop-Up-Form-Campaign-Launchpad-300x155.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Pop-Up-Form-Campaign-Launchpad-1024x529.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Pop-Up-Form-Campaign-Launchpad-768x397.png 768w\" sizes=\"auto, (max-width: 901px) 100vw, 901px\" \/><\/p>\n<hr \/>\n<h3><a id=\"post-873-_z6pc0t26lrij\"><\/a>Step 2<\/h3>\n<p><span style=\"font-weight: 400;\">On the left side of this page, you can customize the look and settings of the <\/span><b>donate button<\/b><span style=\"font-weight: 400;\"> that will bring up your pop-up donation form.<\/span>\u00a0Pro and <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/donorbox-premium\" target=\"_blank\" rel=\"noopener\">Premium<\/a> users can also choose to add a content panel to your pop-up donation form. This panel includes images and text from your donation page and creates a more compelling giving experience for your supporters! A customizable button for pop-up forms lets you enhance your call to action, which can also be optimized for specific email campaigns.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-74193\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/09\/Pop-Up-Expanded-Content.png\" alt=\"Screenshot of a Donorbox pop-up donation form with an expanded content panel.\" width=\"419\" height=\"371\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/09\/Pop-Up-Expanded-Content.png 1687w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/09\/Pop-Up-Expanded-Content-300x266.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/09\/Pop-Up-Expanded-Content-1024x907.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/09\/Pop-Up-Expanded-Content-768x680.png 768w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/09\/Pop-Up-Expanded-Content-1536x1360.png 1536w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/p>\n<p>Here, you can set the default recurring donation interval, choose the pre-filled default donation amount, and change the size\/color of your button. You can also choose to hide the logo if you want a simpler button and customize the text for your button to better match your branding. You\u2019ll notice the code in the CSS Button box at the bottom of the screen change as you set your preferences.<\/p>\n<p>You can also turn your button into a <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/sticky-donate-button\" target=\"_blank\" rel=\"noopener\"><strong>Sticky Donate Button <\/strong><\/a>that anchors to the side of the screen and stays in the same place as your website visitors browse. \u00a0It has a subtle animation to draw attention, serving as an impactful reminder to give. Simply toggle this option on and choose which side of the screen you&#8217;d like your button to anchor to. You&#8217;ll get to see a preview of your button right from the launchpad.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-76067 aligncenter\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Sticky-Donate-Button-Update.png\" alt=\"Screenshot shows the pop-up form Sticky Donate Button option on Donorbox.\" width=\"542\" height=\"456\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Sticky-Donate-Button-Update.png 810w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Sticky-Donate-Button-Update-300x252.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Sticky-Donate-Button-Update-768x646.png 768w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/p>\n<p>When your button looks how you want it, simply copy the code. <strong>Note that you must paste the code for your Sticky Donate Button into the header of your website for it to appear on every page. <\/strong>Constant access to your donate button will bring in more donations!<\/p>\n<hr \/>\n<h4>Optional: add a Giving Reminder<\/h4>\n<p>If you wish, you can enable a Giving Reminder to appear on the bottom right screen for anyone who interacts with your pop-up form and navigates away before completing their donation. Here\u2019s how it looks on\u00a0<a href=\"https:\/\/www.savethegarfields.org\/\" target=\"_blank\" rel=\"noopener\">Save the Garfields<\/a>, our feature showcase website: Giving Reminders with donate buttons boost donor retention, encouraging fundraising campaign success.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-76077 aligncenter\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-Example.png\" alt=\"Screenshot showing a website with Giving Reminder enabled in the lower right-hand corner.\" width=\"887\" height=\"406\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-Example.png 2878w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-Example-300x137.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-Example-1024x468.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-Example-768x351.png 768w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-Example-1536x702.png 1536w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-Example-2048x936.png 2048w\" sizes=\"auto, (max-width: 887px) 100vw, 887px\" \/><\/p>\n<p>To enable this, simply click the box next to \u201cEnable Giving Reminder for incomplete donations.\u201d You can see a preview of the feature by clicking the preview Sticky Donate Button, interacting with your form, and navigating away.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-76062 aligncenter\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-UI.png\" alt=\"Screenshot showing the UI for accessing Giving Reminder.\" width=\"753\" height=\"399\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-UI.png 1162w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-UI-300x159.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-UI-1024x543.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2016\/08\/Giving-Reminder-UI-768x407.png 768w\" sizes=\"auto, (max-width: 753px) 100vw, 753px\" \/><\/p>\n<p><strong>Note:<\/strong> If you wish to use your own button or link to embed your pop-up donation form, you will find the information you need to do that on the right side of this page.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_k3u3keo781qk\"><\/a><strong>Step 3<\/strong><\/h3>\n<p>Go to your website editor and find the page where you wish to add your pop-up donation form and go to the code or text editor. Paste your donation button code. Remember, if you&#8217;re installing a Sticky Donate Button you must paste the embed code into the header of your website so your button will appear on every page.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_nbzjorf1s3rf\"><\/a><strong>Step 4<\/strong><\/h3>\n<p>Publish the page, and you&#8217;re all set!<\/p>\n<p><strong>Note:<\/strong> If you make any changes to your button from the Launchpad, you will need to re-copy and paste the new code to make the updates on your website.<\/p>\n<p>Clicking on the donate button will make your secure pop-up donation form appear, like this one:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-67669 aligncenter\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-8.png\" alt=\"Donation button example. \" width=\"850\" height=\"480\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-8.png 951w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-8-300x169.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-8-768x434.png 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/p>\n<p style=\"text-align: center;\"><a class=\"maxbutton-1 maxbutton maxbutton-get-started-with-donorbox\" target=\"_blank\" title=\"Sign up\" rel=\"noopener\" href=\"http:\/\/donorbox.org\/orgs\/new\/\"><span class='mb-text'>Get Started With Donorbox<\/span><\/a><\/p>\n<hr \/>\n<h2><a id=\"post-873-_lfcma5pmn0kd\"><\/a><strong>Best Practices for a Donation Button<\/strong><\/h2>\n<hr \/>\n<h3><a id=\"post-873-_gd8f41m4zrga\"><\/a><strong>1. A Suitable Donation Button Color<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Use colors familiar to your donors, such as those in your logo or other marketing materials<\/span>. Consistent <a href=\"https:\/\/donorbox.org\/nonprofit-blog\/branded-donation-form-design\" target=\"_blank\" rel=\"noopener\">branding<\/a>\u00a0boosts supporter trust and donor engagement.<\/p>\n<p>Also, ensure that your donation button color contrasts with the rest of the site to make it stand out.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_qnqskd3066bf\"><\/a><strong>2. Pre-filled donation amounts<\/strong><\/h3>\n<p>When donors decide to donate, the big question is not \u201cshould I give?\u201d&#8230; it\u2019s \u201c<em>how much<\/em> should I give?\u201d<\/p>\n<p>Pre-filled donation amounts help your donors make that decision and also speed up the process. Choose the right donation amount according to your audience. Pre-filled amounts ensure a more convenient and seamless checkout experience, boosting your conversion rate.<\/p>\n<p>A great way to set suggested donations is to recommend amounts that are slightly higher than your previous average donation. For example, if last year\u2019s average donation was $25, suggest donations of $10, $30, and $50. People who want to donate $25 would be more likely to increase their donation to $30 rather than reduce their donation all the way down to $10.<\/p>\n<p>You can also highlight the default donation amount so that it stands out from the rest. Also, consider giving them an option to donate a custom amount.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_ngn99m1e111j\"><\/a><strong>3. Donation call to action<\/strong><\/h3>\n<p>All successful nonprofit fundraising campaigns have a call to action (CTA). A call to action is exactly what the name sounds like &#8211; words or phrases that drive visitors to take a specific action on your site. Your call to action is when you actually ask somebody to do something \u2013 in this case, donate. A compelling call to action on donate buttons boosts the likelihood of donations, supporting nonprofit fundraising goals.<\/p>\n<p>An effective CTA should be short and concise and must communicate the urgency of the cause to compel your donors to donate. Based on your specific cause, here are some examples of effective CTAs:<\/p>\n<ul>\n<li>Join the fight!<\/li>\n<li>Give to &lt;nonprofit\/cause&gt;<\/li>\n<li>Impact the lives of &lt;blank&gt; today<\/li>\n<li>Make a donation<\/li>\n<li>Take action!<\/li>\n<li>Stop Injustice<\/li>\n<li>Fight now!<\/li>\n<li>Help &lt;blank&gt; in need!<\/li>\n<li>Save the &lt;blank&gt; now!<\/li>\n<li>Support &lt;blank&gt; now!<\/li>\n<li>Transform lives today!<\/li>\n<li>Complete your gift<\/li>\n<li>Advocate for our cause<\/li>\n<li>Make a difference in &lt;year&gt;<\/li>\n<\/ul>\n<hr \/>\n<h2><a id=\"post-873-_16upcb6dv4oi\"><\/a><strong>Quick Tips for a Better Donate Button on Your Website<\/strong><\/h2>\n<ul>\n<li>Your donate button should stand out from the rest of your website immediately.<\/li>\n<li>Keep the call to action short and simple.<\/li>\n<li>Use color. Colorful, high-contrast donate buttons are more eye-catching and perform better.<\/li>\n<li>Include a short, compelling message right above the donate button. This can be helpful in convincing donors who are still on the fence.<\/li>\n<li>Incorporate your\u00a0donate button in everything from your blog to your emails. Donate buttons integrated with social media and email campaigns enhance the donor experience.<\/li>\n<\/ul>\n<hr \/>\n<h2><a id=\"post-873-_2w8i4t6bgp5a\"><\/a><strong>3 Best Nonprofit Donate Button Examples<\/strong><\/h2>\n<hr \/>\n<h3><a id=\"post-873-_ieerfvdk5szf\"><\/a><strong>1. The HALO Trust<\/strong><\/h3>\n<p><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-67677\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-9.png\" alt=\"Donation button for nonprofits - example 1. \" width=\"785\" height=\"509\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-9.png 1219w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-9-300x194.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-9-1024x664.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-9-768x498.png 768w\" sizes=\"auto, (max-width: 785px) 100vw, 785px\" \/><\/strong><\/p>\n<p><a href=\"https:\/\/www.halousa.org\/\" target=\"_blank\" rel=\"nofollow noopener\">The HALO Trust<\/a>\u2019s donate button is one of the best examples for nonprofits.<\/p>\n<p>First, the button is big and placed on the top right corner with a color that contrasts with the rest of the website, which makes it stand out among other elements on the homepage.<\/p>\n<p>Second, the button is sticky and remains right there as the user scrolls down the page.<\/p>\n<p>The button takes users to a secure, branded donation page with compelling images. Prefilled donation amounts and the option to choose a recurring donation make the whole experience easier for donors.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-67765\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button-.png\" alt=\"Donate button on website example 1. \" width=\"525\" height=\"468\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button-.png 895w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button--300x267.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/Donate-button--768x684.png 768w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><\/p>\n<hr \/>\n<h3><a id=\"post-873-_vpov3q6ylmrc\"><\/a><strong>2. CODE for America<\/strong><\/h3>\n<p><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-67741\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-11-1.png\" alt=\"Add a donate button on your website - example 2. \" width=\"623\" height=\"422\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-11-1.png 1209w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-11-1-300x203.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-11-1-1024x693.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-11-1-768x520.png 768w\" sizes=\"auto, (max-width: 623px) 100vw, 623px\" \/><\/strong><\/p>\n<p>We love the way \u2018Donate\u2019 at the top right corner stands out amidst every other important element on the screen. Even though the button isn\u2019t that big, the red color contrasts with the CODE for America website and is sure to grab the eye of donors.<\/p>\n<p>The CTA or message right above the donation form is simple and easy for people to understand their mission.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-67745\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-12-1.png\" alt=\"Call to action donate button example\" width=\"677\" height=\"596\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-12-1.png 913w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-12-1-300x264.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-12-1-768x676.png 768w\" sizes=\"auto, (max-width: 677px) 100vw, 677px\" \/><\/p>\n<p>The donation form is easy to use, gives ample options for making donations with prefilled amounts, and allows monthly and annual recurring donations as well.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_pqkdusnvqazo\"><\/a><strong>3. St John of Jerusalem Eye Hospital Group<\/strong><\/h3>\n<p><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-67749\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-13-1.png\" alt=\"Donation buttons on website - example 3. \" width=\"754\" height=\"352\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-13-1.png 1764w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-13-1-300x140.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-13-1-1024x478.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-13-1-768x358.png 768w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-13-1-1536x717.png 1536w\" sizes=\"auto, (max-width: 754px) 100vw, 754px\" \/><\/strong><\/p>\n<p>St. John of Jerusalem has an excellent donation button. It\u2019s big and placed at the top navigation bar alongside the logo and hospital name. Its high contrast, bright color, and ample white space ensure donors can\u2019t miss it.<\/p>\n<p>The top navigation bar contracts as the user scrolls down, still keeping the focus on the menu options as well as the donate button.<\/p>\n<p>We love the CTA. It\u2019s short, to the point, and creates an impact in the hearts of the users.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-67753\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-mission-1.png\" alt=\"St John of Jerusalem Eye Hospital mission\" width=\"763\" height=\"259\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-mission-1.png 1134w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-mission-1-300x102.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-mission-1-1024x348.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-mission-1-768x261.png 768w\" sizes=\"auto, (max-width: 763px) 100vw, 763px\" \/><\/p>\n<p>The donate button navigates the users to a secure donation page with clear and easy-to-understand options for making single\/recurring donations.<\/p>\n<p>Under each amount, the information as to how it can make a difference is what makes it even better. Donors love to know what their smallest donation can do to change the world.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-67757\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-group-donation-a-1.png\" alt=\"St John of Jerusalem Eye Hospital Group donation amount\" width=\"762\" height=\"438\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-group-donation-a-1.png 1168w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-group-donation-a-1-300x172.png 300w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-group-donation-a-1-1024x588.png 1024w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/st-john-of-jerusalem-eye-hospital-group-donation-a-1-768x441.png 768w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><\/p>\n<p>From this page, each donate button redirects donors to the appropriate donation form.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-67761\" src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-16-1.png\" alt=\"Donation button to donation form on website - example. \" width=\"429\" height=\"624\" srcset=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-16-1.png 429w, https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/word-image-873-16-1-206x300.png 206w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><\/p>\n<hr \/>\n<h2><strong>Frequently Asked Questions (FAQs)<\/strong><\/h2>\n<hr \/>\n<h3><strong>1. Where should I place the donate button?<\/strong><\/h3>\n<p>Studies show that the human eye tends to read websites in an \u201cF\u201d or \u201cZ\u201d pattern. The top left corner is best for logos and the upper right corner is a great location for placing your call to action. The bottom right-hand corner is another good location to place your donate button. Make sure that the donate button is present not only on your website but on every other platform as well. Place donate buttons strategically to maximize conversion rate, supporting fundraising campaigns.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_eac61ckyx6g4\"><\/a><strong>2. What should my donate button say?<\/strong><\/h3>\n<p>Your donate button may simply say \u201cdonate\u201d or \u201cdonate now,\u201d or you can include other messages as well such as \u201cgive,\u201d \u201chelp change lives,\u201d \u201chelp us,\u201d \u201csupport our work,\u201d \u201cclick here to donate,\u201d \u201cgive a gift now,\u201d and other such call-to-actions. Remember to keep the message short and simple. Refer to the section on the best practices for more examples of call-to-action messages. Donate button CTAs should drive donor engagement.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_v3mu2vniwc89\"><\/a><strong>3. Should I pre-fill the amount near the donation button?<\/strong><\/h3>\n<p>Sometimes, donors might be confused as to how much to donate. You can pre-fill the donation amount of your choice near the donation button to eliminate confusion, expedite the checkout process, and encourage your donors to donate more than the minimum.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_sna1qp72cub1\"><\/a><strong>4. What is the ideal size for a donate button?<\/strong><\/h3>\n<p>The more people who see your donate button, the more people will click on it. Hence, bigger buttons do better. Make your donation button big enough so it is impossible to miss.<\/p>\n<hr \/>\n<h3><a id=\"post-873-_jcfc81v0azxa\"><\/a><strong>5. Can I embed Image donation buttons instead of generic ones?<\/strong><\/h3>\n<p>Use PNG image donation buttons to add a donate button to email campaigns, as well as on GitHub pages.<\/p>\n<a href=\"https:\/\/donorbox.org\/orgs\/new?utm_source=Blog&utm_medium=footer-bannerc\" class=\"banner-link\" target=\"_blank\">\n\t  \t\t\t\t\t\t<img src=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2018\/10\/seemless-giving-tools.webp\" alt=\"Bottom banner\" loading=\"lazy\" decoding=\"async\" \/>\n\t\t\t\t\t\t<\/a>","protected":false},"excerpt":{"rendered":"<p>It&#8217;s simple: your nonprofit needs donations to keep doing your mission-driven work. With this in mind, it makes sense to invest time and thought into your nonprofit&#8217;s website, donation page, and donate button. Your donate button is the main call to action on your website \u2013 and it&#8217;s important to make it stand out. A [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":67797,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"full-width-content","footnotes":"","_ppma_block_editor_authors":""},"categories":[35,70,6240],"tags":[],"ppma_author":[6357,6396],"class_list":["post-873","post","type-post","status-publish","format-standard","has-post-thumbnail","category-donorbox-integrations","category-resources","category-squarespace","entry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v28.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Add A Donate Button to Your Fundraising Website<\/title>\n<meta name=\"description\" content=\"Looking to collect donations online? Here&#039;s a simple step-by-step guide on how to add a donate button to your nonprofit website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Add A Donate Button To Your Website [Step-By-Step Guide]\" \/>\n<meta property=\"og:description\" content=\"Looking to collect donations online? Here&#039;s a simple step-by-step guide on how to add a donate button to your nonprofit website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits\" \/>\n<meta property=\"og:site_name\" content=\"Nonprofit Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/donorbox\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/donorbox\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-11T01:17:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-19T20:44:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/How-to-Add-a-Donate-Button-to-Your-Website.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1120\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Chirasree Bose\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ravirajlh\" \/>\n<meta name=\"twitter:site\" content=\"@Donorbox\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Raj\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits\"},\"author\":{\"name\":\"Raj\",\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/#\\\/schema\\\/person\\\/33f08dd4dd363af0909a5a663903e014\"},\"headline\":\"How To Add A Donate Button To Your Website [Step-By-Step Guide]\",\"datePublished\":\"2020-11-11T01:17:46+00:00\",\"dateModified\":\"2026-06-19T20:44:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits\"},\"wordCount\":3063,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/How-to-Add-a-Donate-Button-to-Your-Website.png\",\"articleSection\":[\"Donorbox Integrations\",\"Resources\",\"Squarespace\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits\",\"url\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits\",\"name\":\"How to Add A Donate Button to Your Fundraising Website\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/How-to-Add-a-Donate-Button-to-Your-Website.png\",\"datePublished\":\"2020-11-11T01:17:46+00:00\",\"dateModified\":\"2026-06-19T20:44:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/#\\\/schema\\\/person\\\/33f08dd4dd363af0909a5a663903e014\"},\"description\":\"Looking to collect donations online? Here's a simple step-by-step guide on how to add a donate button to your nonprofit website.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits#primaryimage\",\"url\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/How-to-Add-a-Donate-Button-to-Your-Website.png\",\"contentUrl\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/How-to-Add-a-Donate-Button-to-Your-Website.png\",\"width\":1120,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/donate-now-button-for-nonprofits#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Add A Donate Button To Your Website [Step-By-Step Guide]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/#website\",\"url\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/\",\"name\":\"Nonprofit Blog\",\"description\":\"Nonprofit Tips from the Donorbox team\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/#\\\/schema\\\/person\\\/33f08dd4dd363af0909a5a663903e014\",\"name\":\"Raj\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/cropped-Raviraj-desk-96x96.jpgba116c9c188a8e3fdeef8c62e9aa9185\",\"url\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/cropped-Raviraj-desk-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/cropped-Raviraj-desk-96x96.jpg\",\"caption\":\"Raj\"},\"description\":\"Raj \\\/ Raviraj Hegde - Internal Donorbox growth\\\/sales leader. Expertise: Sales, marketing, growth leadership.\",\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/donorbox\",\"https:\\\/\\\/instagram.com\\\/donorbox\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ravirajlh\\\/\",\"https:\\\/\\\/x.com\\\/ravirajlh\",\"https:\\\/\\\/twitter.com\\\/ravirajlh\"],\"jobTitle\":\"Internal Donorbox growth\\\/sales leader\",\"hasOccupation\":{\"@type\":\"Occupation\",\"name\":\"Sales, marketing, growth leadership\",\"description\":\" Experience of \",\"qualifications\":null},\"affiliation\":{\"@type\":\"Organization\",\"name\":\"Donorbox\"},\"worksFor\":{\"@type\":\"Organization\",\"name\":\"Donorbox posts under Raj byline\"},\"url\":\"https:\\\/\\\/donorbox.org\\\/nonprofit-blog\\\/author\\\/raj\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add A Donate Button to Your Fundraising Website","description":"Looking to collect donations online? Here's a simple step-by-step guide on how to add a donate button to your nonprofit website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits","og_locale":"en_US","og_type":"article","og_title":"How To Add A Donate Button To Your Website [Step-By-Step Guide]","og_description":"Looking to collect donations online? Here's a simple step-by-step guide on how to add a donate button to your nonprofit website.","og_url":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits","og_site_name":"Nonprofit Blog","article_publisher":"https:\/\/www.facebook.com\/donorbox\/","article_author":"https:\/\/www.facebook.com\/donorbox","article_published_time":"2020-11-11T01:17:46+00:00","article_modified_time":"2026-06-19T20:44:05+00:00","og_image":[{"width":1120,"height":630,"url":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/How-to-Add-a-Donate-Button-to-Your-Website.png","type":"image\/png"}],"author":"Chirasree Bose","twitter_card":"summary_large_image","twitter_creator":"@ravirajlh","twitter_site":"@Donorbox","twitter_misc":{"Written by":"Raj","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits#article","isPartOf":{"@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits"},"author":{"name":"Raj","@id":"https:\/\/donorbox.org\/nonprofit-blog\/#\/schema\/person\/33f08dd4dd363af0909a5a663903e014"},"headline":"How To Add A Donate Button To Your Website [Step-By-Step Guide]","datePublished":"2020-11-11T01:17:46+00:00","dateModified":"2026-06-19T20:44:05+00:00","mainEntityOfPage":{"@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits"},"wordCount":3063,"commentCount":1,"image":{"@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits#primaryimage"},"thumbnailUrl":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/How-to-Add-a-Donate-Button-to-Your-Website.png","articleSection":["Donorbox Integrations","Resources","Squarespace"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits#respond"]}]},{"@type":"WebPage","@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits","url":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits","name":"How to Add A Donate Button to Your Fundraising Website","isPartOf":{"@id":"https:\/\/donorbox.org\/nonprofit-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits#primaryimage"},"image":{"@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits#primaryimage"},"thumbnailUrl":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/How-to-Add-a-Donate-Button-to-Your-Website.png","datePublished":"2020-11-11T01:17:46+00:00","dateModified":"2026-06-19T20:44:05+00:00","author":{"@id":"https:\/\/donorbox.org\/nonprofit-blog\/#\/schema\/person\/33f08dd4dd363af0909a5a663903e014"},"description":"Looking to collect donations online? Here's a simple step-by-step guide on how to add a donate button to your nonprofit website.","breadcrumb":{"@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits#primaryimage","url":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/How-to-Add-a-Donate-Button-to-Your-Website.png","contentUrl":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2020\/11\/How-to-Add-a-Donate-Button-to-Your-Website.png","width":1120,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/donorbox.org\/nonprofit-blog\/donate-now-button-for-nonprofits#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/donorbox.org\/nonprofit-blog"},{"@type":"ListItem","position":2,"name":"How To Add A Donate Button To Your Website [Step-By-Step Guide]"}]},{"@type":"WebSite","@id":"https:\/\/donorbox.org\/nonprofit-blog\/#website","url":"https:\/\/donorbox.org\/nonprofit-blog\/","name":"Nonprofit Blog","description":"Nonprofit Tips from the Donorbox team","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/donorbox.org\/nonprofit-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/donorbox.org\/nonprofit-blog\/#\/schema\/person\/33f08dd4dd363af0909a5a663903e014","name":"Raj","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/02\/cropped-Raviraj-desk-96x96.jpgba116c9c188a8e3fdeef8c62e9aa9185","url":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/02\/cropped-Raviraj-desk-96x96.jpg","contentUrl":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/02\/cropped-Raviraj-desk-96x96.jpg","caption":"Raj"},"description":"Raj \/ Raviraj Hegde - Internal Donorbox growth\/sales leader. Expertise: Sales, marketing, growth leadership.","sameAs":["https:\/\/www.facebook.com\/donorbox","https:\/\/instagram.com\/donorbox","https:\/\/www.linkedin.com\/in\/ravirajlh\/","https:\/\/x.com\/ravirajlh","https:\/\/twitter.com\/ravirajlh"],"jobTitle":"Internal Donorbox growth\/sales leader","hasOccupation":{"@type":"Occupation","name":"Sales, marketing, growth leadership","description":" Experience of ","qualifications":null},"affiliation":{"@type":"Organization","name":"Donorbox"},"worksFor":{"@type":"Organization","name":"Donorbox posts under Raj byline"},"url":"https:\/\/donorbox.org\/nonprofit-blog\/author\/raj"}]}},"authors":[{"term_id":6357,"user_id":9,"is_guest":0,"slug":"raj","display_name":"Raj","avatar_url":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2023\/02\/cropped-Raviraj-desk-96x96.jpg","author_category":"","first_name":"","last_name":"","user_url":"","job_title":"","description":"Raviraj heads the sales and marketing team at Donorbox. His growth-hacking abilities have helped Donorbox boost fundraising efforts for thousands of nonprofit organizations."},{"term_id":6396,"user_id":94,"is_guest":0,"slug":"colin","display_name":"Colin Grist","avatar_url":"https:\/\/donorbox.org\/nonprofit-blog\/wp-content\/uploads\/2025\/08\/Col-2-96x96.png","author_category":"","first_name":"Colin","last_name":"Grist","user_url":"","job_title":"","description":"Colin (Col) Grist is co-founder and Creative Director at Few and Far, a B Corp-certified digital agency dedicated to helping charities make our world a better place. With over 20 years of experience at the highest level as both a designer and developer, Col brings unique expertise to creating websites, platforms, and brands for organizations such as ADHD Foundation, WaterAid, and the NHS. Driven by his own mental health journey, Col now focuses exclusively on creating digital tools, websites, and interactive campaigns that empower charities and purpose-driven organizations to tell their stories and work more effectively."}],"_links":{"self":[{"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/posts\/873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/comments?post=873"}],"version-history":[{"count":0,"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/posts\/873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/media\/67797"}],"wp:attachment":[{"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/media?parent=873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/categories?post=873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/tags?post=873"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/donorbox.org\/nonprofit-blog\/wp-json\/wp\/v2\/ppma_author?post=873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}