JavaScript

Load the Experiences SDK bundle with a script tag, wait for onBlazeSDKConnect, and then create a widget.

Add the SDK bundle

Add the script tag to your HTML page.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://sdk.mvp.fan/web-sdk/0.36.3/index.js"></script>
</head>
<body>
  <div id="wsc-container" style="height: 300px; width: 100%;"></div>

  <script>
    BlazeSDK.Initialize('YOUR_API_KEY');

    let widgetRowView;

    const rowRectangleTheme = BlazeSDK.Theme('row-rectangle');
    rowRectangleTheme.layoutStyle.statusLiveStyle.text = 'Now Live!';

    BlazeSDK.addDelegateListener(BlazeSDK.Delegations.onEventTriggered, (e) => {
      console.log("onEventTriggered", e.detail);
    });

    document.addEventListener("onBlazeSDKConnect", () => {
      const dataSource = BlazeSDK.DataSourceBuilder().labels({
        labels: BlazeSDK.LabelBuilder().singleLabel('live-stories'),
        maxItems: 4,
      })
      
      widgetRowView = BlazeSDK.WidgetGridView('wsc-container', {
        dataSource,
        theme: rowRectangleTheme,
        contentType: 'story',
        delegates: {
          [BlazeSDK.Delegations.onWidgetDataLoadCompleted]: (e) => {
            console.log("onWidgetDataLoadCompleted", e.detail);
            if (e.detail.contentCount === 0) {
              document.querySelector('#wsc-container').style.display = 'none';
            }
          }
        }
      });
    });

    setTimeout(() => {
      if (widgetRowView) {
        widgetRowView.reload();
      }
    }, 5000);
  </script>
</body>
</html>

Replace 'YOUR_API_KEY' with your actual API key.

Next steps

More widget types and APIs: BlazeSDK class
Choose what content to show: BlazeDataSourceType
Widget customization and theme tokens: Theme