Google Integration Course

Google Preview Widget



The Newton (April 2015) release saw the introduction of the Google Preview widget.  With the Google integration being further improved in the Curie (July 2016) release a number of small display improvements have been made to the Google Preview widget.

 

The Google Preview widget is available to users that have the Google Drive integration enabled. This widget should allow teachers to use any resources stored within their Google Drive to create richer teaching and learning sites for student engagement. 

 

NOTE    The sharing rights on the site will have no bearing on users having access to embedded Google documents.  It is an additional requirement for the user embedding the Google document to ensure that correct sharing permissions have been set.  This can be achieved within Google Drive by making the document public or setting bespoke permissions to required users only. 

 

How to

 

Create a new site or navigate to an existing site and enter edit mode. Go to the Widgets tab, and see the Google Preview widget available from the widget tray.

 

Google_Preview_Widget_Tray1.jpg

 

Drag and drop the Google Preview widget onto your site.  Select the widget to see the configuration settings available.

 

Google_Preview_Widget_Settings2.jpg

 

Select the FrogDrive button to choose a Google resource to embed within your site.

 

Google_Preview_Widget_Settings_FrogDrive3.jpg

 

FrogDrive pop up window will display the Documents and Google Drive areas.  Only Google file types will appear within the window.

 

In this example, we are going to select a Google document from within Google Drive > My Drive.  Select the document you wish to embed in your site and then click on the Use button. 

 

Google_Preview_Widget_Settings_FrogDrive_Select4.jpg

 

You will be navigated back to your site with the selected Google document displayed as well as the following actions available:

  • Open in Google – When selected the Google document will open in a new tab within your browser session.
  • Download – When selected several options are available:
    • Download as text
    • Download as PDF
    • Download as DOCX

 

Google_Preview_Widget_Settings_FrogDrive_Select_Preview_Edit5.jpg

 

Save your changes and exit edit mode.  The selected Google document is embedded and displayed within your site.

 

Google_Preview_Widget_Site_Display6.jpg

 

In addition to being able to embed a Google document within your site, the Google Preview widget also provides the ability to customise the widget height. Go to edit mode and select the Google Preview widget to see the widget settings.

 

A small change that may be noticed is the Google Preview widget now displays the name of the Google document embedded.

 

Google_Preview_Widget_Settings_Edit7.jpg

 

In the Google Preview widget settings, the option Height allows the site administrator to put in a pixel value to determine the total height of the widget.  The default height value will be set to 600.  

 

Google_Preview_Widget_Settings_Height8.jpg

 

Once you have entered a pixel height save your changes and exit edit mode. The Google Preview widget will adjust its height to match the value entered.

 

If the pixel height entered does not accommodate the Google document displayed, a scroll bar will be displayed on the right hand side of the document.

 

Google_Preview_Widget_Settings_Height_Display9.jpg

 

Lastly, above your Google document the following is displayed:

  • Name of your Google document.
  • Open in Google – When selected the Google document will open in a new tab within your browser session.
  • Download – When selected several options are available:
    • Download as text
    • Download as PDF
    • Download as DOCX

Google_Preview_Widget_Settings_Height_Display_Open_in_Google10.jpg

 

After selecting the Open in Google button, the Google document will launch in a new tab within your browser allowing you to view / edit the document.

 

NOTE    The permissions to view or edit the Google document will be based on the Google sharing permissions set by the owner of the Google document.  These sharing permissions are set outside of the FrogLearn platform.

 

Google_Preview_Widget_Settings_Height_Display_Open_in_Google_Display11.jpg