Submit a request

[Video] Embedding A PDF or File To A Page

[Video] Embedding A PDF or File To A Page

 

Placester offers several different ways to share a PDF or file on the site.  The two most popular options are using either Dropbox or Google Drive.  The most straight forward is creating a download link through Dropbox.  The more advanced option is to embed the document using Google drive.  This is an advanced function and does require some experience with editing iFrames and HTML.  If you would like to pursue the Google option, and are running into difficulty please feel free to reach out to our support team.   

Obtaining a Download Link with Dropbox

Our platform does not currently have a document storage feature, so you'll need to upload your file into DropBox.

Once uploaded, just click the share option to generate a public URL for your PDF document:

You can copy this link and add it to a new or existing page on your site. You can also add the PDF link directly to your menu as a custom URL item.

Embedding the PDF with Google Drive

Google drive offers a Publish option which allows you to easily embed a Google Document within a page on your Placester site. Please note that if you’re trying to embed a PDF rather than a text document with Google Drive, the process is a bit different. You can find these instructions in the next section. When you've included everything you want within your document, go to File > Publish to the web.

Screen_Shot_2017-06-22_at_1.51.52_PM.png

Click on the "Embed" tab, and then copy the iframe code provided. 

Screen_Shot_2017-06-22_at_1.52.28_PM.png

 

Once you have copied the iframe code, you will need to go into the backend of your Placester site and paste this code within the HTML editor of your page or post. You can learn more about embedding HTML here

After pasting the iframe within the HTML editor, you will need to edit the https:// part of the code to http://. For example, if you pasted your code into the HTML editor that looks similar to this:

<iframe src="https://drive.google.com/file/d/0B5KBZdoK6Y5_ajd3bDJLcnViUjQ/preview" width="640" height=“480"></iframe>

you would want to change the code to:

<iframe src="http://drive.google.com/file/d/0B5KBZdoK6Y5_ajd3bDJLcnViUjQ/preview" width="640" height="480"></iframe>

Once you made this change, click on the "Save" button at the bottom of your page or post. 

 

Embedding a PDF with Google Drive

To start, you will want to make sure that your PDF has been uploaded and is publicly accessible in your Google Drive. You can learn more about how to add a PDF to your Google Drive here.   

Once your PDF is in your Google Drive account, you will want to begin by double clicking on the PDF in your Google Drive Dashboard.

In the PDF viewer, you will want to click on the three dots in the top right-hand corner, and then click “Share”.

Screen_Shot_2017-07-20_at_4_24_36_PM.jpg

You will notice that a “Share” box has appeared on the screen. Here, you will want to make sure that the share setting is set to “Anyone With The Link Can View”. Once this is set, click on the “Copy Link” option, and then click “Done”.

Screen_Shot_2017-07-20_at_5_20_16_PM.jpg

Next, you will need to open a new tab or window in your browser. In the URL/Address bar, paste the link and hit enter.

You should be able to pull up your PDF in the new tab so that it’s separate from your Google Drive. Here, you will want to click on the three dot icon again in the top right-hand corner, and click on “Embed Item”.

Screen_Shot_2017-07-20_at_4_25_00_PM.jpg

This will bring up a screen that will provide you with the iframe code that you can use to embed the PDF to a page or post on your site.

Screen_Shot_2017-07-20_at_4_25_21_PM.jpg

Once you have copied the iframe code, you will need to go into the backend of your Placester site and paste this code within the HTML editor of your page or post. You can learn more about embedding HTML here

After pasting the iframe within the HTML editor, you will need to edit the https:// part of the code to http://. For example, if you pasted your code into the HTML editor that looks similar to this:

<iframe src="https://drive.google.com/file/d/0B5KBZdoK6Y5_ajd3bDJLcnViUjQ/preview" width="640" height=“480"></iframe>

you would want to change the code to:

<iframe src="http://drive.google.com/file/d/0B5KBZdoK6Y5_ajd3bDJLcnViUjQ/preview" width="640" height="480"></iframe>

Pro Tip: When looking at the iframe code that Google provides you for your PDF, you will notice a part of the code that states “width=”640” height=”480”>”. This section is located towards the end of the code. To have your PDF fit better on Placester pages and posts, we recommend changing this part of the code to “width=”100%” height=”660”>”

Once you made this change, click on the "Save" button at the bottom of your page or post. 

Embedding an Ebook 

We've seen some users use an outside tool called Flipsnack to embed a flipbook version of a PDF directly into their page content using HTML:

Click here to learn more about embedding HTML on a page.

 

 

Need More Help?

If you have additional questions about adding a PDF to a page on your site, let our support team know at support@placester.com.

Powered by Zendesk