Parameters
Functional Parameters
Required parameters
client_id: This is a unique ID that links your Neo Beauty Studio experience to your product catalog in our CMS. You will receive this ID from us and should not modify it.configuration_id: This refers to the CMS ID parameter, which plays a key role in personalizing your Neo Beauty Studio experience. You can locate the ID number within your CMS account under the section titled Applications -> Configurations.
Optional CMS parameters
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 accountproduct_id_type: This optional parameter can be used to change the product id type. Possible types are id, sku, ean. Where id is default.filter: This optional parameter can be used to filter your product catalog to display a subset of products in the virtual makeup experience. TheFILTER-STRINGshould 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: This optional parameter can be used to specify locale, for example, locale=frlook_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 accountlook_id_type: This optional parameter can be used to change the look id type. Possible types are id, sku, ean. Where id is default.idle_timeout: An idle timeout for the application to reset to the landing page.affiliate_code: An optional unique string code that will be passed back as a parameter through product outbound links (eg. ?affiliateCode='xxxx').
Integration parameters
mode: A string value indicating the integration style: either'modal'(pop-over),'inline'(PDP), or'fullscreen'.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 theparent_idis supplied.parent_id: The ID of the parent HTML DOM element. This can be left blank for modal or fullscreen mode or ifparent_elementis supplied.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>*/,
configuration_id: /*<insert your CMS confuguration id here>*/,
message_callback: (msg) => {
/* message data here */
console.log(
`APP: Message event [${msg.message}].data = `,
msg.data
);
},
},
/* <"mode"> */
);
};
Styling Parameters
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-5pxborder_width: Border width, range 0-12pxclose_color: The close button color, e.g.,'#FFF'close_visible: Show or hide the close overlay button,true|false
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