Embedding G Suite Apps via iFrames

G Suite is a popular service featuring several apps like Docs, Sheets, Calendar, etc. As a faculty, staff or student at UCI you have access to UCI Google with unlimited storage. You can embed some data using iFrames to your site.

Google provides an iFrame to embed things some data. By default, WordPress will strip out iFrame code for security reasons. The iFrame code will disappear when switching between Visual and Text mode or when Publishing. To prevent this, you will need to change the provided iFrame code.

Embedding a Google iFrame

Publishing the Google Doc to the Web

Before you embed your Google Doc, you will need to make it public. It if is private, only you will be able to see it.

  1. Edit the Google Doc you want to share.
  2. Click the Share button
    Share button
  3. Click the Advanced link in the Share overlay.
    Advanced link
  4. Click the Change link next to Private.
    Change Privacy
  5. Change it to either On – Public on the Web or On – Anyone with the link and click Save.
    Link sharing
  6. Go to File > Publish to the web…
    Publish to the web
  7. Click the Embed tab and copy the iframe code.
    iFrame code

Add iFrame

  1. Edit the page or post .
  2. Click the Text tab above the formatting toolbar.
    Text Tab
  3. Paste in the iFrame code you want to insert.
    iframe code
  4. Change the iFrame code to the iFrame shortcode.
    Change the “<” to “[” and change the “>” to “]” and remove the last “</iframe> code.
    iframe shortcode
  5. Preview or Publish your post or page. Your iFrame code should be inserted and the content displayed.

Sample Google Sheet

Sample Google Form

 

Embedding iFrames in Widgets

You can also embed iFrames into widget areas. You will need to use the Text Widget. The HTML widget does not work. There is one caveat, you may have to change the height and width dimensions to include pixels. See below.

  1. Go to Customize > Widgets 
  2. Click “Add a Widget” and choose the Text widget.
  3. Paste in the iFrame code you got from Google.
  4. Modify the iFrame to use the shortcodes. See directions above under “Add iFrame“.
  5. To get the iFrame to display the proper width and height, you may need to add pixels to the dimensions. For example, change height=”300″ to height=”300px”. Without this addition, the height may collapse on not show all your data.