In This Article:

    Add a donation button to your Salsa Classic email blast

    In This Article:

      One of the most effective things that you can do when you are raising funds is to give an email recipient a donation button.  They don't have to read a link, then just have to tap/click on the donation  button and they're looking at your donation page.

      This article will show you how to add a donation button to an email.  Or two or three.  You just need an email blast and a donation page.  When we're done, you'll have a working donation button, ready to decorate to match your organization's color scheme. 

      Let's get started!

      What you need

      1. An email blast.  It can have contents already, or it can be empty.
      2. A donation page.  We'll need the donation page's URL.  That appears in the browser's address bar when you're viewing the page.

      Screenshot_at_Jun_15_16-13-44.png

      Let's start by inserting a basic button.  Once the button is in a blast, then we can decorate it to make it attractive so that donors will want to click it.

      I got the basic button from this excellent article by Litmus. Litmus specializes in emails that work everywhere on the web.  This article uses "2. Padding Based Buttons" for the basic button.

      Insert a basic button

      The first step in the process will be to edit an email blast.  It's a good idea to copy one of your existing blasts and use that as the test blast.  If things go wrong, then you can always delete the test blast and copy again.

      Once you've chosen an email blast, use these steps to insert the button.

      Determine where you'd like the button to appear.  Start with something easy, like right after the last paragraph.

      Screenshot_at_Jun_17_09-48-57.png

      Type "Donate button goes here..."  and tap the enter key.  That will help in the next step.

      Screenshot_at_Jun_17_09-55-51.png

      View the HTML version of the blast by clicking the "Source" button.

      Screenshot_at_Jun_17_09-45-42.png

      The HTML version is a lot of text and punctuation that's not easy to read.

      Screenshot_at_Jun_17_09-54-13.png

      Use the browser's search tool to find "Donate button goes here".  You should see something like this.

      Screenshot_at_Jun_17_09-57-35.png

      Insert an empty line after the the line that contains "Donate button goes here".

      Screenshot_at_Jun_17_10-01-19.png

      Copy this text and paste into the newly inserted line.

      <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <tbody>
      <tr>
      <td>
      <table cellspacing="0" cellpadding="0" border="0" align="center">
      <tbody>
      <tr align="center">
      <td style="padding: 12px 18px 12px 18px; border-radius:3px" bgcolor="#ffffff" align="center">
      <a href="https://wfc2.wiredforchange.com/o/8564/p/salsa/donation/common/public/?donate_page_KEY=8937" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #000000; text-decoration: none; display: inline-block;"> Donate!</a></td>
      </tr>
      </tbody>
      </table>
      </td>
      </tr>
      </tbody>
      </table>

      The HTML contents will look something like this.

      Screenshot_at_Jun_17_11-59-33.png

      Save the email blast.  When that's done, you'll see the basic Donate button.

      Screenshot_at_Jun_17_12-00-49.png

      Click the button, and you'll see one of my truly ugly donation pages.

      Carefully remove the line containing "Donate button goes here..."  Save the blast.

      If you're happy with the donation button, or already know what you want to do with it, then you're done.  If, however, you'd like to make the button stand out, then read on!

      Decorate the basic button

      Our goal for the rest of this article is to have a good-sized Donate button with a blue background and and white letters. The button will have rounded corners to make it more attractive in the mail apps that can render rounded borders.

      A more important goal is that the button is attractive in Microsoft Outlook.  Outlook is old and cranky and very highly opinionated about how emails should appear.  Outlook is also the email client of choice for board members and affluent donors.  If we can satisfy Outlook, then the most important target audiences will be satisfied, and there won't be any problems with the other email vendors.

      When we get done, the button will look like this.  (The screenshot is from Outlook,  by the way...)

      Screenshot_at_Jun_17_12-05-11.png

      TL;DR: Use these steps to get the blue button right away.

      If the blue button looks good to you and you'd like to install it and get going, then here are some steps you can use.

      1. Copy this text.
      font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;
      1. Open the link dialog (Scroll up if you need a reminder.)
      2. Click in the Style field.

      Screenshot_at_Jun_17_12-18-03.png

      1. Paste in the copied text.
      2. Click OK.
      3. Save the blast.

      Caution!

      The button will look like this in the editor.

      Screenshot_at_Jun_17_16-50-45.png

      Unfortunately, that is normal.  The Classic HTML editor does not know how display the button accurately.  To confirm, test the email.  The "Donate" text will be white letters.

      Change the size

      (Work in progress)

      Change the background color

      (Work in progress)

      Change the text color

      (Work in progress)

      Change the text size

      (Work in progress)

      Change other attributes

      (Work in progress)

       

       

       

       

       

       

       

      Was this article helpful?
      0 out of 0 found this helpful
      Have more questions? Submit a request

      Comments

      0 comments

      Article is closed for comments.