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 eventID = "your-event-id";
const delegate = new MaestroEventDelegate(); // Your implementation of IMaestroEventDelegate
const event = await SDK.userDidStartWatchingEvent(eventID, 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.

await SDK.renderPanel("panel-container");

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

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

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