Embedding Documents or Files Within the Help Center Article

Overview

If you want to be able to view files or documents in Help Center articles without the need to download them, you can embed and display an attachment inside an article. This is done with the help of HTML iFrames and Google docs viewer.

 

Diagnosis

When creating articles in your Help Center, you can attach files to an article which allows the users to download the files to view it. However, if you want users to be able to view those files instantly within the article itself without the need to download it, you can achieve that by using an HTML iFrame code along with a Google doc viewer.

The <iframe>tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. (source: W3schools.com)

While the Google Docs Viewer is a web application that can open all of your Internet documents directly from your web browser. With these two elements combined, you can allow your customers to be able to view a document or file within the article itself.

 

Prerequisite

• You need to enable the settings to allow potentially unsafe HTML in Help Center articles before you can embed a document using HTML iFrames in your articles.
• To add or edit articles in Kayako, you will need an administrator or agent account with the 'Create and edit articles' permission.

 

Solution

1. Create or open an existing article in your Help Center.

2. Attach the file or document (in this example we attach a PDF document).

3. Save or update the article

   .
   • NOTE: After saving or updating the article, the URL of the attachment is now visible when you hover over the "View" link on the attachment (see screenshot below):

     

4. Copy this attachment URL.

5. Return to the edit mode of the article and click the Code View button in the toolbar.

   

6. While in the Code View, insert the following code where you would like to position your iFrame (replacing ATTACHMENTURL with the URL of your attachment copied in step 4):

   <iframe src="https://docs.google.com/viewer?url=ATTACHMENTURL&amp;embedded=true"></iframe>

7. Save or update the article.

 

Confirmation

The embedded document will now display in the article (see the example below):

Note: The URL provided does not follow a common folder location for the attachment. This URL is an API call that streams the file and is accessible by anyone on the internet. This is the standard technique used to embed attachments on websites.