Iframe Modal Integration

This guide will walk you through how to create a pop-over modal iFrame integration with Beauty By Holition's Neo Beauty Studio. The iFrame will allow you to display Beauty By Holition's virtual try-on technology on your website, making it easier for your customers to see how products will look on them before they buy.

The example provided in this guide dynamically creates and destroys the iFrame, preventing the page from loading slowly or using CPU resources when the iFrame is not in use. However, there are alternative ways to implement the integration based on your needs and technical capabilities.

info

We recommend setting the iFrame to at least 600px in height and 400px wide. You can see a live demo of the integration in action by visiting the following link: https://sandbox.holitionbeauty.com/neo.html

important

Without camera access, the virtual makeup experience cannot operate. It's essential to integrate the iframe with the following parameter: allow="camera". If you are integrating the Neo Beauty Studio within another iframe, both the Neo Beauty Studio and the parent iframe should include the allow="camera" parameter.

Steps to Create the Demo

To create the Neo Beauty Studio iFrame integration example, the following steps were taken. These steps will help you understand the process that was followed to create the demo and guide you in creating your own integration.

Created HTML file with necessary elements such as logo, text, button, and modal.
Added CSS to style the elements and create a responsive design.
Write JavaScript to handle the creation and destruction of the iFrame in the modal.
Obtained the necessary deployment URL, CMS client ID, and product filter string from our team.
Integrated these values into the JavaScript code to dynamically create the iFrame URL.

Now, let's dive into the details of each step.

1-index.html
2-index.css
3-main.js

Here's an example of the HTML code required to create the iFrame:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Neo Beauty Studio iFrame Modal Integration Example</title>
  </head>
  <body>
    <!-- BBH Logo and title -->
    <img src="./img/new_logo.png" alt="BBH Logo" />
    <div class="text-container">
      <h1>Neo Beauty Studio iFrame Modal Integration Example</h1>

      <!-- Introduction -->
      <p>
        This example demonstrates how to create a modal iFrame that integrates
        with Beauty By Holition's Neo Beauty Studio. <br /><br />
        For full documentation, please visit
        <a href="https://vto.holitionbeauty.com/branch/V2/develop/vto-docs/docs/intro"
          >docs</a
        >. <br /><br />Visit our
        <a href="https://holitionbeauty.com/">website</a> for more information.
      </p>

      <!-- Button to open modal -->
      <button id="myBtn">Open iFrame Modal</button>
    </div>

    <!-- Modal window for iFrame -->
    <div id="myModal" class="modal">
      <div class="modal-wrap">
        <span class="close-text">CLOSE</span>
        <span class="close-button">&times;</span>
        <iframe id="bbh-iframe" frameborder="0" allow="camera"></iframe>
      </div>
    </div>
  </body>
</html>

Here's the CSS required to style the elements in the HTML:

/* Styling for the close button */
.close-button {
  top: 3px;
  right: 0;
  font-size: 1.2rem;
  cursor: pointer;
  position: relative;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  height: 19px;
  width: 15px;
  overflow: hidden;
  line-height: 0.9;
  padding-right: 5px;
}

.modal-wrap {
  width:auto;
  height:auto;
  text-align: right;
  color: rgba(255,255,255,0.7);
  font-family: monospace;
  font-weight: lighter;
  font-size: 12px;
}

.close-text {
  padding: 0;
  margin: 0;
  position: relative;
  top: -3px;
  right: 0px;
}

/* Center the title and intro text */
.text-container {
  max-width: 600px;
  margin: 20vh auto 0 auto;
  display: block;
  justify-content: center;
  align-items: center;
}

h1,
p {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

/* Set the logo image size */
img {
  max-width: 200px;
  display: block;
  margin: 0 auto;
}

/* Modal styling */
#myModal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}

#myModal iframe {
  height: 80vh;
  width: calc(0.75 * 80vh);
  border: none;
  max-width: 95vw;
  min-height: 600px;
  display: block;
  margin: 0 auto;
}

/* Button styling */
#myBtn {
  display: block;
  margin: 30px auto;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  background-color: #008cba;
  color: white;
  cursor: pointer;
}

Here's the JS code required to create and destroy the iFrame:

// Get the modal and button elements
var modal = document.getElementById('myModal');
var btn = document.getElementById('myBtn');
var iframe = document.getElementById('bbh-iframe');

// Get the close button element
var closeButton = document.querySelector(".modal-wrap");

// When the close button is clicked, hide the modal and destroy the iframe
closeButton.onclick = function() {
  modal.style.display = "none";
  iframe.src = "";
};

// When the button is clicked, show the modal and create the iframe
btn.onclick = function () {
  modal.style.display = 'flex';
  iframe.src =
    'https://<DEPLOYMENT-URL>?cms-client-id=<CMS-CLIENT-ID>&filter=<PRODUCT-FILTER-STRING>';
};

// When the user clicks on the close button or outside the modal, hide the modal and destroy the iframe
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = 'none';
    iframe.src = '';
  }
};

Please note that you will need to replace the following parameters in the iframe.src URL with your specific values provided by us:

<DEPLOYMENT-URL>: Replace with the URL provided by us for your brand's Neo Beauty Studio deployment.
<CMS-CLIENT-ID>: Replace with the CMS client ID provided by us for your brand's account.
<PRODUCT-FILTER-STRING>: Replace with the product filter string that matches the products you want to display in the iFrame. This will be provided by us for your specific use case.

Steps to Create the Demo​

Steps to Create the Demo