Skip to main content

Getting Started with Maestro Web SDK

This guide will walk you through the process of integrating the Maestro Web SDK into your web application for BBD (Browser Based Devices) applications.

Prerequisites​

Before you begin, ensure you have:

  • A Maestro site ID
  • A web application where you want to integrate the SDK

Installation​

Add the Maestro Web SDK to your project:

npm install maestro-web-sdk

Basic Integration Steps​

1. Import the SDK​

import SDK from 'maestro-web-sdk';

2. Configure the SDK​

SDK.configure({
  siteID: 'your-site-id',
});

3. Initialize Event​

const eventID = 'your-event-id';
const delegate = new MaestroEventDelegate();

const event = await SDK.userDidStartWatchingEvent(eventID, delegate);

4. Render the Panel​

// This ID should match the ID of the DOM element where you want to render the panel
await SDK.renderPanel('panel-container');

// ...
ReactDOM.render(<div id="panel-container" className="panel-container"></div>, document.getElementById('root'));

5. Handle Focus Management​

Implement proper focus management between your application and the SDK UI. See the Focus Management section for details.

6. Clean Up​

When the user stops watching the event, clean up resources:

// Notify the SDK
SDK.userDidStopWatchingEvent(eventID);

Next Steps​

Once you have completed the basic integration, explore the following sections to learn more about the SDK's capabilities:

Last updated on