[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.

Requirements

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

• HTML / CSS, Javascript

Integration Parameters

• apiKey

• widgetUrl () optionnel: “https://pd-measurement.fittingbox.com”

Integration

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

HTML 

• 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>
  </div>

•  Add open button

<button style="width: fit-content" onclick="launchMsrt()"> 
      MEASURE PD /* Text Label of the button */
</button>

 Javascript 

• 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", {
    ...params,
    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

CSS

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 */

#msrtWidgetIframeContainer{
  border-radius:5px;
}

CodePen