Skip to content

Live Creatives Player Widget

Add a real-time feed of the creatives currently playing on your digital screens directly to your website using the Live Creatives Player Widget.

This guide covers:

  • Creating a Private Lucit Application with the Widgets capability
  • Granting the correct operator permissions
  • Creating a Public token for your website
  • Embedding the Live Creatives Player Widget on your site
  • Customizing which screens and formats appear
  • Adjusting the widget styles

This widget is primarily designed for Media Owner / Operator websites that want to showcase live creatives from their network.

Prerequisites

Before you start, you should:

  • Have a Lucit account with access to:
  • Your Personal Profile (for creating apps)
  • At least one Operator Account (for attaching the app to your screens)
  • Be able to:
  • Edit the HTML / template of your website (or manage embeds in your CMS)
  • Add <script> tags and small JavaScript configuration blocks to your pages
  • Have Developer Mode enabled on your profile. (Personal Profile -> Settings -> Developer Mode)

1. Create a new Private Application

The widget is powered by a Lucit Application. Youll create a private app tied to your personal profile.

  1. Switch to your Personal Profile in Lucit.
  2. With Developer Mode enabled, go to Apps.
  3. Click New Application.
  4. Choose:
  5. Name  for example: My Company Website Widgets
  6. Class  Private
  7. Save the application.

You can adjust other app-level settings (icon, description, etc.) later as needed.

2. Enable the Widgets capability

To use this app for website embeds, you must enable the Widgets capability.

  1. Open your new application.
  2. Go to the Capabilities tab.
  3. Locate the Widgets capability.
  4. Turn the Widgets switch on.

This tells Lucit that this app is allowed to serve widget-based content (like the Live Creatives Player Widget).

3. Configure operator permissions

The widget needs permission to read creatives and related analytics for your operators screens.

On the Permissions tab of your app:

  1. Select the operator account(s) that will use this widget (if required by the UI).

  2. For your operator, enable at least the following permissions:

  3. account.view

  4. account.viewContent
  5. account.viewAnalytics
  6. agency.view
  7. agency.viewAnalytics

These allow the widget to:

  • Read which creatives are playing on your screens.
  • Access basic analytics data used by the player.

Note: This widget is designed for Media Owner / Operator websites. If you are an advertiser or agency, check with your operator or Lucit support about how to expose a similar experience.

4. Create a Public token

The website widget uses a Public token to fetch content.

  1. Go to the Tokens tab of your application.
  2. Click New Token.
  3. Choose Public token.
  4. Click CREATE
  5. Save the token.

Copy the generated Public Token value. Youll need it in your website embed code, typically as {PUBLIC_TOKEN}.

5. Attach the app to your Operator Account

Now that you have a Widget-capable application with a Public token, attach it to your Operator account so it can access your real-time creatives.

  1. Switch from your Personal Profile to your Operator Account using the profile switcher.
  2. Go to Settings.
  3. Scroll to Apps & Data Sources.
  4. Click Add New.
  5. Find the app you just created (for example, My Company Website Widgets) and add it.
  6. Confirm that your widget app now appears in your operators list of apps.

At this point, the app is:

  • Capable of serving Widgets.
  • Authorized to read creatives and analytics from your operator account.
  • Identified by a Public token that you can safely embed on your website.

6. Embed the Live Creatives Player Widget

The Live Creatives Player Widget is configured using a global queue, window.lcw, and a script loaded from Lucit.

Basic embed example

Replace {PUBLIC_TOKEN} with the Public token you created in the Tokens tab of your Lucit app.

<div id="lc-widget-a785hgyftd68">Lucit for Operators</div>
<script>
  (window.lcw = window.lcw || []).push({
    id: "lc-widget-a785hgyftd68",
    widget: "board_images",
    board_identifiers: [],
    token: "{PUBLIC_TOKEN}",
    containerStyle: {},
    imageStyle: {},
    infoStyle: {}
  });
</script>
<script
  src="https://lucit.app/embed/v1/widgets.js"
  charset="utf-8"
  async></script>

Key points:

  • The <div> id (for example, lc-widget-a785hgyftd68) must match the id value in the widget configuration object.
  • The configuration is pushed into window.lcw before widgets.js is loaded.
  • The script at https://lucit.app/embed/v1/widgets.js initializes the widget system and renders each queued widget.

You can place the <div> where you want the widget to appear in the page layout, and keep the <script> tags near it or at the bottom of the document body.

7. Widget configuration options

Each widget configuration object pushed to window.lcw has the following structure:

