Promote an add-on to users 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 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 properties that can be added based on the use case:

• additionalData: Info the add-on can use to initialize itself. Can only be set if the startActivityOnOpen property is true and can be accessed using the ActivityStartingState. For more information, see Get the activity starting state.

• cloudProjectNumber: Required. The project number of your Google Cloud project.

• mainStageUrl: The URL that the main stage opens once the add-on starts, such as https://www.example.com. The URL must belong to the same origin as the URLs specified in the add-on manifest.

• sidePanelUrl: The URL that the side panel opens once the add-on starts, such as https://www.example.com. The URL must belong to the same origin as the URLs specified in the add-on manifest.

• startActivityOnOpen: Required. Whether to start the activity add-on experience in Meet immediately when the user starts the add-on from the presentation banner. Must be true if the mainStageUrl property is used.

Install and import the SDK

You can access the SDK using npm or using gstatic.

npm install @googleworkspace/meet-addons

import {meet} from '@googleworkspace/meet-addons/meet.addons.screenshare';

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.screenshare.js"></script>

Example: Load in the side panel without starting an activity

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

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: false,
    sidePanelUrl: SIDE_PANEL_URL,
  }
);
</script>

Replace the following:

• CLOUD_PROJECT_NUMBER: String. The project number of your Cloud project.
• 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 the startActivityOnOpen property was set to false, the start activity button is disabled until the ActivityStartingState is set. For more information, see Use the activity starting state.

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

The "Animation" sample add-on on GitHub includes this example as part of a full add-on. When the index page of the web app associated with the add-on is presented, the presenting user is prompted to either install or set up the add-on.

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>
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. The project number of your Google Cloud project.
• 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 mainStageUrl property is loaded, and the additionalData property is used to set the activity 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>
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. The project number of your Cloud project.
• 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 sidePanelUrl property is loaded, and the additionalData property is used to set the activity starting state of the add-on. Other users in the call are immediately prompted to install or launch the add-on.

Origin matching

The origins provided in the mainStageUrl property and the sidePanelUrl property 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.

Related topics

• Collaborate using a Meet Add-on
• Add-on security