This page describes how to create the side panel and main stage pages of a Meet Web Add-on.
Install and import the SDK
You can access the SDK using npm or using gstatic.
npm (recommended)
If your project uses npm, you can follow the instructions for the Meet Add-ons SDK npm package.
First, install the npm package:
npm install @googleworkspace/meet-addons
Then, the Meet Add-ons SDK is available by importing the
MeetAddonExport
interface:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
For TypeScript users, TypeScript definitions are packaged with the module.
gstatic
The Google Meet Add-ons SDK is available as a
JavaScript bundle from gstatic, a domain that serves static content.
To use the Meet Add-ons SDK, add the following script tag to your app:
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
The Meet Add-ons SDK is available through the MeetAddon interface under window.meet.addon.
Indicate add-on loading is complete
Meet shows a loading screen while the add-on is loading. When the add-on session is established, Meet treats this as a signal from the add-on that loading has finished, and that the user can interact with the third-party content.
Create a side-panel page
The side panel displays the installed add-ons that you
can select and use.
Once you select your add-on, an iframe loads the side
panel URL you
specified in the add-on manifest. This should be the
entry point of your app. To access the Meet Add-ons SDK functionality
in the side panel, you must instantiate a sidePanelClient.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.createSidePanelClient();
Replace CLOUD_PROJECT_NUMBER with the project number of your Google Cloud project.
Here's a code snippet that shows how to start an activity:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Side Panel Add-on</h1>
<div>
<div>
<button id="start-activity">
startActivity
</button>
</div>
<div>
Activity Side Panel URL:
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/newSidePanelPage.html" />
</div>
<div>
Main Stage URL:
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/mainStagePage.html" />
</div>
<div>
Activity start state data:
<input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
value="abc123" />
</div>
</div>
</div>
<script>
let sidePanelClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
console.log("Successfully constructed the add-on session.");
sidePanelClient = await session.createSidePanelClient();
console.log("Successfully constructed side panel client.");
document
.getElementById('start-activity')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startActivity({
// Side panel is replaced with a new page.
sidePanelUrl: sidePanelIframeUrlInputElement.value,
// Main stage loads a large work area.
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: JSON.stringify({
additionalProperty: additionalPropertyInputElement.value
}),
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Replace CLOUD_PROJECT_NUMBER with the project number of your Google Cloud project.
Create a main stage page
The main stage is the main focus area where you can display the
add-on if a larger working space is needed. The main
stage opens once the activity starts. To access Meet Add-ons SDK
features in the main stage, you can use the client object
MeetMainStageClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Replace CLOUD_PROJECT_NUMBER with the project number of your Google Cloud project.
Here's a code snippet that shows an example of a main
stage page (mainStagePage.html in the previous snippet), and includes a call
to getActivityStartingState in response to a button click:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0; background: white;">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Main Stage Add-on</h1>
<div>
<div>
<button id="get-activity-starting-state">
Get Activity Starting State's Additional Property
</button>
</div>
<div id="receivedActivityStartingStateProperty"
style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div>
</div>
</div>
<script>
let mainStageClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
console.log("Successfully constructed the add-on session.");
const mainStageClient = await session.createMainStageClient();
console.log("Successfully constructed main stage client.");
document
.getElementById('get-activity-starting-state')
.addEventListener(
'click', async () => {
const startingState =
await mainStageClient.getActivityStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedActivityStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Replace CLOUD_PROJECT_NUMBER with the project number of your Google Cloud project.