Integrating Neo Beauty Studio

This guide will teach you how to seamlessly incorporate the Neo Beauty Studio by Beauty By Holition into your website, regardless of your chosen platform. You can effortlessly create striking inline product display pages (PDPs), pop-over modal windows, or fullscreen experiences using our neo.js library.

Our scripts handle all the technical aspects, setting up the Neo iFrame perfectly within your webpage. We've included examples of modal, inline, fullscreen, as well as integrations with popular platforms like Webflow, Shopify, and Wix to aid your implementation.

info

We recommend having a minimum space of 600px in height and 400px in width for optimal display in any inline PDP style setup.

Check out our live demos for different types of integrations:

1. Modal Pop-Over: https://sandbox.holitionbeauty.com/neo-modal-script.html
2. Inline PDP: https://sandbox.holitionbeauty.com/neo-pdp-script.html
3. Full Screen: https://sandbox.holitionbeauty.com/neo-fullscreen-script.html

General Steps to Integrate Neo Beauty Studio

Here are the basic steps to integrate Neo Beauty Studio into your website:

1. Open the webpage where you wish to embed the Neo Beauty Studio. Use a text editor or a Content Management System (CMS) interface that allows JavaScript code editing and insertion.

2. Create a new button element on the page, which will trigger the virtual experience.

3. Acquire the necessary CMS client ID from our team. You'll need this to access the Beauty By Holition CMS.

4. Add the neo.js script to the body section of your page and link the button to initiate the experience. The script will handle the iFrame setup and insertion into the desired location.

5. Define configuration settings to modify the styling and input the CMS client ID acquired in Step 3.

That's all! With these steps, you can quickly set up the Neo Beauty Studio on your website, offering your customers an engaging virtual try-on experience. If you're using Webflow, Shopify, or Wix, refer to the specific tabs below for platform-specific integration instructions.

1-Code Snippet

This example illustrates how to create a simple modal pop-over, triggered by a button press on the webpage.

To integrate Neo Beauty Studio using neo.js, please follow these steps:

1. Construct a new button on your webpage and assign it a unique id, for instance: <button id="myBtn">NEO</button>.
2. Copy and paste the ensuing code snippet at the webpage's end, within the body HTML tags.

<!-- Start Beauty By Holition neo.js -->
<script type="text/javascript" src="https://vto.holitionbeauty.com/branch/V2/develop/vto/assets/scripts/neo.js"></script>
<script>
  document.getElementById(/*<insert button id here enclosed in double quotes, eg. "myBtn">*/).onclick = () => { 
    neo({ 
        client_id: /*<insert your CMS client id here>*/, 
      }
    ); 
  };
</script>
<!-- End Beauty By Holition neo.js -->

2-Settings

When launching Neo Beauty Studio using neo.js, you can customize the integration's aesthetics by passing several settings. These settings are passed as an object to the neo() launch function.

<!--Start Beauty By Holition neo.js-->
<script type="text/javascript" src="https://vto.holitionbeauty.com/branch/V2/develop/vto/assets/scripts/neo.js"></script>
<script>
  document.getElementById(/*<insert button id here enclosed in double quotes, eg. "myBtn">*/).onclick = () => { 
    neo({ 
        client_id: /*<insert your CMS client id here>*/, 
        /* ... list of settings here */
        /* <settings>: <value>, */
      },
      /* <"mode"> */
    ); 
  };
</script>
<!--End Beauty By Holition neo.js-->

Here are the available settings:

Borders and Close Button

• border_color: A hex value that sets the external border color, e.g., '#000'
• border_radius: Corner edge rounding radius, range 0-5px
• border_width: Border width, range 0-12px
• close_color: The close button color, e.g., '#FFF'

Modal Background

• background_color: An RGBA color value that sets the modal background, e.g., 'rgba(0,0,0,0.7)'
• background_blur: The background modal blur, range 0-5px

CMS Account Settings

• client_id: Your unique CMS client ID
• filter: A filter string to select a subset of displayed products from the CMS catalogue
• configuration_id: A set configuration ID from CMS
• range_id: A set ID of a predefined product range, managed within the CMS

Launch Settings

• product_id: The CMS ID of the product to select upon launch
• look_id: The CMS ID of the look to select upon launch. Can be used in combination with product_id to highlight a specific product on launch.
• product_id_type: The id type of the product, possible values: id, sku, ean. Default is id.
• look_id_type: The id type of the look, possible values: id, sku, ean. Default is id.

Integration Settings

• parent_element: The HTML DOM element inside which the experience will be created. This can be left blank for modal or fullscreen mode or if the parent_id is supplied.
• idle_timeout: An idle timeout for the application to reset to the landing page.
• parent_id: The ID of the parent HTML DOM element. This can be left blank for modal or fullscreen mode or if parent_element is supplied.
• mode: A string value indicating the integration style: either 'modal' (pop-over), 'inline' (PDP), or 'fullscreen'.
• locale: Set language option. Defaults to 'en' (English).
• message_callback: To receive event messages from the Neo platform, provide a callback function, e.g.,

