Promote an add-on to users through screen sharing

Promoting an add-on through screen sharing.

This page describes how to promote an add-on to users while screen sharing a tab with Google Meet by placing a small amount of code on another web page.

The MeetAddonScreenshare.exposeToMeetWhenScreensharing method allows the site to send information to Meet when its tab is screen shared. This information is used in the add-on experience with Meet when the user clicks "Start activity" on the presentation banner if they have the add-on installed. If the user doesn't have the add-on installed when they screen share a tab, they're prompted to install the add-on.

The AddonScreenshareInfo object contains five fields that can be added based on the use case:

Example: Load in the main stage

In the following code sample, a user who screen shares a web page in Meet containing the following code is prompted to launch the add-on:

<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.screenshare.js"></script>
<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    mainStageUrl: MAIN_STAGE_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

Replace the following:

  • CLOUD_PROJECT_NUMBER: String. Your cloud project number.
  • MAIN_STAGE_URL: String. The URL for the main stage.

When the user in the Meet call screen shares the page, they see a presentation banner in Meet. Clicking the button on the banner opens the add-on for the given cloud project number in the main stage. The AddonScreenshareInfo.mainStageUrl is loaded, and the AddonScreenshareInfo.additionalData is used to set the collaboration starting state of the add-on. Other users in the call are immediately prompted to install or launch the add-on.

Example: Load in the side panel

In the following code sample, a user screen shares a page with an add-on that wants to start in the side panel rather than the main stage:

<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.screenshare.js"></script>
<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    sidePanelUrl: SIDE_PANEL_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

Replace the following:

  • CLOUD_PROJECT_NUMBER: String. Your cloud project number.
  • SIDE_PANEL_URL: String. The URL for the side panel.

When the user in the Meet call screen shares the page, they see a presentation banner in Meet. Clicking the button on the banner opens the add-on for the given cloud project number in the side panel. The AddonScreenshareInfo.sidePanelUrl is loaded, and the AddonScreenshareInfo.additionalData is used to set the collaboration starting state of the add-on. Other users in the call are immediately prompted to install or launch the add-on.

Example: Load in the side panel without starting a collaboration

In the following code sample, a user screen shares a page with an add-on that must adjust resource permissions before the collaboration activity can be started. Due to this requirement, the add-on should be started in the side panel, without the collaboration being started for everyone.

<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.screenshare.js"></script>
<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: false,
    sidePanelUrl: SIDE_PANEL_URL,
  }
);
</script>

Replace the following:

  • CLOUD_PROJECT_NUMBER: String. Your cloud project number.
  • SIDE_PANEL_URL: String. The URL for the side panel.

When the user in the Meet call screen shares the page, they see a presentation banner in Meet. Clicking the button on the banner opens the add-on for the given cloud project number in the side panel. Since AddonScreenshareInfo.startActivityOnOpen was set to false, the start activity button is disabled until the CollaborationStartingState is set. For more information, see Use the collaboration starting state.

Once the activity is started, other users in the call are prompted to either launch or install the add-on.

Origin matching

The origins provided in AddonScreenshareInfo.mainStageUrl and AddonScreenshareInfo.sidePanelUrl are compared to the origins in the add-on manifest of the provided cloud project number. If everything matches, the user is allowed to launch the add-on.

Additionally, the origin of the site initiating the screen share must be listed in the addOnOrigins field in the add-on manifest.

For more information, see Add-on security.