Widget playground

Try the widget on a demo session of the test environment. Change the element attributes and see the result at once, select seats to watch the events the widget sends, and copy the HTML tab as a starting point for your page.

Preview
HTML

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Choose your seats</title>
    <!-- Test environment. In production, use https://widget.oneboxtds.com/widget-sdk-v1.js -->
    <script type="module" src="https://widget.oneboxtds.net/widget-sdk-v1.js"></script>
    <script>
      window.addEventListener('DOMContentLoaded', () => {
        const core = onebox.widget.getModule('core');
        core.onOrderChange((order) => console.log('order', order));
        core.onError((error) => console.error('widget error', error));

        onebox.widget.init({
          channelId: 1752,
          sessionId: 509945,
          lang: 'en-US',
        });
      });
    </script>
  </head>
  <body>
    <ob-widget-seats-selection
      with-summary
      with-summary-promos
      with-view-navs>
    </ob-widget-seats-selection>
  </body>
</html>

Events

Include hover events

Interact with the widget: its events appear here.