document.getElementById(/*<insert button id here enclosed in double quotes, eg. "myBtn">*/).onclick = () => { 
  neo({ 
      client_id: /*<insert your CMS client id here>*/, 
      message_callback: (msg) => {
        /* message data here */
        console.log(
          `APP: Message event [${msg.message}].data = `,
          msg.data
        );
      },
    },
    /* <"mode"> */
  ); 
};

Ensure you replace the placeholders encapsulated in angle brackets (< >) with your preferred values.

3-Webflow Integration

Integrating with Webflow

Integrating Neo Beauty Studio with Webflow requires a similar approach to the standard JavaScript integration. Follow these steps to get started:

1. Open the webpage in Webflow where you want to integrate Neo Beauty Studio.

2. Create a button on your webpage and give it a unique ID, for instance, <button id="myBtn">NEO</button>.

3. Open the 'Page Settings' and scroll down to the 'Before </body> tag' section.

4. Insert the neo.js script and your customization script, replacing placeholders with your specific values:

<!-- Start Beauty By Holition neo.js -->
<script type="text/javascript" src="https://vto.holitionbeauty.com/branch/V2/develop/vto/assets/scripts/neo.js"></script>
<script>
  document.getElementById(/*<insert button id here enclosed in double quotes, eg. "myBtn">*/).onclick = () => { 
    neo({ 
        client_id: /*<insert your CMS client id here>*/, 
        /* ... list of settings here */
        /* <settings>: <value>, */
      },
      /* <"mode"> */
    ); 
  };
</script>
<!-- End Beauty By Holition neo.js -->

5. Click 'Save changes' and then 'Publish' your site. Your button should now launch the Neo Beauty Studio experience when clicked.

Remember to always replace the placeholders in the script with your actual values.

important

Webflow must allow for the direct addition of HTML elements and scripts to the page. If you encounter any issues, please consult Webflow's documentation or support.

4-Shopify Integration

Integrating with Shopify

Follow the steps below to integrate Neo Beauty Studio with your Shopify store:

1. Navigate to your Shopify admin dashboard.

2. Click on "Online Store" then select "Themes".

3. Find the theme you want to edit, click "Actions", and then click "Edit code".

4. In the "Layout" directory, click theme.liquid to open it in the online code editor.

5. Scroll to the bottom of the file and just above the closing </body> tag, insert the following neo.js script and your customization script. Be sure to replace placeholders with your specific values:

<!-- Start Beauty By Holition neo.js -->
<script type="text/javascript" src="https://vto.holitionbeauty.com/branch/V2/develop/vto/assets/scripts/neo.js"></script>
<script>
  document.getElementById(/*<insert button id here enclosed in double quotes, eg. "myBtn">*/).onclick = () => { 
    neo({ 
        client_id: /*<insert your CMS client id here>*/, 
        /* ... list of settings here */
        /* <settings>: <value>, */
      },
      /* <"mode"> */
    ); 
  };
</script>
<!-- End Beauty By Holition neo.js -->

6. Save the changes by clicking "Save" in the top right corner.

Remember to always replace the placeholders in the script with your actual values.

important

If you are unfamiliar with modifying Shopify's theme code, it is recommended to make a backup of your current theme or consult Shopify's support.

5-Wix Integration

Integrating with Wix

Follow these steps to integrate Neo Beauty Studio into your Wix site:

1. Log into your Wix account and navigate to your Site Manager.

2. Click on "Edit Site" to open the Wix Editor.

3. From the left-hand menu, click on "Add" and then choose "Embed".

4. Select "Custom Element" from the options that appear.

5. Drag and place the element at your preferred location on your page.

6. Click "Choose Source" and select "Code".

7. In the code field, insert the neo.js script and your customization script, replacing placeholders with your specific values:

<!-- Start Beauty By Holition neo.js -->
<script type="text/javascript" src="https://vto.holitionbeauty.com/branch/V2/develop/vto/assets/scripts/neo.js"></script>
<script>
  document.getElementById(/*<insert button id here enclosed in double quotes, eg. "myBtn">*/).onclick = () => { 
    neo({ 
        client_id: /*<insert your CMS client id here>*/, 
        /* ... list of settings here */
        /* <settings>: <value>, */
      },
      /* <"mode"> */
    ); 
  };
</script>
<!-- End Beauty By Holition neo.js -->

8. Click "Apply".

9. Don't forget to save and publish your site.

Please ensure that placeholders in the script are replaced with your actual values.

important

Remember that you must have the ability to add custom code to your Wix site, which requires a specific subscription level. Consult Wix's documentation or support if you encounter issues.

important

Ensure that your chosen webpage editor or CMS interface allows the direct addition of HTML elements and scripts to the webpage. This is a prerequisite for the successful integration of Beauty By Holition's Neo Beauty Studio using the instructions provided in this guide.