Trail Blazer Knowledge Base

 

Home : General : How to Create a Hyperlink around a Screenshot of your PDF Newsletter and Hyperlink it to the PDF Document

Knowledge Base







User:

Password:



Article ID: KB267
Keyword Name: Email, Link, Attachment, Screenshot, Newsletter, PDF, Upload, Attach
Created: April 06, 2016
Viewed: 47749

How to Create a Hyperlink around a Screenshot of your PDF Newsletter and Hyperlink it to the PDF Document






Author: Joel Kristenson

Last Updated: 2015-03-27




Overview


If you don’t want to code a complex email template in html/css for your newsletter (or hire a web developer) you can create your newsletter in Microsoft Word (or a similar program) using some of their powerful formatting tools, save it as a PDF document, and then hyperlink too it from your eblast in Trail Blazer.


This article walks through the steps to take your newsletter that’s first created in Microsoft Word, and save it as a PDF file.  After that it goes through the steps to take a screenshot of the PDF newsletter (minimized), save the screen shot as an image file, and insert the screenshot image into an email template using the new CK editor.  Last but not least it walks through the steps to create a hyperlink around the minimized screenshot, and link it to the PDF newsletter hosted on Trail Blazer’s server.


This is more common for nonprofit organizations, but really anyone who uses their database to send out mass email campaigns can utilize this process, another example is groups who host events can link to the pdf poster of the event without relying on a minimized image.


Creating hyperlinks in your eblasts can help you to effectively track who has clicked on the screenshot image to read your newsletter which is a much better statistic than just tracking who opened the email.




http://www.us-cert.gov/sites/default/files/images/tip-icon.pngTips:

- Click here to learn about taking a screenshot on a PC.

- Click here for a walk through on taking a screenshot with a Macintosh computer.

- Download a useful screen capture tool for Windows called “WinSnap”.




Outline

#1 Compose your Newsletter in Microsoft Word, and Save it as a PDF Document

#2 Upload your Screenshot & PDF Document to your System Gallery

#3 Insert your Screenshot Image into an Email Template and Create a Hyperlink around the Screenshot to the PDF Newsletter

#4 Sending out a Single Test Email to yourself, and Tracking the Analytics (*Optional Steps)

#5 Related Resources and 3rd Party Programs






#1 – Compose your Newsletter in Microsoft Word, and Save it as a PDF Document


The first thing you’ll need to do is create your newsletter using Microsoft Word, and save it as a PDF document.  In my example I used one of Microsoft’s newsletter templates they provide.  It was a fairly large one with a variety of images, and sections.  It’s 4 pages long and the file size is 595 KB or just under .6 MB once it’s been saved as a PDF.


(Below is a screenshot of the finished newsletter pdf file prior to uploading to an email.)



The images below describe the steps to prepare your document for uploading.


Image 1 of 7 – Choose a Microsoft Word template or start with a blank Word document



Image 2 of 7 – Compose your newsletter in Microsoft Word (or a similar program)



Image 3 of 7 – Save-as a PDF file



Image 4 of 7 – Open the PDF newsletter file in a PDF reader e.g. Adobe Reader



Image 5 of 7 – Minimize the zoom (ex: 25%) and take a screenshot around the first page of the PDF newsletter



Image 6 of 7 – Save your screenshot as an image file to your local computer




http://www.us-cert.gov/sites/default/files/images/tip-icon.pngTip: I chose .png since it’s a fairly lightweight file type, and named it “2014-october-newsletter-25-percent-zoom.png” but you could just as well save it as a .jpeg file or another image file type.





Image 7 of 7 – Final screenshot image of my example newsletter


(I included the background shadow from the WinSnap screen capture program, and set the zoom of the to 25%)



These steps basically summarize the prep work needed prior to uploading, inserting, and linking to the PDF document from your email template.


The following instructions walk through the final steps in the process.








#2 - Upload your Screenshot & PDF Document to your System Gallery


