---
title: How to Add a Google Drive File Browser to Your Website
description: "Do you want visitors to open your Google Drive folders right on your website, move through the subfolders and preview or download any file? You can easily do this with **DriveHub**. The **File Browser** module works like a small Google…"
url: "https://sovlix.com/docs/how-to-add-a-google-drive-file-browser-to-your-website/"
updated: "2026-10-07"
category: DriveHub / Modules
---

# How to Add a Google Drive File Browser to Your Website

Do you want visitors to open your Google Drive folders right on your website, move through the subfolders and preview or download any file? You can easily do this with **DriveHub**.

The **File Browser** module works like a small Google Drive on your page. It is super useful for client portals, team resources or a shared project area, because you keep the files organised in Google Drive and the page always shows the latest version.

**Note:** This needs DriveHub Pro.

Here is an easy, step-by-step guide to help you set it all up!

## Step 1: Install DriveHub and Connect Google Drive

First, make sure DriveHub and DriveHub Pro are installed and your Google account is connected:

- From your WordPress admin, click on **Plugins** > **Add New**.
- Search for **DriveHub**.
- Click **Install** and then **Activate**.
- Follow the setup screen to add your Google account.

[![Search for DriveHub in Add Plugins, then click Install Now and Activate](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-00-install-drivehub.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-00-install-drivehub.webp)

Read our [step by step setup guide](https://sovlix.com/docs/drivehub-manual-google-drive-connection-setup-guide/) to avoid any confusion. To add the Pro add-on, follow [how to install DriveHub Pro](https://sovlix.com/docs/how-to-install-and-activate-drivehub-pro/).

## Step 2: Create a File Browser Module

Every file browser you show on your website is a module. Let's create one:

- Go to **DriveHub** > **Modules** from your WP-Admin.
- Click on **Add module** at the top right.

[![The DriveHub Modules page with the Add module button](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-01-open-modules.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-01-open-modules.webp)

- In the **Select module type** window, click on **File Browser** under **Browse & search**.

[![Choosing File Browser in the Select module type window](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-02-choose-file-browser.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-02-choose-file-browser.webp)

- Click on the name at the top of the editor and give your module a name, for example **Summit Studio Project Files**.

[![Naming the File Browser module](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-03-name-module.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-03-name-module.webp)

New to modules? Our guide on [how to create your first DriveHub module](https://sovlix.com/docs/how-to-create-your-first-drivehub-module-and-add-it-to-a-page/) walks through the editor in more detail.

## Step 3: Choose Your Folders (Source Tab)

In this step, you pick the Google Drive folders visitors can browse:

- Stay on the **Source** step (it opens first).
- Scroll down to **Your Drive** and find the folder you want to share, for example **Client Proposals** or **Brand Assets**.
- Hover over the folder and tick the box in its top left corner.
- Check the **Items Selected** panel on the right. Everything you ticked shows up here, and you can remove an item with the **x** next to it.

[![Client Proposals and Brand Assets selected in the Source tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-04-source-folders.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-04-source-folders.webp)

If you tick one folder, visitors land inside it. If you tick several, they start on a **Home** view that shows all of them, then click into any folder they like.

Above **Your Drive** you will also find a few switches:

- **All Folders & Files:** lets visitors move through every folder and file of your linked Google Drive accounts. Leave it off to share only what you ticked.
- **Use Private Files:** shows each logged-in user their own private folder. This is great for client portals, where every client only sees their own files.
- **Use ACF field Files:** takes the files from an ACF field on the page where the browser is placed.
- **Merge Selected Folder Files:** shows the files from all the folders you ticked together in one view. Turn on **Include Subfolder Files** to add the files inside their subfolders too.

## Step 4: Choose Which Files Show (Filter Tab)

Here, you can decide which files appear in the browser. This tab is optional:

- Click on **Filter** in the left menu.
- **Show Files:** keep this on so your files show.
- **Show Folders:** keep this on so visitors can see and open your subfolders. Turn it off to show only the files, with no folders in the list.
- **Allowed Extensions:** to show only some file types, turn off **Allow all**, type the types you want (like `pdf, docx, jpg`) and click **Add**. To show everything except a few types, leave **Allow all** on and type those types in **Except** (like `zip`).
- **Allowed Names:** works the same way for file and folder names (turn off its **Allow all** first), and you can use wildcards such as `*proposal*`. Use **Apply to** to choose whether the name filter checks **Files**, **Folders** or both.
- **Maximum Item Count:** limits how many files show. Folders are not counted. Leave it empty to show them all.

[![Show Files, Show Folders and Allowed Extensions in the Filter tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-05-filter-tab.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-05-filter-tab.webp)

## Step 5: Set the Size and Layout (Advanced Tab)

In this step, you choose how the browser looks and loads:

- Click on **Advanced** in the left menu.
- Under **Module Container**, set a **Width** (for example `100%` or `800px`) and a **Height** (for example `600px`). Leave them empty and the browser sizes itself.

[![The Module Container settings in the Advanced tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-06-advanced-container.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-06-advanced-container.webp)

Below it, you will find two more cards:

- **Default View:** pick **Grid** or **List**. This is how the files look when the page opens. Visitors can still switch with the grid and list buttons.
- **Show Header:** keep this on to show the bar with the file count, the sort menu, the view switch and the refresh button. Turn it off for a cleaner, simpler look.
- **Show Breadcrumbs:** keep this on to show the folder path above the files, so visitors can go back up a level.
- **Lazy Load:** keep this on for big folders. The browser loads the files in batches with a **Load more** button instead of all at once, which is faster.
- **Files per Load:** how many files each batch loads, for example `20`. Leave it empty to use the number from your DriveHub settings.

[![The Layout and Lazy Load cards in the Advanced tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-14-advanced-layout.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-14-advanced-layout.webp)

## Step 6: Choose What Visitors Can Do (Permissions Tab)

Here, you decide what visitors can do with your files:

- Click on **Permissions** in the left menu.
- Keep **Preview** on so visitors can open a file in a preview window. Use **Filter Users & Roles** if only some users should be able to preview.

[![The Preview card in the Permissions tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-07-permissions-preview.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-07-permissions-preview.webp)

- Keep **Download** on so visitors can save files to their computer. Use **Filter Users & Roles** if only some users should be able to download.

[![The Download card in the Permissions tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-08-permissions-download.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-08-permissions-download.webp)

Further down, you will find a few more cards:

- **Usage Limits:** caps how many files each user can download per day, week or month. Pick a **Restrictions Period**, then fill in **Download Limits**, **Download Limits per File**, **ZIP Download Limits** or **Bandwidth Limits (in MB)**. Use **Exclude Users & Roles** for people who should never be limited, like your team.
- **Password Protection:** asks visitors for a password before they see the browser.
- **Visibility:** under **Display For**, choose **Everyone** or **Logged In**. Pick **Logged In** for a client area, so only people with an account on your site can open it.

[![The Usage Limits, Password Protection and Visibility cards](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-09-permissions-limits-visibility.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-09-permissions-limits-visibility.webp)

## Step 7: Save Your Module

Don't forget to save your work:

- Click on **Save changes** at the top right. (On a brand-new module this button says **Save module**.)

[![The Save module button in the module editor](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-10-save-module.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-10-save-module.webp)

## Step 8: Add the File Browser to a Page

You can copy the shortcode, or let DriveHub add it to a page for you:

- Click on **Embed** at the top of the editor.
- To place it yourself, click **Copy shortcode** and paste it into any page or post. It looks like `[drivehub id="30"]`; your number will be different.
- Or hover over **Add to a page** and click on **Create a new page**, then type a **Page Title** (for example, **Project Files**) and click **Create Page**.

[![The Embed menu with Copy shortcode](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-11-embed-menu.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-11-embed-menu.webp)

The [List guide](https://sovlix.com/docs/how-to-show-a-list-of-google-drive-files-with-download-buttons/) shows the **Add to a page** window step by step. You can also add the module with the [block editor](https://sovlix.com/docs/how-to-add-google-drive-files-with-the-block-editor-gutenberg/) or the [classic editor](https://sovlix.com/docs/how-to-add-google-drive-files-in-the-classic-editor/).

## Step 9: See the File Browser on Your Website

And that's it. Open your page and you will see your Google Drive folders in a neat browser:

[![The Project Files page showing the Google Drive file browser](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-12-front-end-browser.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-12-front-end-browser.webp)

Visitors can:

- Click a folder to open it, and use the folder path at the top to go back.
- Switch between **Grid view** and **List view**, sort the files and click **Refresh** to load the latest changes.
- Click a file to preview it, or use the three dots menu on a file and click **Download**.
- Click **Load more** at the bottom when a folder has more files than fit on one page.

[![Inside the Client Proposals folder in list view](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-13-front-end-list-view.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-file-browser-module-13-front-end-list-view.webp)

## Benefits of Using DriveHub as a File Browser

- **One place for every file:** Share whole folders with all their subfolders in one module.
- **Always up to date:** Add or replace a file in Google Drive and the browser shows it.
- **Save WordPress storage:** Your files stay in Google Drive, not in your Media Library.
- **You stay in control:** Choose who can preview, download or even see the browser.
- **Easy for visitors:** Grid and list views, sorting and previews work just like Google Drive.

With **DriveHub**, giving clients and teammates a tidy view of your Google Drive takes just a few minutes.

**Related guides:**

- [How to Let Visitors Upload Files to Google Drive](https://sovlix.com/docs/how-to-let-visitors-upload-files-to-google-drive/)
- [How to Play Google Drive Videos and Audio on Your Website](https://sovlix.com/docs/how-to-play-google-drive-videos-and-audio-on-your-website/)
- [How to Show Google Drive Images in a Slider Carousel](https://sovlix.com/docs/how-to-show-google-drive-images-in-a-slider-carousel/)
- [How to Add a Google Drive Search Box to Your Website](https://sovlix.com/docs/how-to-add-a-google-drive-search-box-to-your-website/)
- [How to Let Clients Review and Approve Photos (File Proofing)](https://sovlix.com/docs/how-to-let-clients-review-and-approve-photos-file-proofing/)