Get Platform Details for Your Custom Widget

Learn how to retrieve the platform information required for your custom widget.

Employee App
Staffbase Intranet

When building a widget for your Staffbase Employee App or Intranet, it’s important to use the correct base URL so that your widget can communicate with Staffbase APIs. In this tutorial, we’ll show you how to retrieve the base URL directly using the Staffbase Widget SDK, ensuring your widget always connects to the right domain.

This tutorial is for advanced developers.


You must have already created a custom widget before proceeding with this tutorial.

On completing this tutorial, you will be able to retrieve the platform information required for your custom widget.

  1. Pass the widget API element as a property to your custom widget component.
const factory = (Base, _widgetApi) => {
  return class CustomBlock extends BaseBlockClass implements BaseBlock {
    private _root: ReactDOM.Root | null = null;


    constructor() {
      super();
    }
    ...
    public renderBlock(container: HTMLElement): void {
      this._root ??= ReactDOM.createRoot(container);
      this._root.render(<CustomWidget {...this.props} widgetApi={_widgetApi} />);
    }
    ...
  };
};
  1. Retrieve platform details in your custom widget.

Your platform details include:

  • slug: A unique identifier of your platform, for example, myslug
  • branchId: A unique identifier of your platform. For example, 5e3bfa999f123c5e1cc5141d
  • web URL: The base URL of your platform, for example, https://myapp.showcase.com
import React, { useEffect, useState, ReactElement } from "react";
import { WidgetApi, BranchInformation } from "widget-sdk";


export interface CustomWidgetProps extends BlockAttributes {
  widgetApi: WidgetApi;
}


export const CustomWidget = ({ widgetApi }: CustomWidgetProps): ReactElement => {


  const [platformInfo, setPlatformInfo] = useState<BranchInformation | null>(null);


  useEffect(() => {
    setPlatformInfo(widgetApi.getBranchInformation());
  }, []);


  return <>
    <div>
      <h1>Your platform information</h1>
      {platformInfo && (
        <ul>
          <li><strong>Slug:</strong> {platformInfo.slug}</li>
          <li><strong>Branch ID:</strong> {platformInfo.branchId}</li>
          <li><strong>Web URL:</strong> {platformInfo.webUrl}</li>
        </ul>
      )}
    </div>
  </>;
};

You have retrieved the platform information in your custom widget.