*For an in-depth walk through on re-sizing & uploading images for users still using the old email system take a look at this article.  (The process has changed dramatically for those users who’ve upgrade from the old email editor to the new CK editor.)




http://www.us-cert.gov/sites/default/files/images/tip-icon.pngTip: You may choose to upload the PDF (and/or image) file to your own domain with your hosting provider i.e. GoDaddy, Rackspace, WordPress, etc.  This would allow you to store as large of a file as you’d like and still hyperlink to it from with the Trail Blazer email system without actually uploading it to our server.




Follow Application Menu >System Manager > System Gallery



Click on the Documents folder.



Select [Import File]


Make sure that *All Files* is selected from the drop-down menu in the lower-right of the window, select the PDF newsletter file you created previously, and click [Open].



After the document is uploaded you’ll want to right-click it, and select Properties.  (It’s good practice to do this with all of the images, document files that you upload so they’re easily accessible when inserting them into an email.)



Check the box for “Publish on web” and click [Save].



Now you will need to go through basically the same steps to upload your minimized PDF screenshot image, and publish it to the web.


Select the Images folder in the System Gallery and click [Import File].



Locate, and select the screenshot image you created previously, and click [Open].



Right-click on the image file and select Properties.



Check the box for *Publish on web* and click [Save].  (Optionally you could write a brief Note and/or Description.)



After the image is uploaded you can select it to view details, and click the [Image Preview] button to make sure it’s the size you want.



This task is now complete.


The next section covers the final steps to insert the screenshot into a template, and hyperlink it to the pdf newsletter document.








#3 – Insert your Screenshot Image into an Email Template and Create a Hyperlink around the Screenshot to the PDF Newsletter


Open your database and navigate to the Templates list. (If you don’t see this branch under the Application Menu it’s because you don’t have security access and will need to request your database administrators for this).



