Skip to main content

Iframe PDP Integration

This guide will walk you through how to create an iFrame integration with Beauty By Holition's Neo Beauty Studio on your product display page (PDP). The integration will allow you to display Beauty By Holition's virtual try-on technology within your PDP, 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, ensuring that it appears in the same space as the product packshot image.

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-pdp.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 on your PDP, the following steps can be taken:

  1. Create an HTML file with necessary elements such as product packshot image, product description, button, and iframe.
  2. Add CSS to style the elements and create a responsive design.
  3. Write JavaScript to handle the creation and destruction of the iframe when the button is clicked.
  4. Obtain the necessary deployment URL and CMS client ID from our team.
  5. Integrate these values into the JavaScript code to dynamically create the iframe URL.

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

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 PDP Integration Example</title>
  </head>
  <body>
    <!-- BBH Logo and title -->
    <img class="logo" src="./img/new_logo.png" alt="BBH Logo" />

    <!-- Product packshot and description container -->
    <div class="product-container">
      <img
        class="product-packshot"
        src="./img/packshot.webp"
        alt="Product Packshot"
      />
      <div id="wrap">
        <span class="close-text">CLOSE</span>
        <span class="close-button">&times;</span>
        <iframe id="bbh-iframe" frameborder="0" allow="camera"></iframe>
      </div>
      <div class="text-container">
        <h1>Neo Beauty Studio iFrame PDP Integration Example</h1>

        <!-- Introduction -->
        <p>
          This example demonstrates how to insert an iFrame into an existing
          place on a PDP using 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">Try-On Product</button>
      </div>
    </div>
  </body>
</html>

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.