Learn how to configure your custom widget to display the user information for different use cases.
The Custom Widget SDK allows you to configure your custom widget to display various user information based on your business use cases.
You must have already created a custom widget before proceeding with this tutorial.
In this tutorial, you will learn to display the following in your custom widget:
- Information of the signed-in user
- Custom profile fields of the signed-in user
You can configure your custom widget to display user information. Use one of the following functions to retrieve the current user information:
getUserInformation()
- returns the current user when no parameter is used
- use Staffbase User ID as parameter to fetch a specific user:
getUserInformation(userId)
getUserInformationByExternalId()
- use external ID of user as parameter to fetch a specific user:
getUserInformationByExternalId(externalId)
- use external ID of user as parameter to fetch a specific user:

- Pass the widget API element as a property to your custom widget component.
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} />, container10 );11 }12 ...13 };14};
- avatar
- department
- externalId
- firstName
- id
- lastName
- location
- phoneNumber
- position
Read more about the Staffbase User Model here and about the Staffbase User Identifier (external ID) here.
- Fetch the current user accessing the custom widget and display the user's attributes.
1import React, { useEffect, useState, FunctionComponent, ReactElement } from "react";2import { SBUserProfile, WidgetApi } from "widget-sdk";34export interface CustomWidgetProps {5 widgetApi: WidgetApi;6}78export const CustomWidget: FunctionComponent<CustomWidgetProps> = ({ widgetApi }: CustomWidgetProps): ReactElement | null => {910 const [user, setUser] = useState<SBUserProfile | null>(null);1112 useEffect(() => {13 widgetApi.getUserInformation().then((user) => {14 setUser(user);15 });16 }, []);1718 return <>19 { user ?20 <div>21 <h1 style={{ marginBottom: 10 }}>22 {user.firstName} {user.lastName} 🎉23 </h1>24 <p>is from the {user.location} office and works in the {user.department} department.</p>25 </div>26 :27 null28 }29 </>30};
You have configured your widget to display user information.
You can also display custom profile fields of users in your widget by using the custom profile field ID as an attribute key, example {user.customProfileFieldId}
.

On completing these steps, you will be familiar with the properties and functions required to display custom profile fields of a user.
- Pass the widget API element as a property to your custom widget component.
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} />, container10 );11 }12 ...13 };14};
- Fetch custom profile fields.
1import React, { useEffect, useState, FunctionComponent, ReactElement } from "react";2import { SBUserProfile, WidgetApi } from "widget-sdk";34export interface CustomWidgetProps {5 widgetApi: WidgetApi;6}78export const CustomWidget: FunctionComponent<CustomWidgetProps> = ({ widgetApi }: CustomWidgetProps): ReactElement => {910 const [user, setUser] = React.useState<UserListItem[]>();1112 useEffect(() => {13 widgetApi.getUserInformation().then((info) => {14 setUser(info);15 });16 }, []);1718 return user ? (19 <div>20 <p style={{ marginBottom: 10 }}>All user attributes:</p>21 <ul>22 {Object.entries(user).map(([key, value]) => (23 <li>{`${key}: ${value}`}</li>24 ))}25 </ul>26 </div>27 ) : null;28};
You have configured your the custom widget to display custom fields.