Configuration

Before your widgets can load, two infrastructure requirements must be in place — one submitted to 7shifts, one configured on your side. Once those are satisfied, initializing the SDK is a single function call.

Security Configuration

CORS Allowlisting

The 7shifts API requires your application domains to be explicitly allowlisted before any widget can communicate with api.7shifts.com. This is submitted to 7shifts and configured on our side. To request allowlisting, provide your exact origins via your shared Slack channel or by email to your 7shifts partner representative.

📘
CORS NOTE Allowlist requests take up to 5 business days to configure. Submit your domains before beginning development.

Requirements:

Provide the exact origin for each environment, including protocol, subdomain, and domain (e.g. https://app.partnerdomain.com).
A maximum of 3 environments are supported (e.g. Production, Staging, and Development).
Wildcards are not supported. Dynamic origins such as https://*.domain.com cannot be used.
Localhost is not supported. A valid staging URL is required for development.

Content Security Policy

If your application uses a Content Security Policy with a nonce, pass the nonce value in the nonce field when calling SevenEmbed.render(). The SDK applies it to all dynamically injected <style> tags.

javascriptSevenEmbed.render({
  target: '#7shifts-dashboard',
  token: 'ACCESS_TOKEN_FROM_YOUR_BACKEND',
  companyGuid: 'YOUR_COMPANY_GUID',
  nonce: 'YOUR_CSP_NONCE'
});

##

Initializing the SDK

Load the SDK from the 7shifts CDN and call SevenEmbed.render() with your configuration. Both <script> tags must use type="module".

<div id="7shifts-dashboard"></div>

<script type="module" src="https://cdn.7shifts.com/embed/v1/loader.js"></script>
<script type="module">
  SevenEmbed.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
      }
    },
    onError: function (error) {
      console.error('Widget error:', error);
    }
  });
</script>

Configuration reference

Field	Type	Required	Default	Description
`target`	`string \| HTMLElement`	Yes	—	CSS selector or DOM element to render into.
`token`	`string`	Yes	—	OAuth access token generated by your backend.
`companyGuid`	`string`	Yes	—	Company GUID provided during partner onboarding.
`components`	`string[]`	No	`['salesLabor']`	Widgets to render, in display order.
`locationId`	`number`	No	—	Filters widget data to a specific location.
`locale`	`string`	No	`'en-US'`	Locale used for date, number, and currency formatting.
`currency`	`string`	No	`'USD'`	ISO 4217 currency code used for monetary values.
`theme`	`'light' \| 'dark'`	No	`'light'`	Visual theme for rendered widgets.
`componentOptions`	`object`	No	—	Per-widget configuration.
`onError`	`function`	No	—	Callback that receives an `EmbedError` when a widget or SDK-level error occurs.
`nonce`	`string`	No	—	CSP nonce applied to dynamically injected `<style>` tags.

Removing the SDK

Call SevenEmbed.destroy() when navigating away from the page or unmounting the component that contains the widget.

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