Tip: How to Create a DONATE NOW Button for Use in CiviMail

Visuals are always a great way to increase traffic to your donation page.  If you are using CiviMail and don't have HTML or CSS skills, you can still create a Donate Now button that automatically brings donors and potential donors to your donation page.

You can also use the following steps to invite people to become a monthly donor, register for an event, join a fundraising team, subscribe to your newsletter....  You see, you can use it for any call to action! 

Buttons for Different Calls to Action

For the purposes of this blog, we'll create a Donate button.

  1. Sign up for an account in Canva, a simple graphic design software that can be free (if you're only using it to create buttons, it will be free). 
  2. Click on Custom Dimensions.  Choose the size of your button (I usually use 1.5 x 0.75 inches).
  3. Go to the Search bar and on the right side click on Text.  
  4. Go to the search bar and type Go (I personally like sample Text Rectangles used with the word Go).  Alternatively, you can type Rectangle on the search bar and choose an image that is more appealing to you.  (Please note that the prices for each element appear on the bottom right side of each image.)
  5. Choose the rectangle you want to use (don't worry if the color or the wording are not what you want - this can be customized later).  
  6. To change the color of the button, click on the background of the rectangle.  This will bring up some editing options.  There's a blue circle (this denotes the color of your rectangle).  Click on that circle (see 1) and then choose the color you want.  You can always click on the + (see 2) to see a color wheel with more colors/tones.  Changing Colors to your Donate Button
  7. To change the word(s) in your button, click on the word Go, and replace with the word DONATE.  You can change the font by clicking on the up/down arrow and choosing the font of your choice.  You can also change the color by clicking on the white circle.   Feel free to play around with the size of your button and make the colors either consistent with your branding or maybe use a totally different color so the button stands out. Changing font for your Donate Button
  8. You have finished creating your button.  Click Download on the upper right corner, as an image.
  9. Now go to CiviMail.  Create the message for your email.  Position your button so it's above the fold.
  10. Click on Image Inserting an Image in CiviMail
  11. Click on Browse Server.  This will bring you to the Upload Section.   Choose a directory where your file will reside - this cannot be behind a firewall. Uploading images to CiviCRM
  12. Click on Upload.
  13. Choose File (if you didn't move the image after you downloaded it from Canva, then it's probably in your Downloads folder)
  14. Select the image you downloaded from Canva.  Double click.
  15. Click Upload.
  16. Your file was placed on the right side box under File Name.  These are all the images that can be inserted in your emails or used in your website.  Double click on your image file.
  17. This brings you to the Image Properties Dialog box.  In the Image Info tab, please make sure you add the domain for your website under URL.  For example, our domain is http://backofficethinking.com, so that's what I inserted at the beginning of the box. CiviMail: When adding images, make your URL absolute.
  18. Move over to the Link tab, and paste the URL for your donation page.  Click OK.

Now when you send an appeal for your donation, people can click on the Donate button and then be sent directly to the donation page, right from your email!

Hope this is helpful.

Contact Linda with any questions.

Related Blog Posts



Technologies for Nonprofits