--- title: How to Embed Google Drive Documents on Pages and Posts description: "If you're looking for a simple way to **show PDFs, Docs, Sheets or Slides from Google Drive right inside a page**, you're in the right place. You can easily do this with **DriveHub**. The **Embed Documents** module puts a document…" url: "https://sovlix.com/docs/how-to-embed-google-drive-documents-on-pages-and-posts/" updated: "2026-10-07" category: DriveHub / Modules --- # How to Embed Google Drive Documents on Pages and Posts If you're looking for a simple way to **show PDFs, Docs, Sheets or Slides from Google Drive right inside a page**, you're in the right place. You can easily do this with **DriveHub**. The **Embed Documents** module puts a document viewer on your page, so visitors can read a brochure or a guide without downloading anything. When you pick more than one file, DriveHub shows them as cards above the viewer, and visitors switch between them with one click. 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 is 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-embed-documents-00-install-drivehub.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-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. ## Step 2: Add a New Module Each embedded viewer 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 Add module button on the DriveHub Modules page](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-01-add-module.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-01-add-module.webp) ## Step 3: Choose the Embed Documents Module A window opens with all the module types: - Under **Embed & Collect**, click on **Embed Documents**. [![Choosing the Embed Documents module type](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-02-choose-embed.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-02-choose-embed.webp) The module editor opens on the **Source** step. Give your module a name you will recognise later: - Click on the name at the top and type a new one (for example, **Brand Assets Viewer**). [![Naming the embed module at the top of the editor](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-03-name-module.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-03-name-module.webp) ## Step 4: Select Your Documents (Source Tab) In this step, you pick the documents visitors will read: - Scroll down to **Your Drive**. - Open a folder and tick each file you want to show. We picked **Product Brochure.pdf**, then **Logo Guidelines.pdf** and **Brand Colours.pdf** from the **Brand Assets** folder. - Check the **Items Selected** panel on the right. The files show up here in the order visitors will see them, and you can remove one with the **x** next to it. [![Three brand documents in the Items Selected panel](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-04-select-files.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-04-select-files.webp) Above **Your Drive** you will also find **Use Private Files** and **Use ACF field Files**. They take the files from each user's private folder or from an ACF field instead of your selection. Leave them off for a normal embed. ## Step 5: Choose File Rules (Filter Tab) This tab is optional, but handy when you picked a folder. Every rule here changes which documents visitors get: - Click on **Filter** in the left menu. - **Allowed Extensions:** to show only some file types, turn off **Allow all**, type a type (like pdf) and click **Add**. To hide just a few types instead, keep **Allow all** on and type them in **Except**. - **Allowed Names:** works the same way for file names, and you can use wildcards such as `brand*`. - **Maximum Item Count:** the most documents the viewer shows. Leave it empty to show them all. [![Showing only PDF files with Allowed Extensions in the Filter tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-05-filter-tab.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-05-filter-tab.webp) ## Step 6: Set Up the Viewer (Advanced Tab) Now let's decide how the viewer looks: - Click on **Advanced** in the left menu. - Scroll to **Embed Viewer Settings** and set: - **Display Width:** how wide the viewer is, as a CSS value like `100%` or `800px`. - **Display Height (px):** how tall the viewer is (600 by default). - **Viewer Theme:** **Default Viewer** uses soft grey panels, **Light Theme** keeps everything plain white, and **Dark Theme** turns the cards, toolbar and viewer frame dark. - **Show Frame Border:** sets the document inside a rounded, bordered frame with a little space around it. - **Allow Fullscreen View:** shows the full screen button at the top right. Turn it off to hide that button. - **Embed Type:** **Read Only** shows the document without editing. **Editable** and **Full Editable** open Google Docs, Sheets and Slides in edit mode (with a shorter or the full toolbar). PDFs always stay read only. - **Show File Name:** shows the name and size of the open document in a bar above the viewer. - **Direct Media Display:** plays video and audio files in your page's own player instead of the Google viewer. Turn it on if a video or audio file does not play. [![The Embed Viewer Settings card in the Advanced tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-06-embed-viewer-settings.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-06-embed-viewer-settings.webp) **Note:** Editable embeds only work for visitors who have edit access to the file in Google Drive. For a public page, keep **Read Only**. Here is the same viewer with **Dark Theme**, **Show Frame Border** and **Show File Name** turned on: [![The Brand Assets documents with the dark theme, a frame border and the file name bar](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-16-dark-theme.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-16-dark-theme.webp) And with **Direct Media Display** on, a video plays right in the page: [![A video playing in the page's own player with Direct Media Display on](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-17-direct-media.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-17-direct-media.webp) ## Step 7: Choose Who Can Do What (Permissions Tab) Here, you decide who can see the viewer and save the files: - Click on **Permissions** in the left menu. - Keep **Download** on if visitors may save the files. The download button then shows in the full screen view. Use **Filter Users & Roles** to allow it for some users only. [![The Download permission card](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-07-download.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-07-download.webp) Scroll down for the last two cards: - **Password Protection:** asks visitors for a password before they see the documents. - **Visibility:** under **Display For**, choose **Everyone** or **Logged In**. [![The Password Protection and Visibility cards](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-08-password-visibility.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-08-password-visibility.webp) ## Step 8: Save Your Module Don't forget to save your work: - Click on **Save changes** at the top right. [![The Save changes button in the module editor](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-09-save-changes.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-09-save-changes.webp) ## Step 9: Add the Viewer 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="28"]`; your number may be different. - Or click on **Add to a page**, then on **Create a new page**. (Pick **Choose an existing page** instead to add the viewer to a page you already have.) [![The Embed menu with Add to a page open](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-10-add-to-page.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-10-add-to-page.webp) The **Create New Page** window opens: - Type a **Page Title** (for example, **Brand Assets**). - Click on **Create Page**. [![Typing the page title and clicking Create Page](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-12-create-page.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-12-create-page.webp) DriveHub creates a draft page with the shortcode already in it and shows **Shortcode added to the page.** Open it with **Edit Page**, then click **Publish** when you are ready. 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 10: See the Documents on Your Website And that's it. Visit your page and you will see a card for each document, with the first one open in the viewer below: [![Frontend View of the Brand Assets documents](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-13-front-end-embed.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-13-front-end-embed.webp) Visitors can: - Click a card to open that document in the viewer. - Switch between the card view and a list view with the buttons at the top right. - Click the reload button if a document does not load the first time. - Click the full screen button (when **Allow Fullscreen View** is on) to read the document in a large window, move between files with the arrows, open it in Google Drive with **Open**, or download it. [![A document open in the full screen view](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-14-front-end-full-screen.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-14-front-end-full-screen.webp) On a phone, the cards scroll sideways and the viewer fills the screen width: [![The Brand Assets documents on a phone](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-15-front-end-phone.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-embed-documents-15-front-end-phone.webp) ## Benefits of Embedding Google Drive Documents - **No downloads needed:** Visitors read the document right on your page. - **One place for many files:** Several documents share one tidy viewer. - **Always the latest version:** Update the file in Google Drive and your page follows. - **Save WordPress storage:** Big PDFs stay in Google Drive, not in your Media Library. - **You stay in control:** Turn downloads on or off and choose who can see the viewer. With **DriveHub**, putting your brochures and guides on your website takes just a few clicks. **Related guides:** - [How to Show a Google Drive Photo Gallery on Your Website](https://sovlix.com/docs/how-to-show-a-google-drive-photo-gallery-on-your-website/) - [How to Show a List of Google Drive Files with Download Buttons](https://sovlix.com/docs/how-to-show-a-list-of-google-drive-files-with-download-buttons/)