| Drupal

How to Embed a Google Docs Viewer in Your D8 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

Add the composer command

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

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

Create a new file field in the Basic Page

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

Click Save and continue

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

Click Save field settings

  • 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

Click Save settings

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

Select Manage display

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

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

Click Select button

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

  • Click Save

Click Save

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

Take a look at the node


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.

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!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.