Recent searches


No recent searches

Embed a PDF in Help Center articles



Posted Dec 30, 2015

Having the ability to embed a PDF file into an article would be really beneficial to our clients and myself (the keeper of the knowledge base).


10

35

35 comments

Official

image avatar

Ryan McGrew

Zendesk Product Manager

Hey All,

We are working through improve asset management in our product overall. You've probably recently seen the improvements related to article attachments in the media gallery as well as making them compliant with our data locality requirements. We expect to continue to make improvements in the next 6 to 9 months to enable you to at the very least insert icons in the text of the article where users can open the PDF in a new tab or window. We are then working to move from there to embedding directly into the document. There are currently some security concerns related to remote script execution that can be embedded into a PDF document that we are working through with our security team and causing things to take a little bit longer. 

With all that being said, if you need to embed documents today, I recommend the following code snippet which relies on the Google PDF Viewer. You can insert this code in the source code editor

<iframe style="width: 100%; height: 1000px;" src="https://docs.google.com/gview?url={{article_attachment_url}}&amp;embedded=true" frameborder="0"></iframe>

In this snippet, replace {{article_attachment_url}} with the URL of the PDF you've uploaded to the article as an attachment. You can get this URL by opening the article settings, scrolling to the Attachments section. From there you can right click the attachment link and click "Copy link address" or open the attachment in a new tab and copy the URL from the navigation bar of your browser.

Thanks!

1


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@Denise - I've posted some code here.

0


@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


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@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


 

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


image avatar

Vlad

The Wise One - 2022Community Moderator

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

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

 

0


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?

1


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


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.

0


@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


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


@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


image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

@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


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


 

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


image avatar

Jessie Schutz

Zendesk Customer Care

Hi Theresa!

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

0


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


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


image avatar

Jessie Schutz

Zendesk Customer Care

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


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


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


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


 

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


Where exactly does the code go in the "article_page.hbs"? And does the iframe just to directly into the article? New to editing code so please bear with me.

 

Thanks!

Bobby

0


Here's some code that we use and will hopefully be helpful for others.

Guide Admin Console > Guide Settings (Gear Icon) > Security (section) >>>

Tick option:
❑ Display Unsafe Content ➞ Warning: Enabling this will allow potentially malicious code to be executed when viewing articles.

<details style="margin-left:3px;cursor:pointer">
<summary style="color:#ee4466;cursor:pointer">View/Download PDF supplement</summary>
<br>
<iframe src="http://cdn.zendesk.com/resources/documentation/GettingStartedGuide.pdf" width="100%" height="900px"></iframe>
</details>
<hr>


You can display PDF's, slide decks, word docs, etc. in this file viewer. Here's what it looks like:

 

0


hey @...

awesome code you have there, i appreciate the share (rhyme unintentional)

would it be possible to use the same display for google drive pdfs?

the links do not have the file name extensions and i am unable to get your code to work on my guide without them, i believe

this is similar to the question @... asked 3 years ago

any help would be sincerely appreciated

many thanks

owen

0


Hey @..., I tried your codeblock but I think im missing something here. Does your codeblock automatically use the uploaded attachment and display it or am I supposed to dictate a URL somewhere?

0


In my opinion, this article should not be marked Answered.

  1. The original request was a way to embed a pdf - without having to code - like we could when the pdf was an asset. Various solutions provided here are workarounds.
  2. @... - your code is beautiful but how did you get your pdf on the Zendesk CDN? It doesn't work with pdfs shared from Google drive or OneDrive.
  3. @... - That Google article is about exporting a Google Doc to PDF without creating/sharing a PDF. But we have actual PDFs shared so the code doesn't seem like it would work. Before I can test it though, where are you defining your javascript variables you use for the handlebar entries?

Why is this still so hard after all these years?

0


image avatar

Nicole Saunders

Zendesk Community Manager

Hi Chaz - 

Thanks for the feedback. We've removed the answered tag from the post. 

0


@... I tried your code but it only works if I install the Chrome extension mentioned in the comment (https://chrome.google.com/webstore/detail/pdf-viewer/oemmndcbldboiebfnladdacbdfmadadm?hl=en).

Without it, the browser just downloads the PDF - it doesn't display it on the page.

Do you have any suggestions?

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post