• Colin Piper

  • February 04, 2015 09:14

  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?

• Wes Drury

  • February 04, 2015 13:40

  @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.

• Colin Piper

  • February 04, 2015 14:10

  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.

• Jessie Schutz

  • February 04, 2015 18:28

  Zendesk team member

  Great tip, as always! :)

• Wes Drury

  • February 04, 2015 18:32

  Thanks Jessie :-)

• Irena Caranovic

  • February 09, 2015 09:23

  Great script, but why is the PDF generated without pictures? 

  

  

• Wes Drury

  • February 09, 2015 14:23

  @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.

• Andrea Saez

  • May 11, 2015 08:49

  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..

• Wes Drury

  • May 11, 2015 13:00

  @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. 

• Andrea Saez

  • May 11, 2015 13:01

  Yeah I tried Wes, it's not working :( I'm on a customized version of the swiftest elk

• Søren Nødskov Hansen

  • June 02, 2015 10:02
  • Edited

  @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

• Julz Fabs

  • August 24, 2015 08:38

  Great article. Thanks for the info. Does anyone know where I can find a blank "how to print pdf email" to fill out?

• Vegardkolbeinsen

  • September 16, 2015 09:24

  Is it possible to remove the URL at the top of the print?

• Wes Drury

  • September 16, 2015 13:12

  @Vegardkolbeinsen - Since this is a third party tool you can read their documentation from here.

• Rory Kingan

  • September 17, 2015 13:03

  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. 

• Wes Drury

  • September 17, 2015 13:13

  @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. 

• Johannes Lindberg

  • March 14, 2016 20:22

  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:

• Pete LeRoy

  • May 03, 2016 18:37

  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!

• Pete LeRoy

  • May 06, 2016 17:50

  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.

• Ben Everist

  • October 12, 2016 08:33

  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?

• Nessim Btesh

  • October 27, 2016 01:11

  Hi everyone I created a script to transfer ZenDesk knowledge base to PDF 

  https://github.com/nesbtesh/zendesk-to-pdf

• Steve Wiseman

  • February 07, 2017 08:27

  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. 

• Russur

  • February 20, 2017 17:26

  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?

   

• Steve Wiseman

  • February 20, 2017 17:33

  @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. 

• Johannes Lindberg

  • March 22, 2017 10:01

  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.

• Pete LeRoy

  • March 22, 2017 23:22
  • Edited

  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:

  1. Right-click any page in your Help Center, then click View page source
  2. 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/
  3. Right-click the CSS file URL, then click Copy link address  
  4. Access printfriendly, then paste the CSS file URL into the Custom CSS field
  5. Copy the code generated at the bottom of the screen
  6. Access Help Center > Customize Design > Edit Theme > Article page
  7. Paste the code directly above the <footer></footer> tags
  8. Within the pasted code, wrap the <a></a> tags (these are after the <script> tags) in <div align="middle"></div>
  9. Access Help Center > Customize Design > Edit Theme > CSS
  10. 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;
      }

  11. Click the Save button
  12. Click the Publish button 

   Pete

• Johannes Lindberg

  • March 23, 2017 08:14

  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.

• Pete LeRoy

  • March 23, 2017 15:41

  Johannes,

  You're welcome. I actually added to my comments from yesterday. I'm glad you didn't need the additional steps. 

  Pete

• Agustin Collazo

  • May 15, 2017 10:33

  Hi, this is really useful, however the downloaded file is not attaching the images. Any idea about this?

  Thanks

  Agustin

• Pete LeRoy

  • May 30, 2017 20:52
  • Edited

  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.