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:
AddonScreenshareInfo.additionalData
: Info the add-on can use to initialize itself. Can only be set ifAddonScreenshareInfo.startActivityOnOpen
is true and can be accessed using theCollaborationStartingState
. For more information, see Use the collaboration starting state.AddonScreenshareInfo.cloudProjectNumber
: Required. The Google Cloud project number of the add-on.AddonScreenshareInfo.mainStageUrl
: The URL that the main stage opens once the add-on starts, such ashttps://www.example.com
. The URL must belong to the same origin as the URLs specified in the add-on manifest.AddonScreenshareInfo.sidePanelUrl
: The URL that the side panel opens once the add-on starts, such ashttps://www.example.com
. The URL must belong to the same origin as the URLs specified in the add-on manifest.AddonScreenshareInfo.startActivityOnOpen
: Required. Whether to start the collaborative add-on experience in Meet immediately when the user starts the add-on from the presentation banner. Must be true ifAddonScreenshareInfo.mainStageUrl
is used.
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.7.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.7.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.7.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.