Skip to main content

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 siteID and the pageId of the page you want to load.
  • A web application where you want to integrate the SDK.
  • React 16+ and react-dom available in your app — they are peer dependencies of the SDK.
Finding your siteID and pageId

Your 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.