Embed a PDF in Help Center articles

Answered

22 Comments

  • Wes Drury

    @Denise - I've posted some code here.

    1
  • Kim Graf

    @Wes thanks for this code. I cannot get it to work. Can you be a bit more specific about where after the $document.ready (assume in the article JS section of customize design?) to put the code?

    0
  • Wes Drury

    @Kim - Yes so the JS goes in the JS tab right under the $document.ready function.

    Then when you are creating or editing an article you have to use the iframe code and point to your document.

    Also under Help Center Settings ensure "Display unsafe content" is checked.

    0
  • Knowledge Services

     

    Just an FYI, thank for finding this, however, if clients were to access their Zendesk from the iPad, this coding would not allow them to see the entire document. My company has built software based off of the iPad, therefore, most of our clients access the knowledge base from the iPad. So we won't be able to use this coding.

    0
  • Vladan Jovic

    "@Denise - I've posted some code here."

    - this wouldn't work with ZD article attachments, but will work with assets..

     

    0
  • Chaz Spahn

    I know that this is an old article but I am hoping to revive it, rather than create a new discussion. I used to be able to accomplish this easily enough by uploading the PDF into theme assets and then adding embed code into the html.

    This worked beautifully until they stopped allowing PDFs as Assets. 

    Is there a new way to accomplish the same functionality now?

    0
  • Paul Lawrence

    Hi,

    Zendesk is depricating the ability to upload PDF files as assets with the new Help Center templates.

    Has anyone had any success with displaying article PDF attachments in the same article for the new Help Centers?

    0
  • ioannis

    This seems to be working: here

    But it would be nice to have the option to somehow embed a PDF in an article. It is a great pity that such useful functionality is available only using a workaround.

    1
  • Paul Lawrence

    @ioannis

    Thanks!

    It worked fine on the older version of the Help Center with attached PDFs in an article that is viewable (not hidden).

    I need to test in the new version of the Help Center now.

     

    0
  • ioannis

    Hi Paul,

    How did you manage to do that?

    If I do:
    <!--Add this to your article page using the Source editor -->
    <p><iframe style="width: 600px; height: 500px;" src="https://docs.google.com/gview?url=https://XXX.zendesk.com/hc/en-us/article_attachments/209091867/abc.pdf&amp;embedded=true" frameborder="0"></iframe></p>

    the PDF seems to be unavailable for some reason. This is what I see instead in the viewer:

    <!DOCTYPE html>
    <html dir="ltr" lang="en-US">
    <head>
      <meta charset="utf-8">
      <!-- v13845 -->
      <title>Support</title>
    
      <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="lXnnpNxCcbm2UF8C1qfil9iTQmOkTJstadwulkoZ4VW70QPyaVE/ogwRPm69vyLkTzaYM ...

    The article which has the attachment is available for viewing.

    Thanks

     

    0
  • Paul Lawrence

    @ioannis

    Sorry about not being clear on the Help Center version. I updated my previous post and I will post the results on the new help center theme.

    0
  • Wes Drury

    @ioannis - Also make sure under the Guide Settings - Security - You will need to check "Allow Unsafe Content" in order for this solution to work.

    0
  • ioannis

    Hi Wes,

    The solution doesn't seem to work with article attachments when using the direct attachment link as posted in my example above. I have the "Display Unsafe Content" option ticked.

    Cheers

    0
  • Theresa Ilijevich

     

    Hi All - Im looking to upload a PDF as well in an article....specifically an owners manual for customer to access.  Any tips or further enhancement on this subject?

    0
  • Jessie Schutz

    Hi Theresa!

    There hasn't been any functionality change here...have you tried Wes's solution yet?

    0
  • Theresa Ilijevich

    Hi Jessie - thanks so much for replying in.  We did take a look at Wes's solution but to be honest is a bit over our non-IT heads.  We are looking at just attaching the document rather than embedding,  

    0
  • Paul Lawrence

    Hi,

    Sorry about not posting a status update sooner.

    I opened a support ticket to address the issue in the new Help Center format not allowing PDFs to be displayed as the article when the PDF is stored in your Zendesk account as an asset or as an article attachment.

    Zendesk is not going to allow PDFs to be displayed as an article if the PDF is stored in your Zendesk account. PDFs can only be stored as an attachment in an article going forward in the new Help Center format. Zendesk wants PDFs to be stored outside of your Zendesk account like in Google Docs for example if you need to display them.

    I can display PDF files from another website as an article with the code posted at https://gist.github.com/moderatorwes/03a8fd4152f43a981bc12178b9238137 .

    0
  • Jessie Schutz

    Hey Theresa!

    Another option might be to save a duplicate copy of the PDF as an image file and embed that instead. You should be able to make the image into a link, as well, so folks can download the PDF version if they want.

    0
  • Oric

    Hi, 

     

    Wes (or anyone else that can help) explain what should be placed in the iframe code after src, I understand that the url part should of course lead to the PDF but what's the src line for? 

    At the moment when I paste the link in both src and url I get a blank article with some blinking of a black line...

    Thanks in advance

    Ori

    <iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

    0
  • Chaz Spahn

    I am not an expert but the trick for me was HOW I shared the google doc. My iframe line looks like the following and it works perfectly.

    <p><iframe src="https://drive.google.com/file/d/168c-bglQMZ5ajOSD7F9AF7E3e0IyT0xS/preview" width="100%" height="600"></iframe></p>
    0
  • Oric

    Thanks Chaz, I tried your iframe, but I'm still getting a blank page for some reason, I made this PDF public in the permissions. ( see below) BTW, can you share the JS you used? is it the same as in posted here in this thread by Wes?

     

    0
  • Brian Kopacz

     

    This is great code.

     

    <iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

    I gather here that I can use the gviewer for pdf's.  We are making a decision on what application to use as a content storage.  We are testing box, but I cannot get the above to work.

    Apps like box have unique URL's that do not end with *.PDF.  That seems to break the code.

    My question is can the above be used when my url is something like:

    https://apps.box.com/v/sn/8gf87sdg987g7d9sg

     

    Thanks,

    Brian

     

     

     

    0

Please sign in to leave a comment.

Powered by Zendesk