Printing/PDF/Emailing Help Center Articles
Plan Types: Regular, Plus, & Enterprise
Time to Install: 10 minutes
This tip and trick will allow your end users to be able to Print, PDF, and email your Help Center articles. I actually had this on my todo list with some custom coding however I found the below solution which will work for my needs. This is a very simple and easy way for your end users to print out your articles. The process is very straight forward however as with other tips and tricks this may not be a good enough solution for everyone's needs. Hopefully a few of you will find it useful.
Step 1 Visit the following site.
- Select Website
- Choose your button (you can use any image or button that you like. More on this below)
- Choose your features
- Copy the Code
Step 2
- From the “Tools Panel” select “Customize Design”
- Select “Edit Theme”
- Select “Articles” and paste the code that you copied from above.
- If you are using one of my themes or the Bootstrap framework, I added a div class to pull the print icon to the right of the page. You can add custom CSS to position the print button anywhere you would like. You could position it by the Title, at the end of the article etc.
That's it. This is a free service with the option to upgrade to remove any ads or the "powered by". For my needs the small ads only displayed when creating a PDF file for me. If you want them removed you can do that here: http://www.printfriendly.com/pro.
Further customization
- Custom Button Images and Text
- Include Copyright in Print & PDF
Enjoy and if you have any questions or comments feel free to leave them below. Special thanks to PrintFriendly.com for providing this service.
-
Excellent article Wes (as always!). Implemented within seconds.
Have you tried adding th PrintFriendly css to the HC css and referencing that file to achieve consistent styling? Does it work?
-
@Colin - I haven't played around with the CSS styling yet so I'm curious on what exactly it does. If you get a chance to try it out let me know.
-
I did not get enough time to actually make it work but I suspect I got a step along the path. I used the application-d9c,,,,,,33.css file that my HC uses (no idea if this GUID changes at all) and whilst I did not see any impact, I could see that this stylesheet was used but the style overwritten by other styles.
If i get a bit more time I will play again to see if I can finish the task off. I am not totally sure that I will achieve all that i want to but I should be able to override H1 and similar heading tags.
-
Great tip, as always! :)
-
Thanks Jessie :-)
-
Great script, but why is the PDF generated without pictures?
-
@Irena - I'm not sure why the images are not showing on the PDF version. They show up correctly on the Printed version. May have to contact the developers of this plugin as it may be a bug.
-
I couldn't get the button to show up either, at all. I tried moving the JS script over to the JS page, but still nothing..
-
@Andrea - The code should go into your Article Page so that it shows up on all articles. What theme are you using and I'll see if I can replicate it.
-
Yeah I tried Wes, it's not working :( I'm on a customized version of the swiftest elk
-
@Irene & Wes, we are experiencing the same issue with the PDF not including images but I think I've narrowed it down to this:
Publicly available articles have no issue generating PDFs with images. However, articles that needs authentication to be viewed (i.e. requires the user to log in to Zendesk) cannot generate PDFs with images.
I tried downloading the Print Friendly JS and uploading it to Zendesk as an Asset. Initially, I thought it worked but it turned out to just be my browser cache toying with me so if anyone has a clever idea on how to solve this, I'd be most grateful.
Thanks.
/Søren
-
Great article. Thanks for the info. Does anyone know where I can find a blank "how to print pdf email" to fill out?
-
Is it possible to remove the URL at the top of the print?
-
@Vegardkolbeinsen - Since this is a third party tool you can read their documentation from here.
-
This might be ok for some customers who have public help centers and don't mind spamming their customers with ads. A better solution would be a print css from Zendesk for the help center that renders articles suitably for printing.
-
@Rory - I have this in my Production environment which is a private Help Center and have never seen any ads so I'm not sure what you are referring to about spamming customers with ads. I've been using this solution for almost a year now with no ads. Can you give some more details on this and where you are seeing ads at. Yes this is a just a great work around solution until Zendesk comes up with a better solution.
-
This could be a useful solution for me.
Unfortunately are the images not placed correctly in the pdf or print.
Some images have right position, others are not placed at original position at all.
Do anyone have some ideas to solve this?
Ex in this article here:
-
This functionality is excellent, but recently we've noticed that all images appear to be floating right for Print and for PDF. We've attempted to select different Image Style options (see: http://www.printfriendly.com/button), but none seem to correct the issue. If you Inspect Element on images, it looks like the following CSS (PrintFriendly's, not Zendesk's) is controlling this:
#pf-content img { float:right; clear:right; border:none; display: inline-block; margin:1em 0 1em 1.5em; }Is this a known issue with PrintFriendly? Thank you!
-
Just a follow up to my last question.We were able to resolve this issue by creating a custom CSS file and entering the file URL to the "Custom css url" field here: http://www.printfriendly.com/button.
-
We have videos embedded on our help centre and we have word content also. Any way to ignore the video and other unrelated information from when we print or create a PDF?
-
Hi everyone I created a script to transfer ZenDesk knowledge base to PDF
-
An alternative is to author the content in a CCMS outside of Zendesk and push the articles into Zendesk. We have partnered with Paligo for just this. They have a direct integration with Zendesk. Paligo is also a completely cloud based solution.
So with Paligo you can create PDF books, reuse content, have multiple versions of articles, keep versions of product versions and other tools professional technical authors use.
Click https://sales.contextengage.com/hc/en-us/articles/115000812229 for more. We give weekly demo webinars. Links from the page.
-
Is there a way to either when you create a pdf or send a file to be printed to a pdf, to append to an existing pdf?
-
@Russur. Please see my comment previously.
We also provide a service to create PDFs from your HC content. If that can help, please write to swiseman@contextengage.com.
-
I still have troubles With images that are floating in the middle of the text.
Pete, you wrote "We were able to resolve this issue by creating a custom CSS file and entering the file URL to the "Custom css url" field here: http://www.printfriendly.com/button."
Can you please explain that further? How do you create a custom CSS file and from where do you get the URL?
Wes, are Zendesk going to develope something about this print issue soon?
So we doesn`t need to use PrintFriendly including Ads?
Customers got ads after they hit the button, but before they print or generate PDF. -
Johannes,
You don't create a custom CSS file, you use your existing Help Center CSS file, then add to it. Here are the steps I used:
- Right-click any page in your Help Center, then click View page source
- Search for <link rel="stylesheet" type="text/css". The CSS file URL should start out with something like this: https://p5.zdassets.com/hc/themes/
- Right-click the CSS file URL, then click Copy link address
- Access printfriendly, then paste the CSS file URL into the Custom CSS field
- Copy the code generated at the bottom of the screen
- Access Help Center > Customize Design > Edit Theme > Article page
- Paste the code directly above the <footer></footer> tags
- Within the pasted code, wrap the <a></a> tags (these are after the <script> tags) in <div align="middle"></div>
- Access Help Center > Customize Design > Edit Theme > CSS
- Add the following CSS after the rules for "body":
#printfriendly img {
float:none;
margin-top: 12px;
margin-right: 12px;
}#pf-content img {
float:none;
clear:right;
border:none;
display: inline-block;
margin:1em 0 1em 1.5em;
} - Click the Save button
- Click the Publish button
Pete
-
Thanks a lot for Your reply Pete.
Your comment actually solved the problem:
" You don't need to create a custom CSS file, you can use the CSS file used by Zendesk in your Help Center.
Right-click any page in your Help Center, click View page source, then search for <link rel="stylesheet" type="text/css". The CSS file URL should start out with something like this: https://p5.zdassets.com/hc/themes/.
Access printfriendly, then enter the full URL of the CSS file into the Custom CSS field. This should generate the code you need to insert into your Article pages to correctly display images in your articles."
Only problem now is missing images in PDF.
-
Johannes,
You're welcome. I actually added to my comments from yesterday. I'm glad you didn't need the additional steps.
Pete
-
Hi, this is really useful, however the downloaded file is not attaching the images. Any idea about this?
Thanks
Agustin
-
Agustin and other Zendesk clients experiencing the problem with PDF's not displaying images,
I just submitted the following issue to PrintFriendly's Support:
"We love the PrintFriendly print/email/PDF functions. however, we and several other Zendesk clients are experiencing a problem. When creating a PDF version of an article, images are not displaying. Alt text is displaying, but not the image itself. Printed version of articles are displaying images just fine. Any ideas? Thanks"
Note: per a PrintFriendly help article titled PDF: Images Not Included: "The Email and PDF features can be affected if the content is not publicly accessible or in a secure network. Typically, the images do not get included in the PDF."
Thanks,
Pete
Please sign in to leave a comment.
45 Comments