Widgets

Display 7shifts sales, labor, and scheduling data inside your application by passing widget IDs in the components array of SevenEmbed.render().

Widgets render in the order you list them. Set up the SDK first — see Configuration for CORS allowlisting, loading the script, and the full render() reference.

How a widget loads

sequenceDiagram
    participant B as Your backend
    participant P as Your page
    participant S as Embed SDK
    participant A as 7shifts API
    B->>P: Short-lived token
    P->>S: SevenEmbed.render({ token, companyGuid, components })
    S->>A: Fetch data for each widget
    A-->>S: Sales, labor, and shift data
    S->>P: Widgets rendered into target
    Note over S,P: Errors surface through onError,<br/>not through a rejected promise

Mint the token on your backend and pass it in. Never embed a long-lived credential in page source.

Shared parameters

These apply to every widget and are passed at the top level of render(), not inside componentOptions.

Omitting locationId aggregates across locations. For a multi-location company this changes what the numbers mean, so pass it explicitly when your page is showing a single restaurant.

Sales and labor

salesLabor charts actual and projected sales against labor, with a KPI summary row and built-in date navigation.

locale and currency both apply to this widget.

SevenEmbed.render({
  target: '#7shifts-dashboard',
  token: '{TOKEN_FROM_YOUR_BACKEND}',
  companyGuid: '{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

date and range set the starting view only. Users can navigate to other dates and toggle chart series from the widget UI, and those interactions are not configurable or observable through the SDK. Build your page so the widget owning its own date state is acceptable.

Who's working

whosWorking shows a Gantt-style timeline of scheduled shifts for one day.

locale and currency have no effect here. Shift times use the location timezone returned by the API, which means the widget can display a different day boundary than the browser's local time for late-night venues.

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

componentOptions.whosWorking

This widget reflects published shifts. Draft schedules a manager is still building do not appear.

Render both widgets

Pass both IDs in components and give each one its own entry in componentOptions.

SevenEmbed.render({
  target: '#7shifts-dashboard',
  token: '{TOKEN_FROM_YOUR_BACKEND}',
  companyGuid: '{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
    }
  }
});

The two date values are independent. Setting them to different days is valid and will render a labor chart for one week beside a shift timeline for a day outside it. Keep them aligned unless you mean to do that.

Cleaning up

Call SevenEmbed.destroy() with the same target when unmounting the page or component.

SevenEmbed.destroy('#7shifts-dashboard');

Skipping this in a single-page app leaves listeners and injected styles behind.

Next

Widget failures surface through the onError callback rather than a thrown exception, so a page without onError fails silently. See Error handling.