TypeScript

Install the Experiences Web SDK, initialize it with an API key, and render a widget into a container element.

Install

To install the Web SDK, use npm or yarn.

  npm install @wscsports/[email protected]

Add a container element

Create an element for the widget to render into. Set a height so the widget can lay out correctly.

<div id="wsc-container" style="width: 100%; height: 500px;"></div>

Import and initialize

Initialize the SDK during your app startup flow.

import * as BlazeSDK from "@wscsports/blaze-web-sdk";

await BlazeSDK.Initialize("YOUR_API_KEY");

After initialization completes, the SDK fires onBlazeSDKConnect. Create widgets and call SDK APIs after that event.

Create a widget (example)

import { useEffect } from "react";
import * as BlazeSDK from "@wscsports/blaze-web-sdk";

const StoriesWidget = () => {
  useEffect(() => {
    const initializeSDK = async () => {
      await BlazeSDK.Initialize("YOUR_API_KEY");

      const handleSDKConnect = () => {
        const myTheme = BlazeSDK.Theme("row-rectangle");
        myTheme.layoutStyle.labelStyle.fontSize = "10px";

        BlazeSDK.WidgetRowView("wsc-container", {
          labels: "top-stories",
          contentType: "story",
          theme: myTheme,
        });
      };

      document.addEventListener("onBlazeSDKConnect", handleSDKConnect);
    };

    initializeSDK();

    return () => {
      document.removeEventListener("onBlazeSDKConnect", handleSDKConnect);
    };
  }, []);

  return <div id="wsc-container" style={{ width: "100%", height: "500px" }} />;
};

export default StoriesWidget;

Next steps

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