Version: 2.0.0

Web

You can customize the fields available in the Plugin. Please note that you should wait for the Plugin to be loaded before the following postMessage comminications to occur.

Main Page#

Background Color#

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryItOnBackground',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryItOnBackground",
  "fieldValue": "#9b0a2fff",
}
*/

Alt Text

Main Title#

Change the text

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryItOnTitleText',
  fieldValue: '<new-string-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryItOnTitleText",
  "fieldValue": "TRY IT NOW",
}
*/

Alt Text

Change the color

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryItOnTitleColor',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryItOnTitleColor",
  "fieldValue": "#0e65a0ff",
}
*/

Take Photo Button#

Change the text

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'takePhotoDisplayText',
  fieldValue: '<new-string-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "takePhotoDisplayText",
  "fieldValue": "Take a Photo",
}
*/

Choose Model Button#

Change the text

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'chooseModelDisplayText',
  fieldValue: '<new-string-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "chooseModelDisplayText",
  "fieldValue": "New Choose Model",
}
*/

GDPR Text Field#

Change the html

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'gdprText',
  fieldValue: '<new-string-html-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "gdprText",
  "fieldValue": "<p>New GDPR description.</p>",
}
*/

Main Page Buttons (Take a Photo, Choose Model etc.)#

Change the text color

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryItOnButtonTextColor',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryItOnButtonTextColor",
  "fieldValue": "#0e65a0ff",
}
*/

Change the background color

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryItOnButtonBackground',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryItOnButtonBackground",
  "fieldValue": "#2895a2ff",
}
*/

Change the border color

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryItOnButtonBorder',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryItOnButtonBorder",
  "fieldValue": "#a212b4ff"
}
*/

Change the hover color (for border and text)

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryItOnButtonHover',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryItOnButtonHover",
  "fieldValue": "#0c46d3ff",
}
*/

Choose Model Page#

Change the text

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'chooseModelHeaderText',
  fieldValue: '<new-string-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "chooseModelHeaderText",
  "fieldValue": "New Choose Model Title",
}
*/

Change the color

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'chooseModelHeaderTextColor',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "chooseModelHeaderTextColor",
  "fieldValue": "#16beb9a8",
}
*/

Confirm the Taken Photo Page#

Confirm and Apply Button#

Change the text

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryNowButtonText',
  fieldValue: '<new-string-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryNowButtonText",
  "fieldValue": "New Confirm and Apply Text",
}
*/

Change the color

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryNowButtonTextColor',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryNowButtonTextColor",
  "fieldValue": "#16beb9a8",
}
*/

Change the background color

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'tryNowButtonBackground',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "tryNowButtonBackground",
  "fieldValue": "#16beb9a8",
}
*/

Take/Try Again Button#

Change the text

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'takeAnotherButtonText',
  fieldValue: '<new-string-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "takeAnotherButtonText",
  "fieldValue": "Take Another Photo",
}
*/

Change the color

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'takeAnotherButtonTextColor',
  fieldValue: '<new-string-hex-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "takeAnotherButtonTextColor",
  "fieldValue": "#16beb9a8",
}
*/

Apply Page#

Buttons#

Toggle back button

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'isBackButtonEnabled',
  fieldValue: <new-boolean-value>,
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "isBackButtonEnabled",
  "fieldValue": false,
}
*/

Toggle slider button

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'isSliderEnabled',
  fieldValue: <new-boolean-value>,
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "isSliderEnabled",
  "fieldValue": false,
}
*/

Face Detection Failed Page#

Error Title Field#

Change the text

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'fallbackTitleText',
  fieldValue: '<new-string-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "fallbackTitleText",
  "fieldValue": "Error",
}
*/

Error Description Field#

Change the text

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'fallbackExplanatoryText',
  fieldValue: '<new-string-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "fallbackExplanatoryText",
  "fieldValue": "Part of the page could not be detected.",
}
*/

Error Try Again Button#

Change the text

document.getElementById('makeupView').contentWindow.window.postMessage(
 JSON.stringify({
  event_id: 'UpdateLivePlugin',
  fieldName: 'fallbackButtonText',
  fieldValue: '<new-string-value>',
 }),
 '*'
);

/**
Example payload:
{
  "event_id": "UpdateLivePlugin",
  "fieldName": "fallbackButtonText",
  "fieldValue": "Try Again",
}
*/