Google and bConnected Widgets

Site Builders and Widget Editors may use the Google/bConnected widgets to embed the following Google items on their pages: 

  • Google Doc
  • Google Form
  • Google Calendar
  • Custom Google Map

Other Google products (for example Sheets and Slides) cannot be embedded in Open Berkeley sites because the embedded versions of this content have serious accessibility issues. We recommend linking to Sheets, Slides, and other Google products for which Open Berkeley widgets are not available.

About Google and bConnected Widgets

The first three items in the above list are Google apps from the campus bConnected suite of services. Google Docs and Google Forms are available in bDrive. Google Calendar is available in bCal.

The last item in the above is a custom Google map, which may be created using Google's "My Maps" feature. A custom Google Map should only be used for maps featuring multiple addresses. (For single-address maps, use the Add Map widget.)

Important Note About Data in Google and bConnected Widgets

You must follow the campus requirements for protected data if you embed any Google/bConnected widgets. Open Berkeley websites are only approved to host and display public data, i.e., data that falls into the Protection Level 1 data category. 

If you have any questions about protected data and Google/bConnected widgets, please email web-platform@berkeley.edu. 

How to Use Google and bConnected Widgets

In order to be successfully embedded on your pages, Google content must be published and open to the public on the web. If the embedded items require users to sign in, they may not display correctly, or may cause other display problems on the page. If the content in these Google/bConnected items needs to reside behind CalNet login, you should link to the items (see Add Links) rather than embedding them.

The instructions below cover the steps for embedding Google and bConnected content as widgets on your pages. For complete documentation on bConnected Google apps, see the bConnected site.

The two primary steps for using Google and bConnected widgets are:

  1. create your Doc/Form/Calendar/Map and publish them to the web
  2. embed the Doc/Form/Calendar/Map in a widget.

See the detailed steps below. 

Publish Google Docs

Once you have created a Google Doc in bDrive, you must publish it before embedding it on your Open Berkeley website.

Important Note About Links in Google Docs

If a Google Doc contains any links (either on your site, or external links), and the Google Doc is embedded, then site visitors may not be able to activate the links in the embedded widget, unless they right-click the links and choose to open them in a new browser tab.

This is due to settings on many websites (including Open Berkeley), which often do not allow for content to be embedded in a frame. This is a method to protect against clickjacking (a common cybersecurity threat).

If your Google Doc must contain links, then you may need to link to the Google Doc instead of embedding it. 

How to Publish a Google Doc on the Web

  1. Open the Google Doc in your browser.
  2. In the File menu, select "Publish to the web"
  3. Select the Publish button.
  4. Copy either the link or embed code to your clipboard.

See Figures 1 and 2, below.

Figure 1: Publish Google Doc

Figure 2: Copy doc URL

Once you have published your Google Doc, and you are ready to embed it, see the "Add Google/bConnected Widgets" section below.

Publish Google Forms

Once you have created a Google Form in bDrive, you must remove all restrictions before embedding it on your Open Berkeley website.

Important Note about Embedding Google Forms

If a form on bDrive is going to be embedded, the form cannot have any restrictions in the settings. You will need to uncheck a box under "Settings" in order to remove a restriction. See Step 2, below. 

How to Publish a Google Form on the Web

  1. Open the Google Form in your browser.
  2. In the "General" tab under "Settings," there will be a checkbox for "Restrict to users in UC Berkeley and its trusted organizations." Uncheck this box, then select "Save." 
  3. Select the "Send" option.
  4. Select either the "Link" or "Embed" option, and copy to your clipboard.

See Figures 3, 4, and 5, below.

Figure 3: Uncheck UC Berkeley restriction

Figure 4: Select "Send" button on form

Figure 5: Copy form link

Once you have published your Google Form, and you are ready to embed it, see the "Add Google/bConnected Widgets" section below.

Publish Google Calendars

Once you have created a Google Calendar, you must make sure that it is public before embedding it on your Open Berkeley website.

How to Make a Google Calendar Public

  1. Open bCal in your browser.
  2. From the "My Calendars" section, find the calendar you want to embed, then select the little arrow next to the calendar. 
  3. From the drop-down options, select "Settings and sharing."
  4. From the Settings menu, navigate down to "Access Permissions," and check "Make available to public."
  5. From the Settings menu, navigate to the "Integrate calendar" section, and copy the embed code to your clipboard. You can customize the display options of the calendar (e.g., Week/Month/Agenda view, etc.) by selecting the "Customize" link first. 

See Figures 6, 7, and 8, below.

Figure 6: Open "Settings and Sharing"

Figure 7: Make calendar public
Screenshot of bCal settings, with checkbox for making the calendar public

Figure 8: Copy embed code, and customize the display if desired.

Once you have made your Google Calendar public, and you are ready to embed it, see the "Add Google/bConnected Widgets" section below.

Publish Custom Google Maps

Once you have created a custom Google Map, you must make sure that it is public before embedding it on your Open Berkeley website.

The below instructions are for a custom map featuring multiple addresses/locations. To display a map with a single address, use the Add Map widget.

How to Create and Publish a Custom Google Map

  1. Sign in My Maps with your CalNet ID and passphrase.
  2. Create a new custom map, or select an existing map. 
  3. Select the option that looks like three dots stacked on top of each other.
  4. Select "Embed Map."
  5. Copy the embed code to your clipboard.

See Figures 9 and 10, below.

Figure 9: Select "Embed Map" from map settings

Figure 10: Copy embed code

Once you have created your custom Google Map, and you are ready to embed it, see the "Add Google/bConnected Widgets" section below.

Add Google/bConnected Widgets

Once you have published your Google/bConnected items, you may select the applicable Google/bConnected widgets to embed them on your pages. 

How to Select and Configure Google/bConnected Widgets

  1. Navigate to the page on your site where you'd like to add the Google/bConnected items.
  2. Select the "Customize this page" button.
  3. Select the "plus" icon for the region where you want to add the doc.
  4. Choose the "Embeddable content" category.
  5. Select the "Add" button for the applicable widget ("Google Form," "Google Calendar," etc.).
  6. Paste the link you copied from bDrive into the "Link or embed code" field.
  7. Add a widget title and set the height of the widget (optional).
  8. Select "Save" in the "Add Content" screen.
  9. Select the "Save" button at the bottom of the screen to finish saving the changes to the page.

See Figures 11 and 12, below. These figures display the process of embedding a Google Form, but the settings are the same for all of the Google/bConnected widgets. 

Figure 11: Select embeddable content

Figure 12: Configure widget

Topics