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
Recent searches
No recent searches
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 comments
Official
Ryan McGrew
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}}&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
ModeratorWes
@Denise - I've posted some code here.
0
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
ModeratorWes
@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
Vlad
"@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.
Is there a new way to accomplish the same functionality now?
1
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.
0
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&embedded=true" frameborder="0"></iframe></p>
the PDF seems to be unavailable for some reason. This is what I see instead in the viewer:
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
ModeratorWes
@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.
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
Bobby Daly
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
Jordan Dayton
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.
You can display PDF's, slide decks, word docs, etc. in this file viewer. Here's what it looks like:
0
Owen
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
Connor Mathena
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
Chaz Spahn
In my opinion, this article should not be marked Answered.
Why is this still so hard after all these years?
0
Nicole Saunders
Hi Chaz -
Thanks for the feedback. We've removed the answered tag from the post.
0
James Haworth
@... 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