Configuration

Both lightbox() and inline() accept a configuration object. The only required property is id.

Properties

Property	Type	Default	Description
`id`	`string`	—	Required. The content module ID. This ID is supplied during the production process and can be found on the content module page in this portal.
`variant`	`string`	`null`	Positional variant code selecting which version of each chapter to show. See Variants.
`content`	`Record<string, string>`	`{}`	Personalisation data for the content module. Keys match the replacement patterns shown on the content module page (e.g. `vA`, `vC`).
`dataOrigin`	`string`	CDN	URL of the `vc` folder for self-hosted content. See Self-hosting.
`dataPath`	`string`	`"data.json"`	Override the data file path relative to the data origin.
`mode`	`"watch" \| "read"`	`"watch"`	`"watch"` plays the standard video experience. `"read"` provides an accessible text-based view. Can be changed at runtime with `setMode()`.
`branding`	`object`	`{}`	Customise colors, typography, fonts, and logo. See Branding.
`wrapperElement`	`string`	`"body"`	CSS selector for the container element. Inline player only.
`targetElement`	`string`	—	CSS selector for the element(s) that trigger the lightbox (e.g. `#play-button` or `.play-buttons`). If not set, use `show()` and `hide()` to control manually. Lightbox player only.
`showExitPlayerButton`	`boolean`	`true`	Whether to show the exit button. Lightbox player only.
`nextSteps`	`object`	—	Content displayed at the end of the journey: heading, body text, and action buttons. See Next Steps below.
`unrecoverableErrorCustomHtml`	`string`	—	Custom HTML to display when an unrecoverable error occurs. Supports buttons, links, and formatted text.

Player methods

Both player types return an instance with these methods:

Method	Description
`on(event, callback)`	Listen for player events. See Events.
`destroy()`	Remove the player from the DOM and clean up all resources.
`setMode(mode)`	Switch between `"watch"` and `"read"` mode at runtime.

The lightbox player also has:

Method	Description
`show()`	Open the lightbox overlay.
`hide()`	Close the lightbox overlay.

Next Steps

The nextSteps property defines content displayed at the end of the viewer's journey. It includes a heading, optional body text, and action buttons.

lightbox({
  id: 'YOUR_MODULE_ID',
  nextSteps: {
    header: {
      headingText: 'What happens next?',
      bodyText: 'Choose one of the options below.',
    },
    steps: [],
  },
})

Full example

import { lightbox } from '@fcxtech/player'

const player = lightbox({
  id: 'YOUR_MODULE_ID',
  variant: 'bbabba',
  content: {
    vA: '03/15/2026',
    vC: '$3,500.00',
  },
  branding: {
    colors: {
      brandColor1: 'rgb(186 48 0)',
      brandColor1Text: 'rgb(255 255 255)',
    },
    logo: {
      imageUrl: 'https://example.com/logo.png',
      imageWidth: '200px',
    },
  },
  targetElement: '#play-button',
})

player.on('complete', (event) => {
  console.log('Video completed', event)
})