{
  id: string,              // required: ID of the target <div>
  widget: string,          // required: widget type, currently 'board_images'
  token: string,           // required: Public token from your Lucit app

  board_identifiers?: string[],       // optional: filter by specific vendor board identifiers
  digital_board_formats?: string[],   // optional: filter by format codes

  containerStyle?: { [key: string]: string }, // optional: styles applied to outer container
  imageStyle?: { [key: string]: string },     // optional: styles applied to the <img>
  infoStyle?: { [key: string]: string },      // optional: styles applied to the info text

  use_lucit_xr?: boolean   // optional: use Lucit XR images if available
}

7.1 Required fields

  • id  The id of the DOM element where the widget should render.
  • widget  The widget type. For the Live Creatives Player Widget, this must be 'board_images'.
  • token  Your applications Public token.

7.2 Optional filters

board_identifiers

Use board_identifiers to specify an array of your vendor digital board IDs based on your vendor-supplied board_identifier.

(window.lcw = window.lcw || []).push({
  id: "lc-widget-a785hgyftd68",
  widget: "board_images",
  token: "{PUBLIC_TOKEN}",
  board_identifiers: ["ND0002.1", "ND0003.1", "ND0099.2"]
});

digital_board_formats

Use digital_board_formats to specify only certain screen formats (for example, bulletin).

(window.lcw = window.lcw || []).push({
  id: "lc-widget-a785hgyftd68",
  widget: "board_images",
  token: "{PUBLIC_TOKEN}",
  digital_board_formats: ["bulletin"]
});

You can combine board_identifiers and digital_board_formats to fine-tune the creatives shown in the widget.

See Screen Formats Reference for a full list of available format codes

8. Styling the widget

The widget exposes three style objects you can use to control its appearance:

  • containerStyle  Styles applied to the outer container around the image.
  • imageStyle  Styles applied to the <img> element.
  • infoStyle  Styles applied to the information block below the image.

These use JavaScript object syntax with camelCase CSS property names, for example:

  • This CSS: max-width: 600px;
  • Is written as this JS: maxWidth: "100%"

8.1 Container style example

(window.lcw = window.lcw || []).push({
  id: "lc-widget-a785hgyftd68",
  widget: "board_images",
  token: "{PUBLIC_TOKEN}",
  containerStyle: {
    maxWidth: "600px",
    margin: "0 auto",
    border: "1px solid #808080",
    borderRadius: "5px",
    padding: "25px 5px"
  }
});

8.2 Image style example

(window.lcw = window.lcw || []).push({
  id: "lc-widget-a785hgyftd68",
  widget: "board_images",
  token: "{PUBLIC_TOKEN}",
  imageStyle: {
    width: "100%",
    borderRadius: "5px",
    display: "block",
    marginLeft: "auto",
    marginRight: "auto"
  }
});

8.3 Info style example

(window.lcw = window.lcw || []).push({
  id: "lc-widget-a785hgyftd68",
  widget: "board_images",
  token: "{PUBLIC_TOKEN}",
  infoStyle: {
    width: "100%",
    textAlign: "center",
    padding: "8px 0 3px 0",
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
  }
});

You can combine all of these into a single configuration object if you prefer.

9. Refresh behavior

The widget periodically refreshes its content to keep the display up to date:

  • widgets.js calls an internal drawQueuedWidgets() function on load.
  • It then re-runs this function every few seconds (controlled by an internal redrawInterval).

This allows the widget to automatically update as new creatives play on your screens.

10. Best practices

  • Use a dedicated Website Widgets app
    Keep widget access separate from other integrations by creating a dedicated Private application for website embeds.

  • Limit permissions
    Grant only the permissions required (view, viewAnalytics) for the relevant operator accounts.

  • Scope your boards when appropriate
    Use board_identifiers or digital_board_formats to avoid showing creatives from every screen in large networks unless that is intentional.

  • Match your sites design
    Customize containerStyle, imageStyle, and infoStyle so the widget looks and feels native on your website.

  • Test on a non-public page first
    Embed the widget on a staging or hidden URL to validate behavior before linking it from your main navigation.

11. Troubleshooting

No creatives appear

  • Verify that:
  • The token is correct and corresponds to a Public token.
  • The app has the Widgets capability enabled.
  • The app is attached to the correct Operator account.
  • The operator has active campaigns / creatives on the selected boards.
  • Temporarily remove board_identifiers and digital_board_formats to test with a broader selection.

Authorization or API errors

  • Check that the app has the view and viewAnalytics permissions for the operator.
  • Confirm that the app is correctly added under Settings → Apps & Data Sources for your operator.

Widget does not render or JavaScript errors

  • Ensure:
  • widgets.js is loaded from https://lucit.app/embed/v1/widgets.js.
  • The <div> with the matching id exists before the widget configuration is pushed.
  • There are no syntax errors in your configuration object (missing quotes, trailing commas, etc.).