[Example of integration] Pop-up integration

Example of PD Measurement integration in overlay mode. meaning that the experience will be placed on top of your customer journey page with a darkened background.



  • API Key for PD Measurement
    Sent by Fittingbox once contract was signed
    ie. 6hKjd9zh5gDa7C1mqY3UnbjOlsLvCfqly45hd1 (non functionnal)

  • HTML / CSS, Javascript

Integration Parameters


On the page where you want to integrate PD Measurement API,


  • Add a script tag containing the PD measurement API
<script src="//msrt-integration-api.fittingbox.com/index.js" type="text/javascript"></script>
  • Add a tag that will contain the integration. It is here encapsulated in a wrapper.

  <div class="overlay"></div>
  <div class="msrt-wrapper">
    <div id="msrt-container"></div>
  •  Add open button
<button style="width: fit-content" onclick="launchMsrt()"> 
     MEASURE PD /* Text Label of the button */


  • Set your acces with the API key received
 const params = {
apiKey: "6hKjd9zh5gDa7C1mqY3UnbjOlsLvCfqly45hd1", // Replace the value by the API Key received
  widgetUrl: 'https://pd-measurement.fittingbox.com', 

  • Add close popup function
window.closeMsrt = function () {
  msrtDiv.style.display = "none";
  overlayDiv.style.display = "none";
  • Define PD Measurement openning
const msrtDiv = document.querySelector(".msrt-wrapper");
const overlayDiv = document.querySelector(".overlay");

window.launchMsrt = function () {
  msrtDiv.style.display = "block";
  overlayDiv.style.display = "block";
  Msrt.createWidget("msrt-container", {
    onGetResultPd: (result) => console.log('onGetResultPd: ', result), // callback pd result, optional
  onTooManyErrors: () => console.log('onTooManyErrors'), // callback more than 3 errors, optional
  onClose : () => { window.closeMsrt() } // callback to hide the container

Optionnal : use the callbacks onGetResultPd and onTooManyErrors

Thoses callbacks can be used to be exploited by your own
Here in this example they are not used, only sent to the console-log

  • Use onGetResultPd  to automatically fill the right field in your website
  • Use onTooManyErrors to propose an exit to users who cannot have results
  • Use onClose to hide the container when the experience is finished, or cancelled


Define here the container 

#msrt-container {
  position: absolute;
  inset: 0;

/* Style for overlay. Takes all screen to prevent user to interact on your website elements when the experience is on */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
background-color: rgba(0, 0, 0, 0.8); /* Change overlay background color and opacity here */

/*Define here size of the container for smartphone size*/
.msrt-wrapper {
  display: none;
  position: fixed;
  inset: 0;
  margin: auto;
max-height: 700px;
max-width: 394px;

/*Here is the breakpoint defining the switch with Desktop size
the switch is automatically applied in PD Measurement.
Beware to keep the same value range for a breakpoint at 768px*/

@media (min-width: 768px) {
  .msrt-wrapper {
    inset: 2rem;
    max-width: 700px;

/* Style of the border. Change here properties for the container border. here a small radius */