Widgets

Use the Embed SDK widgets to display 7shifts sales, labor, and scheduling data inside your application. Pass one or more component IDs in the components array when calling SevenEmbed.render().

Available widgets

Component ID	Description
`salesLabor`	Sales versus labor chart with KPI summary and date navigation.
`whosWorking`	Gantt-style timeline of scheduled shifts for a selected day.

Shared parameters

The following top-level parameters apply across all widgets. Pass them directly in the SevenEmbed.render() call.

Parameter	Type	Required	Default	Description
`locationId`	`number`	No	—	Filters widget data to a specific location. If omitted, data is aggregated across all locations the token can access.
`locale`	`string`	No	`'en-US'`	Controls date formatting and number grouping. Not used by all widgets — see individual widget notes below.
`currency`	`string`	No	`'USD'`	ISO 4217 code used to format monetary values. Not used by all widgets — see individual widget notes below.
`theme`	`'light'\| 'dark'`	No	`'light'`	Visual theme applied to all rendered widgets.

Sales & Labor

The salesLabor widget displays actual and projected sales and labor in a bar and line chart, with a KPI summary row and built-in date navigation.

locale and currency apply to this widget and control how monetary values and dates are formatted.

javascriptSevenEmbed.render({
  target: '#7shifts-dashboard',
  token: 'ACCESS_TOKEN_FROM_YOUR_BACKEND',
  companyGuid: 'YOUR_COMPANY_GUID',
  components: ['salesLabor'],
  locationId: 12345,
  locale: 'en-US',
  currency: 'USD',
  theme: 'light',
  componentOptions: {
    salesLabor: {
      date: '2026-03-30',
      range: 'week',
      showTitle: true
    }
  }
});

`componentOptions.salesLabor`

Parameter	Type	Required	Default	Description
`date`	`string`	No	Start of current week	Start of the initial date range in `YYYY-MM-DD` format. Users can navigate to other dates from the widget UI.
`range`	`'day' \| 'week' \| 'month'`	No	`'week'`	Initial date range for sales and labor data.
`showTitle`	`boolean`	No	`true`	Shows or hides the widget title.

📘
Users can change the date range and toggle chart series from the widget UI. These interactions are not configurable through SDK parameters.

Who's Working

The whosWorking widget displays a Gantt-style timeline of scheduled shifts for a selected day.

locale and currency do not apply to this widget. Shift times are formatted using the location timezone returned by the API.

javascriptSevenEmbed.render({
  target: '#7shifts-dashboard',
  token: 'ACCESS_TOKEN_FROM_YOUR_BACKEND',
  companyGuid: 'YOUR_COMPANY_GUID',
  components: ['whosWorking'],
  locationId: 12345,
  theme: 'light',
  componentOptions: {
    whosWorking: {
      date: '2026-04-01',
      showTitle: true
    }
  }
});

`componentOptions.whosWorking`

Parameter	Type	Required	Default	Description
`date`	`string`	No	Today	Date to display shifts for in `YYYY-MM-DD` format.
`showTitle`	`boolean`	No	`true`	Shows or hides the widget title.

Rendering multiple widgets

You can render both widgets together by passing both component IDs in the components array. Widgets render in the order they are listed.

javascriptSevenEmbed.render({
  target: '#7shifts-dashboard',
  token: 'ACCESS_TOKEN_FROM_YOUR_BACKEND',
  companyGuid: 'YOUR_COMPANY_GUID',
  components: ['salesLabor', 'whosWorking'],
  locationId: 12345,
  locale: 'en-US',
  currency: 'USD',
  theme: 'light',
  componentOptions: {
    salesLabor: {
      date: '2026-03-30',
      range: 'week',
      showTitle: true
    },
    whosWorking: {
      date: '2026-04-01',
      showTitle: true
    }
  }
});