To embed a spotlight session to a web page, you need to load our recorder library.

That’s a script and a stylesheet:

<link rel="stylesheet" href="https://workbench.mercuryanalytics.com/api/spotlight.css">
<script src="https://workbench.mercuryanalytics.com/api/spotlight.js"></script>

The spotlight tool has two modes of operation. In the “fullscreen” mode, the spolight image is displayed using the browser’s fullscreen mode, where it takes over the entire screen. The interaction is triggered by adding a button to the page, marked with the data-hg-spotlight attribute as follows:

<button type="button" data-hg-spotlight="1760_bcw_nike" data-hg-rid-"000000">Begin</button>

Mobile browsers don’t support the fullscreen mode, so as an alternative that supports mobile browsers, the spotlight image can be embedded into the page as an ordinary image. Once again, the data-hg-spotlight attribute marks the image as a spotlight.

<img data-hg-spotlight="1760_bcw_nike" data-hg-rid="000000">

In both cases, the “1760_bcw_nike” is the id we gave you to refer to the spotlight, and the “000000” should be replaced with the your respondent id.

It’s safe to add the stylesheet and script to your survey’s template, since it does nothing when there’s no marker tag to tell it where to put the image.

Options

• Finalize data: Respondents are normally not marked as “complete” by the spotlight process, under the assumption that there are potentially more questions being asked by the survey. Adding data-hg-finalize="true" to the marker div will cause the respondent to marked as “completed” in the workbench.
• Scrolling images: In the fullscreen mode, the default is to assume that the entire image should be visible, and is displayed at the largest size that fits the screen. Alternatively, by including the attribute data-hg-fit="width", the image will be displayed at the full width of the screen, and will scroll vertically as needed.

Events

• hg-spotlight-complete: The div will fire a JavaScript event to signal when the video is done. The event type is mercury:complete. You can initially hide or disable your survey’s “Next” button and enable/reveal it when the event is fired, or else you can simply use the event to submit the form.
• hg-spotlight-failed: The div will fire this event to signal that the user’s browser failed to enter full-screen mode.
• hg-page-bottom: The div will fire this event to signal that the user scrolled far enough to see the bottom of the image.