Google and bConnected Widgets

Overview

The campus bConnected suite of services includes Google apps such as Docs and Forms (bDrive) and Calendar (bCal).  Using the Google/bConnected Widgets feature, Site Builders can add bConnected or other Google docs, forms, and calendars to their pages.

Here are the Google items that can currently be embedded in a widget:

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

Custom Google maps that you have created using Google's "My Maps" should only be used for maps featuring multiple addresses. (For plain maps of a single address, use the simple Add Map widget.)

In order to be successfully embedded in your site, Google content must be published and open to the public on the web. If the embedded content requires authentication, it may not be displayed correctly or may cause problems with the display of the page where it's embedded. In these cases (if the content needs to reside behind CalNet login), you should link to the content rather than embedding it.

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

Before a Google Drive item (Docs, Forms) can be embedded on a page, the document must be published to the web.

Docs

To publish a Google Doc to the web:

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

To add the Google Doc to a page:

  1. Navigate to the page on your site where you'd like to add the Google Doc.
  2. Click the Customize this page button.
  3. Click the Add Content button (the "plus" icon) for the region where you want to add the doc.
  4. Choose the Embeddable content category.
  5. Click the Add button for the Google Doc widget.
  6. Paste the link you copied from bDrive into the "Link or embed code" field.
  7. If desired, set other options such as widget title and height.
  8. Click Save in the Add Content screen.
  9. Click Save button at the bottom of the screen.

Forms

To publish a Google form to the web:

  1. Open the Google Form in your browser.
  2. Review the form settings by clicking the gear ("Settings") option (e.g., "Restrict to UC Berkeley users," etc.).
  3. Click the "Send" option.
  4. Select either the "Link" or "Embed" option, and copy to your clipboard.

To add the Google Form to a page:

  1. Navigate to the page on your site where you'd like to add the Google Form.
  2. Click the Customize this page button.
  3. Click the Add Content button (the "plus" icon) for the region where you want to add the form.
  4. Choose the Embeddable content category.
  5. Click the Add button for the Google Form widget.
  6. Paste the link you copied from bDrive into the "Link or embed code" field.
  7. If desired, set other options such as widget title and height.
  8. Click Save in the Add Content screen.
  9. Click Save button at the bottom of the screen.

Calendars

To publish a Google calendar to the web:

  1. Open bCal in your browser.
  2. From the "My Calendars" section, find the calendar you want to embed, then click the little arrow next to the calendar. 
  3. From the drop-down options, select "Settings and sharing."
  4. 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. 

To add the Google Calendar to a page:

  1. Navigate to the page on your site where you'd like to add the Google Calendar.
  2. Click the Customize this page button.
  3. Click the Add Content button (the "plus" icon) for the region where you want to add the form.
  4. Choose the Embeddable content category.
  5. Click the Add button for the Google Calendar widget.
  6. Paste the link you copied from bCal into the "Link or embed code" field.
  7. If desired, set other options such as widget title and height.
  8. Click Save in the Add Content screen.
  9. Click Save button at the bottom of the screen.

Custom Google maps

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

To create/publish custom Google Map to the web:

  1. Sign in My Maps with your CalNet ID and passphrase.
  2. Create a new custom map or select an existing map. 
  3. Click 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.

To add the custom Google Map to a page:

  1. Navigate to the page on your site where you'd like to add the map.
  2. Click the Customize this page button.
  3. Click the Add Content button (the "plus" icon) for the region where you want to add the form.
  4. Choose the Embeddable content category.
  5. Click the Add button for the Custom Google Map widget.
  6. Paste the link you copied from bCal into the "Link or embed code" field.
  7. If desired, set other options such as widget title and height.
  8. Click Save in the Add Content screen.
  9. Click Save button at the bottom of the screen.