Apply App or Intranet Theme to Your Custom Widget

Aligning your custom widget to the style and theme of your App or Intranet gives brand consistency and your users the feeling that your custom widget is a part of their app and intranet. In this tutorial, you will learn how to align your custom widget to the same color scheme used in your App or Intranet.

On completing this tutorial, you will be familiar with the properties and functions required to align with the text and the background color of your Staffbase App or Intranet.

1. Pass the widget API element as a property to your custom widget component.

Copy To Clipboard
1const factory = (Base, widgetApi) => {
2  return class CustomBlock extends BaseBlockClass implements BaseBlock {
3    constructor() {
4      super();
5    }
6    ...
7    renderBlock(container): void {
8      ReactDOM.render(
9        <CustomWidget {...this.props} widgetApi={widgetApi} />, container
10      );
11    }
12    ...
13  };
14};

2. Apply the text and background color of the Staffbase App / Intranet to the main div element of your custom widget.

Copy To Clipboard
1import React, { useEffect, useState, FunctionComponent, ReactElement } from "react";
2import { WidgetApi, ColorTheme } from "widget-sdk";
3
4export interface CustomWidgetProps {
5  widgetApi: WidgetApi;
6}
7
8export const CustomWidget: FunctionComponent<CustomWidgetProps> = ({ widgetApi }: CustomWidgetProps): ReactElement => {
9
10  const [theme, setTheme] = useState<ColorTheme | null>(null);
11
12  useEffect(() => {
13    setTheme(widgetApi.getLegacyAppTheme());
14  }, []);
15
16  return <>
17    <div style={{ 
18      color: theme?.textColor, 
19      backgroundColor: theme?.bgColor, 
20      padding: "20px" 
21    }}>
22      <div>Your widget content</div>
23    </div>
24  </>
25};
26

You have applied Staffbase App or Intranet text and background color to your custom widget.