How to embed a PDF directly into a Website
If you would like to embed a PDF directly onto a page of your website (without requiring someone to download it before viewing it) then this guide is for you. Note that these steps are quite technical and you can reach out to us for help if you need it.
Here are the steps:
1. Make sure you have the Google Drive application installed on your computer. Google offers a bunch of space for free (https://www.google.com/drive/)
2. Create a new folder called "Public" in your main Google Drive folder. You may already have that set up. This is where we're going to store PDF files that you want people to be able to see right on your website.
3. Move the PDF's you want to use to this folder.
4. In a browser, go to http://drive.google.com and make sure you're logged in to your Google account.
5. In the web-based Google Drive interface, right click on the "Public" folder and click "Share". Then click the "Advanced" link in the bottom right corner.
6. In the "who has access" area, click "Change" and make sure the "Anyone who has the link can view" option is enabled. This makes anything you put in the public folder actually available to the public (for viewing only) if they have a direct link or if its embedded on your site.
7. In the web-based Google Drive interface, open the Public folder and double click the PDF you wish to embed.
8. Once the PDF file is opened up in your browser, click the 3 dots in the very top right of the page, and then click "Open in new window"
9. Once the file opens in a new window, click the 3 dots again (top right) and choose "Embed item"
10. In the window that pops up, COPY the code and click "OK".
11. Login to your RealtyNinja website (yourwebsite.com/login)
12. Click EDIT MY WEBSITE and navigate to the page you wish to embed the PDF on, and click EDIT THIS PAGE. Then click into the editable region you want to display the PDF on and click the EMBED icon. In the window that shows up, PASTE the embed code you copied earlier, and click "Embed This", then click SAVE THIS PAGE.
13. Once saved, the browser will show the embedded PDF on the page:
Note: If you want to change the size of the embedded PDF, you can play with the HEIGHT and WIDTH values of the embed code. For example:
This would make the width 100% of the area (which is good for responsive designs) and the height "800 pixels":
<iframe src="https://drive.google.com/file/d/0BwQUi6TmyxpzVHplNjVVV1BQR1k/preview" width="100%" height="800"></iframe>
So you may have to play around with the width/height values to get it to look just right. It all depends on what you're showing in the PDF.
--
Note that the Dropbox method is no longer supported.