Creating a Document link to an Image button

Owned by Debby Gibson
Last updated: Dec 18, 2019
3 min read

This topic discusses why you would want to include a link to a PDF onto a button, and how you can do this.

WHY:

When sending out an email job which includes your monthly newsletter, it is often nice to include a button (which may say anything e.g.: Click to access this months newsletter), which is actually linked to a PDF of your newsletter.

Even though we discuss the above scenario, you will find other uses for this process.

HOW:

Create your Webform Email Template and perform the following:

  1. Create an image file for your button. Your image file must be either a .png, bmp or jpeg file. It must be the correct size before it is uploaded to your Nimbus account. As an example, this sample button above is 175 x 62 pixels.

  2. Edit the Folder properties of the folder where you will store the PDF of your newsletter. If you do not wish your clients to have to login to the Portal, you can set this folder so that it has “Unrestricted Client Access”.

  3. Within the Email tab of your Webform Email template, click the Attach button.

  4. Upload a copy of your image button to the Resources/Images folder. This is a Green business folder.

  5. Next to the newly uploaded button, click the Attach button (on the editor toolbar) again, and upload a copy of your Newsletter pdf. If this is already located in a Green business folder, then attach to the link for the PDF.

  6.  

  7. Now to Link the 2 together: click the HTML tab on the bottom left of the Template dialog (as shown in above screen shot).

  8. Step 1, is to remove the text for the newsletter pdf file and also any spaces that may have been included (these are shown as &nbsp - Note also remove the ; characters). This is highlighted in the dialog below:

  9. Step 2 is to move the code that references the link to the PDF file. This code begins with <a href= and ends with target=”_blank”>. This code must be moved to the beginning of the <img scr= code (this is where the system references the image).

    1.  

  10. You will then end up with code looking similar to the screen shot below:

  11. Your email job will then look like the sample below:

    1.  

  12. You will then be able to add in any other text around this button, and send out your email job.

 

Related articles