Embedding Files To Your Site Using Google Docs Viewer

Using Google Docs Viewer you can embed files into your Squarespace site that would otherwise not be directly viewable using just a web browser. Files you may want to embed include formats like Adobe PDF's, Microsoft Office documents or even graphic formats such as Adobe Illustrator or Photoshop files. 

Before embedding files to your site you will want to review Google's list of supported file types to ensure your file is compatible with the Google Docs Viewer application. 

Step 1 - Upload Your File 

Navigate to the Data & Media > File Storage area of your site to upload the file you wish to embed. You can reference this guide for steps on uploading files to your site File Storage should you need. 

Once your file has been uploaded, click the URL link next to the file to copy the direct URL path from your site file storage.   

Alternatively, you can click the hyperlinked Title name of the file in file storage; this will automatically open it on a browser and you can copy the direct URL path from there. 

Step 2 - Get Code 

Visit the Google Docs Viewer tool and paste the URL path for your file into the document URL field there. You will then need to click the Generate Link button to get your embed code. 

Google Docs Viewer will present three code options you can choose from. Of these, you will want to select the third option of using an embedded viewer and copy the iFrame HTML code they provide. 

Step 3 - Embed Code

Once you've copied the HTML iFrame code from the Google Docs Viewer tool, you can add this into any page, post or HTML widget within your site.

Click the cog icon and paste your code in the Edit Script screen that appears.  

You'll notice that Google Docs Viewer code also includes height and width attributes automatically as part of the code they provide. You can change the pixel amounts for the height and width in your code to customize the display size of your embedded file if you choose to do so. 

After adding your code, be sure to click Save & Close for both the Edit Script screen and the content editor to save your changes.  

Your embedded file will now display in your site with Google Doc viewing tools so that visitors can see it directly on the browser as in the example shown in the screenshot below. 

Note: Squarespace does not provide support or troubleshooting for third party applications. For more information about using Google Docs Viewer and related tools, please see: Google Docs Support.

Was this article helpful?
0 out of 3 found this helpful
Embedding Files To Your Site Using Google Docs Viewer