Embedding A PDF or File To A Page [Codeless]

Cherry Arn Tomayao Updated by Cherry Arn Tomayao

Welcome to our Placester Hacks series. Placester Hacks are Placester-approved tricks and workarounds that allow you to accomplish some customization that may not seem possible with the current tool sets included in Placester’s products. Keep in mind that these hacks are generally more advanced than standard setup instructions.

Using the Google Docs version of this hack does require some understanding of both HTML and iframes.  If you are running into any issues with this please feel free to reach out to our support team.    

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 straightforward is creating a download link through Dropbox.  The more advanced option is to embed the document using Google drive.   

Our platform does not currently have a document storage feature, so you'll need to upload your file to 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 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 can paste this code within the HTML editor of your page or post it within the backend of your Placester site. You can learn more about embedding HTML here. 

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”>”

 

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?

For questions, concerns or feedback, please chat with our team:https://app.placester.com/chat

How did we do?

Placester Live Chat Feature

Adding Google Tag Manager (Codeless)
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support