The Embeddable content set lets you feature interactive external content from these campus and third-party web tools:
- Data visualization (special access; only with license): embed accessible, interactive data visualizations created using Everviz.
- Google calendar: embed a public bCal event calendar or schedule.
- Google custom map: embed a custom Google Map featuring multiple addresses or locations.
- Google doc: embed a published document from Google Docs / bDrive.
- Google form: embed an unrestricted, published Google Form for online responses.
Figure 1 shows the widget selection screen with a preview of the Google doc widget.
Add and configure Embeddable content widgets
Using these widgets requires some preparation, special configuration, or specific publishing permissions in the source applications. See below for details.
Data visualization
The Data Visualization widget allows you to embed accessible, interactive charts and maps created in Everviz (formerly Highcharts Cloud). Note that special access and a paid license are required to edit or create new visualizations.
Important accessibility and configuration considerations:
- Accessibility: Built-in Everviz chart types support keyboard navigation and screen readers. Limit your page to one embedded chart per page so that links (such as "View on Everviz") remain unique and accessible.
- Data protection: Berkeley Web Builder sites are only approved to host public data (Protection Level 1). Do not upload protected data.
- Menu options: By default, charts include export and data viewing options. Configure these options in Everviz before publishing, as Everviz caches visualization settings.
To set up the widget, add the data visualization widget from the "Embeddable content" category, and paste the link or embed code (iFrame code or Share URL) provided by Everviz into the "Link or embed code" field. Adjust the height field if necessary. See Figure 2, below.
Google Calendar
The Google Calendar widget lets site visitors view events directly from UC Berkeley bCal calendars.
How to set up the Google calendar widget:
- Open bCal in your browser and locate your calendar under "My Calendars."
- Select "Settings and sharing," navigate to "Access Permissions," and check "Make available to public."
- Under the "Integrate calendar" section, copy the embed code to your clipboard.
Add the Google Calendar widget under "Embeddable content" and paste the embed code into the "Link or embed code" field. See Figure 3, below.
Google custom map
The Google custom map widget allows you to embed custom maps featuring multiple locations created with Google "My Maps." For maps showing a single address, use the Map widget instead.
How to set up the Google custom map widget:
- Sign in to Google My Maps with your CalNet ID and open or create your map.
- Select the menu (three stacked dots) and select "Embed Map."
- Copy the embed code provided.
Add the Google custom map widget under "Embeddable content" and paste the code into the "Link or embed code" field. See Figure 4, below.
Google Doc
The Google Doc widget allows you to display published Google Docs directly on your pages.
Important note about links: If an embedded Google Doc contains hyperlinks, site visitors may need to right-click and open links in a new tab due to frame embedding security settings (clickjacking protection). If direct link navigation is critical, consider linking to the Google Doc directly instead of embedding it.
How to set up the Google doc widget:
- Open the document in Google Docs / bDrive.
- Select File > Share > Publish to web and click Publish.
- Copy the published link or embed code provided.
Add the Google Doc widget under "Embeddable content" and paste the link or code into the "Link or embed code" field. See Figure 5, below.
Google Form
The Google form widget lets you display forms directly on your page so visitors can submit responses without leaving your website.
Important note about restrictions: The Google Form must have all access restrictions removed so that "Anyone with the link" can respond, and "Collect email addresses" must be set to "Do not collect" in the form settings. If the form has any access restrictions, it will not display in the widget.
How to set up the Google form widget:
- Open your form in Google Forms / bDrive.
- Click "Publish" or go to form settings, and update permissions so responders do not require CalNet/organizational login.
- Copy the published responder link.
Add the Google Form widget under "Embeddable content" and paste the link into the "Link or embed code" field. See Figure 6, below.
