Version: 1.1.4

Web Customization

You can customize our iframe#

Change Background Color

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({ changeBackgroundColor: { color: '#D0D1D2' } }),
  '*'
 );

Alt Text

Change Try Label

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({ changeTryLabel: { label: 'TRY IT NOW' } }),
  '*'
 );

Alt Text

Change Take Photo Button and Color Label (It changes DESKTOP Take Photo button’s color and label)

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({
   changeTakePhotoButtonColorAndLabel: {
    label: 'Take a Photo',
    color: '#D0D1D2',
   },
  }),
  '*'
 );

Alt Text

Change Choose Model Button Color and Label

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({
   changeChoosModelColorAndLabel: { label: 'Choose Model', color: '#D0D1D2' },
  }),
  '*'
 );

Alt Text

Disable Buttons Hover Action

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({ disableButtonsHoverActions: '' }),
  '*'
 );

Alt Text

Apply To Selected Model (If you want to use different models, you can contact us)

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({ applyToSelectedModel: selectedModel }),
  '*'
 );

Hide Choose Model Button (If you want to use your models, you should hide our choose model button)**

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({ hideChooseModelButton: '' }),
  '*'
 );

Alt Text

Change Choose Model Label On Model Page

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({ changeChooseModelText: { text: 'Choose Model please' } }),
  '*'
 );

Alt Text

Change Try It Now Label After Take Photo

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({
   changeApplyPhotoButtonColorAndLabel: {
    label: 'TRY IT NOW !',
    color: '#FF3EB5',
   },
  }),
  '*'
 );

Alt Text

Change Take Anothor Label After Take Photo

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({ changeTakeAnotherLabel: { label: 'Tekrar Dene' } }),
  '*'
 );

Alt Text

Will be used for UI integration
You can decide to choose your own icons for back button and slider button. Simply hide our button and put your icon. Post message when clicked your button.

Hide slider button.

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(JSON.stringify({ hideSlider: {} }), '*');

Alt Text 2. Click slider button.

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(JSON.stringify({ clickSlider: {} }), '*');

Hide back button.

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(JSON.stringify({ hideBackButton: {} }), '*');

Alt Text

Click back button.

document
 .getElementById('makeupView')
 .contentWindow.window.postMessage(
  JSON.stringify({ clickBackButton: {} }),
  '*'
 );