How to Embed a Google Docs Viewer in Your Drupal 8 Site

The Embedded Google Docs Field allows the site administrator to change the display of normal file fields, making them viewable directly on the node with the help of the Google Docs Viewer.

This tutorial will explain the usage of this module through an example.

Let’s start!

Hint: Google has to be able to locate your site on the web, in order to embed the viewer. This module will not work in a local environment.

---

Step # 1. Install the required modules

• Open the terminal application on your computer
• Place the cursor on the root of your Drupal installation (the composer.json file is located there)
• Type:

composer require drupal/gdoc_field

• Click Extend
• Scroll down until you find the module and enable it
• Click Install

---

Step #2. Add a File Field

• Click Structure > Content types
• Click Manage fields in order to create a new file field in the Basic Page content type

• Click Add field
• Select a field from type File and give it a proper label
• Click Save and continue

• Click Save field settings in order to leave the default values

• Add the proper help text to be shown to the editor when creating the node
• Mark this field as required
• Add some more file extensions (only text documents would be boring)
• Click Save settings

• Open the dropdown options for the Basic Page content type and select Manage display

• Hide the file field label
• Select the Embedded Google Documents Viewer as formatter
• Click Save

---

Step #3. Create the Content

• Click Content > Add content > Basic Page
• Write a proper title and body text
• Click the Select button in order to upload a document

You will see the link to the document once it has been uploaded.

• Click Save

Take a look at the node, the document should be displayed in an iframe right after the body text.

---

Step #4. Theming the Viewer

To add styles to the embedded iframe, it is necessary to target the gdoc-field class. Furthermore, you can customize the viewer even more by using template overrides. The default template is called gdoc-field.html.twig.

I really hope that your design taste is much better than mine.

I also hope this tutorial will help you broaden your site-builder skills by adding this simple but useful module to your personal knowledge base. Please, leave us your comments and suggestions below.

Thanks for reading!