Search for the template you want to attach your PDF to, and click on the blue link to open it. (If you’re starting from scratch, you will instead click the [+ New] button at the top.


Related Article: Sample HTML Email Template with Inline CSS


In this example I chose to work off of a template in my database called “2014 October E-Newsletter with Screenshot and Link to PDF Document”.



Compose the email and place your cursor in the location where you’d like to insert the screenshot image.  See example below.



Click the button to insert an image.



Make sure the radio button is selected that says ‘Image is located in the system gallery under name:’ and click the [Browse] button to locate the screenshot image you just uploaded into your System Gallery.


(Alternatively, if you’ve uploaded the image(s) to your own hosting provider you could choose the 2nd radio button, and insert the corresponding web address of that image file).



Select the Images folder, click the [Web Published] button, select your screenshot image file, and click [OK].



With the latest enhancements to the email editor you now have the ability to resize your image, and you can wrap text around it.  See image below for my example image preferences.



If you happen to get this error message, select [No] in order to finish inserting the image. (It may actually pop up more than once, so continue to hit the *No* button until your image gets inserted).



Below is an example of how my image looks with the text wrapped around it to the right.  (If you need to make adjustments to the image you can click on it, and click the [Image] button to continue adjusting things like size, margins etc.)



The next steps go through the linking of the screenshot image to the PDF newsletter file.


You’ll first need to navigate to the System Gallery.



Select the Documents folder, right-click on the PDF newsletter document, and then select Get URL…



Click the [Copy URL to Clipboard] button.



Click [Close] from the System Gallery Screen.



To create a hyperlink to your PDF newsletter, click on the screenshot image, and then click the [Link] button.



Right-click in the URL input field and select paste to paste in the URL of the newsletter file.



At this point you can click [OK] and you’re finished, I chose to select the Target tab and choose the option to open the PDF document in a new window.



Below is a screenshot of my final email template, you’ll notice that a thin blue line borders the image after it’s been hyper-linked.  This will disappear once the email has been sent out.



*Continue reading for more info on how to test an email, and track opens, otherwise it’s off to the races for you…








#4 – Sending out a Single Test Email to yourself, and Tracking the Analytics (*Optional Steps)


You can send out test emails if you’re working off of an email campaign, however the steps I demonstrate below show an alternative way to quickly send a single test email without queuing up a mass email campaign.


Navigate to the donors (voters/contacts) list, and search for yourself in the database.



Open your record by clicking any of the underlined blue hyperlinks.



Make sure that you have a valid email address entered in your record card, and that the corresponding flags are set to receive emails.  (Example below).



Click the [Email] button in the bottom right.



Click [Insert Template].



Select the template you created previously with the PDF attachment, and click [Open].


(Tip: If you have a lot of templates created, or the luxury of many users creating templates for your database, you can click the Details box in the lower-right to sort by things like ‘create date’).



Click [Send].



You’ll get a popup message once it’s complete, click [OK].



*Allow yourself a little bit of time for the test email to arrive, depending on the volume of emails moving through our sending server, and what you’re using to receive incoming email, it may take only a few seconds or it could take 10-15+ minutes on a really slow day.


Navigate to the Logs tab > Email Log sub-tab > click [Refresh].



The test email will display after the email log list has been refreshed.



Depending on what email client you open the email in it will either automatically download the images and register as opened, or it’ll force you to download the images manually (usually as a security precaution).


Below are a few images that show the differences between opening the email in Microsoft Outlook vs. on an iDevice as an iPhone, iPad etc.


Image 1 of 4 - Opening the test email in Microsoft Outlook (images will not download automatically)



Image 2 of 4 – Selecting to download images in the Microsoft Outlook email client (this will register the email as opened in Trail Blazer)



Image 3 of 4 - Opening email on an iDevice (images automatically download which registers as an open in Trail Blazer)




Image 4 of 4 - How the email log looks after images have been downloaded on recipients device



You’ll notice that the new editor inserts a light blue border around the image, that’s to let you know the image is hyper-linked.  Once you send out a test email you’ll see that the blue link disappears.


Below are two images that detail this:


Image 1 of 2 – Finished email template with screenshot image, and link to PDF file



Image 2 of 2 – Final view of the test email viewed in Microsoft Outlook



















#5 – Related Resources and 3rd Party Tools

Article: How to Prep and Upload an Image and Insert it Into an Email Template

Article: Images in emails (how do I get them in there?)

Article: Sending Out Test Emails

Article: Configuring your From and Reply Email Address Settings

Article: How Do I Enable A Person To Receive Email Drafts

Article: Email Opens and How Trail Blazer is Managing This Process

Video: Eblasts 101 how do I send an eblast

Video: Eblasts 103 – Part 1 – Managing Images - Uploading

Video: Eblasts 103 – Part 2 – Managing Images - Sizing

3rd Party Resource (Free Program): WinSnap

3rd Party Resource (Free Program): Microsoft Expressions Web4 – html Editor

3rd Party Resource (Free Program): Adobe Acrobat Reader

3rd Party Resource (Program): Microsoft Word

3rd Party Resource (Video): How to Convert Word Document into a PDF Document





Trail Blazer Live Support

http://www.somebodysattic.org/images/phone%20icon_lower%20rez.jpg  Phone:  1-866-909-8700

http://sisyphus-js.herokuapp.com/assets/email_icon-0f32f4da45c2822cbb02fb36f9b9429e.png   Email:  support@trailblz.com

   Facebook: https://www.facebook.com/pages/Trail-Blazer-Software/64872951180

   Twitter: https://twitter.com/trailblazersoft


* As a policy we require that you have taken our intro training class before calling or emailing our live support team.


Click here to view our calendar for upcoming classes and events feel free to sign up other members on your team for the same training.


* After registering you’ll receive a confirmation email with the instructions for how to log into the GoToMeeting session where we host our live interactive trainings.


* This service is included in your contract.



 

Are you ready to learn more? Contact Us