Installation and Integration with Maestro Web SDK
This section will walk you through the process of installing and integrating the Maestro Web SDK into your web application.
Prerequisites
Before you begin, ensure you have:
- Your Maestro
siteIDand thepageIdof the page you want to load. - A web application where you want to integrate the SDK.
- React 16+ and
react-domavailable in your app — they are peer dependencies of the SDK.
siteID and pageIdYour siteID identifies your Maestro site, and a pageId identifies a specific page within it. Both are available in the Maestro admin UI on maestro.io. If you can't locate them, reach out to our support team.
Installation
Add the Maestro Web SDK to your project:
npm install @maestro_io/maestro-web-sdk
or with yarn:
yarn add @maestro_io/maestro-web-sdk
Peer dependencies
react and react-dom are peer dependencies — the SDK does not bundle them and expects your application to provide them (React 16 or newer). If your app doesn't already depend on them, install them alongside the SDK:
npm install react react-dom
Basic Integration Steps
1. Import the SDK
The Maestro Web SDK follows a singleton pattern, providing a single instance that you can import and use throughout your application:
import SDK from "@maestro_io/maestro-web-sdk";
2. Configure the SDK
SDK.configure({
siteID: "your-site-id",
});
3. Initialize Event
MaestroEventDelegate below is your own class implementing the
IMaestroEventDelegate interface — the SDK
exports the interface, not a ready-made delegate, so you provide the
implementation that handles SDK callbacks (playback, auth, analytics, etc.).
const delegate = new MaestroEventDelegate(); // Your implementation of IMaestroEventDelegate
const event = await SDK.userDidStartWatchingEvent({
pageId: "YOUR_PAGE_ID", // Your Maestro Site's page ID to load the config from.
delegate,
});
For a complete example of integration, refer to our Example Repo for the Maestro Web SDK.