Skip to main content

Panel Integration

Overview​

This section walks you through integrating panels into your Maestro Web SDK implementation. Panels provide interactive modules that exist outside the main video player interface.

Integration Steps​

MaestroPanel is the container for all panels configured on your specific maestro.io page. New pages, by default, are created only with a chat panel but other panel types can be added and configured through the settings for that specific page.

1. Initialize the IMaestroEventDelegate interface​

Before rendering the Maestro panel, you must initialize the IMaestroEventDelegate interface. This interface defines a set of methods that your application must implement to enable seamless communication between the Maestro Web SDK and your application.

const delegate = new MaestroEventDelegate(); // Your implementation of IMaestroEventDelegate
const event = await SDK.userDidStartWatchingEvent({
  pageId: 'YOUR_PAGE_ID',
  delegate
});

2. Render the Maestro panel into a specific DOM element​

To display the Maestro panel in your web application, you must render it into a specific DOM element. This involves two parts: defining the target container and instructing the SDK to render into it.

The container element must already exist in the DOM before you call renderPanel() — the SDK looks it up by id and mounts into it. Render your container first, then call renderPanel():

import ReactDOM from "react-dom"; // React and ReactDOM are peer dependencies of the SDK

// 1. Render the container element first so it exists in the DOM.
ReactDOM.render(
  <div id="panel-container" className="panel-container"></div>,
  document.getElementById("root")
);

// 2. Tell the SDK to render the Maestro panel into that container.
//    renderPanel resolves to an unmount function — keep it to clean up later.
const unmountPanel = await SDK.renderPanel("panel-container");
note

The string you pass to renderPanel() must exactly match the id of the DOM element.

When you are done with the panel, call the function returned by renderPanel() to unmount it:

await unmountPanel();

Best Practices​

  • Clean Up Your Events: When the user stops watching an event, make sure to clean up any resources using userDidStopWatchingEvent().
  • Unmount Panels When Done: Be sure to unmount panels from the DOM using the callback function from renderPanel().
Last updated on