All Collections
Files & Media
How to embed a Google Drive Folder
How to embed a Google Drive Folder

You are able to embed a Google Drive folder into your Files & Media folder of your project.

Paxton Willard avatar
Written by Paxton Willard
Updated over a week ago

Have you wanted to share a Google Drive folder with your team or clients, but can't figure out how? Or maybe you want files to open in a new tab to preview. Here is a great option to help with this!

To change the share settings in Google

***Note: The Google drive folder needs to be made shared to anyone with the link, in order to be visible to other users and clients.

To change the share settings of a Google Drive folder, you will first go into the folder you want to share.

Next, select the name of the folder at the top left, to show a drop down. Here you will find the option to "Share."

When you select "Share" it will have a pop up window asking about the access you want to give. Under general access you will select the arrow in the middle to switch the access to "Anyone with the link." Then on the right you can select that they are only a viewer.
โ€‹

Creating the code

Now that the folder is made visible to anyone with the link, you can create the code to have the folder show in your project.

First, you will copy the ID for the Google Drive folder that you wish to embed.

Your folder URL will look something like this:

https://drive.google.com/drive/u/1/folders/1eCqLAKQqRHt49J2ag0LGUcnPMzGHkt2B
โ€‹

The part emphasized in bold is an example of the folder ID. Each folder will have it's own unique ID. If you have multiple folders you want to share, you will need to follow these steps for each folder. For your folder ID, you'll want to copy the characters after "folders/" in the URL to share the specific folder.

Next, you'll create the Embed Code. You'll want to use this template:

<iframe src="https://drive.google.com/embeddedfolderview?id=YOUR_ID#list"width="100%" height="500" frameborder="0"></iframe>

Replace "YOUR_ID" in the template with your folder ID from step 1.

For example, my code would be:

<iframe src="https://drive.google.com/embeddedfolderview?id=1eCqLAKQqRHt49J2ag0LGUcnPMzGH#list"width="100%" height="500" frameborder="0"></iframe>

Embedding into Files & Media

Now that you have the code created, go to the project you wish to share this google drive folder with, and select the "Files & Media" tab.

***Note if you do not see the Files & Media tab, you may need to turn this feature on, or have someone adjust your permissions. You can find out more here.

To embed the folder, click "New Embed"

Enter the name of the Embed file then paste the Embed Code and click "Create."

Once you click "Create," it will take you into the new embed folder and look similar to this.

***Note: If you haven't added any files to the google drive folder itself it may look like a blank screen.

To open a file

In order to open the file in another tab and be able to review this, you will need to click on the file name (Title) itself.

This will open the preview of the file in another tab and you or your clients are able to zoom in and out as needed. The same as if you were previewing the file in Google Drive directly.

If you need any additional support, click the question mark in the upper right-hand corner to chat with a member of our team.

Happy designing!

Did this answer your question?