[Getting started] How to integrate API PD Measurement?

Requirements

PD Measurement requires a unique API key (apiKey).

If you haven’t received your API key, please contact FittingBox Customer Support.

Integration

This integration can be implemented on any web page.

1. Add the script to your page

<head>
  ...
  <script src="https://msrt-integration-api.fittingbox.com/index.js" type="text/javascript"></script>
</head>

2. Add a container element

Add an element with the following ID to the page — this will host the PD Measurement experience when it opens:

<div id="msrt-container"></div>

This container will receive an iframe.
You must define its size in CSS, for example:

#msrt-container { width: 400px; height: 740px; }

3. Initialize PD Measurement

Once the script from step 1 is loaded, a global variable named Msrt becomes available on the page.
Use it to open PD Measurement with the createWidget function.

window.addEventListener("load", function () {
  // This example loads PD Measurement automatically on page load.
  // To open it via a button, see: 
  // https://www.fittingbox.com/en/resources/help-center/fc-how-do-i-integrate-the-tool-on-my-website

  Msrt.createWidget("msrt-container", {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // Replace with your own API key
  });
});

The first parameter is the ID of the PD Measurement container (from step 2).
The second parameter is an object containing PD Measurement options.

Additional Documentation

Options

param	type	description	example
apiKey (required)	string	The API key allowing the use of PD Measurement	Msrt.createWidget("msrt-container", { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // This is an example apiKey and must be updated with your own apiKey });
pdCopyClipboard (default: false)	boolean	Adds a button to copy results to the clipboard at the end of the experience. Useful when results are not retrieved via `onGetResultPd`.	Msrt.createWidget("msrt-container", { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // This is an example apiKey and must be updated with your own apiKey pdCopyClipboard: true, });
onGetResultPd	callback function (result: { pd: number, left?: number, right?: number }) => {}	Triggered once the user completes the experience. Returns binocular and (if available) monocular PDs.	Msrt.createWidget("msrt-container", { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", onGetResultPd: (result) => { console.log('Pupillary distance', result.pd); console.log('Left', result.left); console.log('Right', result.right); }, })
onTooManyErrors	callback function () => {}	Triggered after three failed attempts. Can be used to handle users who cannot complete the measurement.	Msrt.createWidget("msrt-container", { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", onTooManyErrors: () => { console.log('Too many errors'); }, })
onClose	callback function () => {}	Triggered when the experience is closed (either via the close button or the Finish button).	Msrt.createWidget("msrt-container", { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", onClose: () => { console.log('Closed, hide the msrt-container'); }, })
darkMode (default: false)	boolean	Enables the dark background theme. If set to `false`, the default light theme is displayed. See CodePen exemple : here	Msrt.createWidget("msrt-container", { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // This is an example apiKey and must be updated with your own apiKey darkMode: true, });
theme	string	Customizes color values (in hexadecimal). If any parameter is missing, default colors will be used. See How to customize colors See CodePen exemple : here	theme: { mainColor: mainColor.value, buttonTextColor: buttonTextColor.value, // #181B1C default dark mode instructionColor: instructionColor.value, // #FFFFFF default dark mode colorWrong: colorWrong.value, colorMid: colorMid.value, colorValid: colorValid.value, },
disableNpsRating (default: false)	boolean	Disables the NPS (user rating) step at the end of the experience.	Msrt.createWidget("msrt-container", { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // This is an example apiKey and must be updated with your own apiKey disableNpsRating: true, });