This guide describes how to set up and run a sample Google Meet Add-on by creating a main stage and side panel. The "Hello World" examples on this page are also available on GitHub as complete Meet Add-ons built with either basic JavaScript or Next.js TypeScript.
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
.
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 specify in the add-on manifest. This should be the entry point of your app, and should at minimum do the following things:
Indicate add-on loading is complete. Meet shows a loading screen while the add-on is loading. When the add-on session is established by calling the
createAddonSession
() method, 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. Your add-on shouldn't call thecreateAddonSession()
method until your content has finished loading.Create the side panel client. To access the Meet Add-ons SDK in the side panel, you must instantiate a
MeetSidePanelClient
interface. This provides control over your main Meet Add-ons SDK experience.Start the activity. This allows others to join your add-on and optionally opens your add-on in the main stage.
The following code sample shows how the session creates a side panel client, and how the side panel client starts an activity in the main stage:
Basic JS + Webpack
In a new file named main.js
, define a function that creates an
add-on session, the side panel client, and starts
the activity when a button with the ID 'start-activity'
is clicked:
import { meet } from '@googleworkspace/meet-addons/meet.addons';
const CLOUD_PROJECT_NUMBER = 'CLOUD_PROJECT_NUMBER';
const MAIN_STAGE_URL = 'MAIN_STAGE_URL';
/**
* Prepares the Add-on Side Panel Client, and adds an event to launch the
* activity in the main stage when the main button is clicked.
*/
export async function setUpAddon() {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: CLOUD_PROJECT_NUMBER,
});
const sidePanelClient = await session.createSidePanelClient();
document
.getElementById('start-activity')
.addEventListener('click', async () => {
await sidePanelClient.startActivity({
mainStageUrl: MAIN_STAGE_URL
});
});
}
In a new file named SidePanel.html
, define the button that launches the
activity, and call the function from your main.js
on document load:
<html>
<head>
<title>Meet Add-on Side Panel</title>
<script src="./main.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0">
<div>This is the Add-on Side Panel. Only you can see this.</div>
<button id="start-activity">Launch Activity in Main Stage.</button>
<script>
document.body.onload = () => {
// Library name (`helloWorld`) is defined in the webpack config.
// The function (`setUpAddon`) is defined in main.js.
helloWorld.setUpAddon();
};
</script>
</body>
</html>
You'll also need to bundle the Meet Add-ons SDK with your
main.js
and expose them in a library. We recommend doing so by
installing webpack
and using the library
option
in your webpack.config.js
file:
module.exports = {
entry: './main.js',
output: {
library: 'helloWorld',
...
},
...
};
Next.js
Add a new Page
to display the side panel. This page creates an
add-on session and side panel client on load, and
starts the activity when a button is clicked:
'use client';
import { useEffect, useState } from 'react';
import {
meet,
MeetSidePanelClient,
} from '@googleworkspace/meet-addons/meet.addons';
export default function Page() {
const [sidePanelClient, setSidePanelClient] = useState<MeetSidePanelClient>();
// Launches the main stage when the main button is clicked.
async function startActivity(e: unknown) {
if (!sidePanelClient) {
throw new Error('Side Panel is not yet initialized!');
}
await sidePanelClient.startActivity({
mainStageUrl: 'MAIN_STAGE_URL'
});
}
/**
* Prepares the Add-on Side Panel Client.
*/
useEffect(() => {
(async () => {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
});
setSidePanelClient(await session.createSidePanelClient());
})();
}, []);
return (
<>
<div>
This is the Add-on Side Panel. Only you can see this.
</div>
<button onClick={startActivity}>
Launch Activity in Main Stage.
</button>
</>
);
}
Replace the following:
CLOUD_PROJECT_NUMBER: the project number of your Google Cloud project.
MAIN_STAGE_URL: the main stage URL that you create in the next step.
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 must use the MeetMainStageClient
interface.
The following code sample shows an example of a main stage page that renders a
custom div
to say "Hello, world!":
Basic JS + Webpack
Add the following function to the main.js
file you already created, so
that the main stage can signal that it has finished loading:
/**
* Prepares the Add-on Main Stage Client, which signals that the add-on has
* successfully launched in the main stage.
*/
export async function initializeMainStage() {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: CLOUD_PROJECT_NUMBER,
});
await session.createMainStageClient();
}
Then, add a new MainStage.html
file, which calls the new
initializeMainStage
function and displays custom "hello, world" content:
<html>
<body style="width: 100%; height: 100%; margin: 0">
<div>
This is the Add-on Main Stage. Everyone in the call can see this.
</div>
<div>Hello, world!</div>
<script>
document.body.onload = () => {
helloWorld.initializeMainStage();
};
</script>
</body>
</html>
Next.js
Add a Page
to display the main stage. This page creates an
add-on session and side panel client on load, and
displays custom "hello, world" content:
'use client';
import { useEffect } from 'react';
import { meet } from '@googleworkspace/meet-addons/meet.addons';
export default function Page() {
/**
* Prepares the Add-on Main Stage Client, which signals that the add-on
* has successfully launched in the main stage.
*/
useEffect(() => {
(async () => {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
});
await session.createMainStageClient();
})();
}, []);
return (
<>
<div>
This is the Add-on Main Stage.
Everyone in the call can see this.
</div>
<div>Hello, world!</div>
</>
);
}
Replace CLOUD_PROJECT_NUMBER with the project number of your Google Cloud project.
Run the sample
To run locally, do the following:
Basic JS + Webpack
Run webpack in order to bundle your main.js
file along with the
Meet Add-ons SDK:
npx webpack
Open your SidePanel.html
file and MainStage.html
file in any browser.
This should look the same as the deployment of the Basic JS sample on GitHub
to a SidePanel.html
and MainStage.html
on GitHub Pages.
Next.js
Run Next:
next dev
Navigate to http://localhost:3000/sidepanel
or
http://localhost:3000/mainstage
. These should look the same as the
deployment of the Next.js sample on GitHub
to a SidePanel.html
and MainStage.html
on GitHub Pages.
Deploy the Meet Add-on
Set up the deployment of the add-on by following the instructions on how to Deploy a Meet Add-on.
Run the sample
Go to Meet.
Click Activities .
In the Your add-ons section, you should see your add-on. Select it to run the add-on.
Add more features
Now that you have a basic side panel and main stage, you can begin adding other features to your add-on:
- Collaboration using a Meet Add-on
- Messages between the main stage and side panel
- Promotion of the add-on through screen sharing
You are encouraged to use the sample Meet Add-ons on GitHub as references for building out these features.