Widgets

Descope Widgets are embeddable components designed to facilitate the delegation of operations to your application's users. Through the console, you can fully customize the display and functionality of your widgets according to your user's needs.

These widgets can be utilized in both B2B and B2C contexts, allowing your users and admins to perform various role, user, and project level management from within your application.

Creating A Widget

You can create a widget from the widgets page of your Descope console, starting from one of our widget templates.

After you create a widget, you can edit its design and logic. You can add/remove/alter buttons and text within the widget, as well as modify the design of the widget container and the components within. Within the User Profile widget, you can include custom attributes, and mark fields as Read-only and/or Mandatory.

To edit a specific part of the widget, simply click on it and utilize the Design & Behaviors toolbar on the right:

Inside preview mode you can see how the widget will look like on the client side, including actions and light/dark mode:

Read more about each user widgets here and admin widgets here.

Customizing a Widget

You can customize the Widget Component by passing in the following props. These customizations can be applied to any of the available widgets:

• theme: theme can be "light", "dark" or "os", which auto selects a theme based on the OS theme. Default is "light"
• styleId: style Id can be the id of the style you wish to run your widget with
• debug: debug can be set to true to enable debug mode

For example, this is how you would customize the User Management Widget:

import { UserManagement } from '@descope/react-sdk';
...
  <UserManagement
    widgetId="user-management-widget"
    tenant="tenant-id"
    theme="dark"
    styleId="my-style-id"
    debug="true"
  />

SDKs

You can use the below SDKs to implement widgets in your app.