Skip to main content

Basic Integration

Integrating Beauty iFrame into your website is a straightforward process that involves copying and pasting an HTML snippet into your web page. The HTML code creates a configurable iFrame element that places the virtual makeup experience in a resizable window on your website. You can find modal and pdp integration examples here.

The HTML code snippet should include the following parameters:

Required parameters​

  • DEPLOYMENT-URL: This is the URL of our Beauty iFrame template UI. You will receive this URL from us and should not modify it.
  • cms-client-id=<CMS-CLIENT-ID>: This is a unique ID that links your Beauty iFrame experience to your product catalog in our CMS. You will receive this ID from us and should not modify it.
  • config=<CMS-CONFIG-ID>: This refers to the CMS ID parameter, which plays a key role in personalizing your Beauty iFrame experience. You can locate the ID number within your CMS account under the section titled Applications -> Configurations.

Optional parameters​

  • filter=<FILTER-STRING>: This optional parameter can be used to filter your product catalog to display a subset of products in the virtual makeup experience. The FILTER-STRING should be a string that matches the filter requirements of our CMS API. If you do not wish to filter your products, you can omit this parameter.
  • locale=<LOCALE>: This optional parameter can be used to specify locale, for example, locale=fr
  • product-id-type=<PRODUCT-ID-TYPE>&product-id=<PRODUCT-ID>: This optional parameter can be used for iFrame to land on the certain product. You can locate the ID number of particular product within your CMS account the product-id-type can be omitted if you are not using sku or ean
  • look-id-type=<LOOK-ID_TYPE>&look-id=<LOOK-ID>: This optional parameter can be used if you want iFrame to land on the full look. You can locate the ID number of particular look within your CMS account
  • The above optional parameters can be used together with the iFrame to land on a particular product in a particular look. You can locate the ID number of a particular product and look within your CMS account.
note

Please note if you use both LOOK-ID and PRODUCT-ID but the product isn't in that look, the product will take priority. If either ID doesn't exist, they'll be ignored.

  • idle-timeout=<IDLE-TIMEOUT>: This optional parameter can be used to set the idle reset timeout period, measured in seconds. Default is 10 minutes.
  • range-id=<RANGE-ID>: This optional parameter can be used to limit products to a subset range, defined in the CMS.

Here's an example of the HTML snippet that you will need to add to your website:

<iframe
    id="bbh-iframe"
    frameBorder="0"
    style="width: 100%; height: 100%;"
    allow="camera"
    src="https://<DEPLOYMENT-URL>?cms-client-id=<CMS-CLIENT-ID>&config=<CMS-CONFIG-ID>">
</iframe>
note

Please note that the DEPLOYMENT-URL and CMS-CLIENT-ID parameters should not be modified, as they are required for proper functioning of the Beauty iFrame experience. We recommend setting the iFrame to at least 600px in height and 400px wide.

The FILTER-STRING parameter is optional and can be modified as needed to create a customised product subset.

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 Beauty iFrame within another iframe, both the Beauty iFrame and the parent iframe should include the allow="camera" parameter.

It's important to mention that Beauty iFrame is designed with user privacy and security in mind. The user's image and data are processed locally in their browser, and are not sent to any external servers.

info

The app does not transmit or store any personally identifiable data of the user while operating.