Events

Neo Beauty Studio includes real-time event reporting capabilities, allowing you to monitor and record user interactions and behaviours within the virtual makeup experience. With this feature, you can track and analyse user engagement, gain valuable insights into user preferences and pain points, and make data-driven decisions to improve the overall user experience.

All events are transmitted in real-time between the iFrame and parent host page, enabling you to stay up-to-date with user activity and respond quickly to any issues that may arise.

Capturing Events

To listen to all internal events from the iFrame, you can add the following script to your page, which will subscribe to events from the iFrame:

// Add window event listener functions
if (window.addEventListener) {
  window.addEventListener(`load`, handleForm, false);
  window.addEventListener(`message`, handleMessage, false);
}

// Subscribe to events when iFrame has loaded
function handleForm() {
 : Subscribe to events
  var win = document.getElementById(`bbh-iframe`).contentWindow;
  win.postMessage(`subscribe`, `*`);
}

// Handle event messages
function handleMessage(e) {
  const event = e.data;
 : [Respond to event messages here]
  console.log(`Neo Beauty Studio Event: message[${event.message}] data: [${event.data}]`);
}

This script subscribes to all events emitted from the iFrame, and the handleMessage function allows you to respond to these events. You can customise your response based on the message field and access the data payload in the data field.

Event responses are JSON-formatted and include the following fields:

interface Event {
  message: MsgType;
  data: any | null;
}

The message field specifies the type of event, and the data field contains any additional data related to the event.

We recommend that you work with our support team to define the events that you want to track and the data that you want to capture. By customising your event handling, you can gain valuable insights into user behaviour and preferences, which can help you to make informed decisions about product development, marketing, and customer engagement.

Events List

Neo Beauty Studio emits events to track user interactions and behaviours within the virtual makeup experience. You can use these events to gain insights into how users engage with your products and improve the overall user experience.

The following table lists the events that Neo Beauty Studio emits, along with a brief description and the expected data fields:

Event Name	Description	Expected Data Fields
photo_button_click	User clicked the "Take Photo" button	None
session_started	New session started	{ client_id: string, version: string, origin: string, window_size: { width: number, height: number }, device_info: object, device_flags: { is_mobile: boolean, is_desktop: boolean, is_tablet: boolean } }
subscribed	Parent page has subscribed to message service	{ version: string, origin: string }
onboarding_page_load	Onboarding page loaded	None
window_resize	Window resize event detected	{ window_size: { width: number, height: number } }
get_started_click	"Get Started" button clicked on onboarding page	None
start_page_load	Start page loaded	None
launch_with_camera_click	"Launch Camera" button clicked on start page	None
launch_with_image_upload_click	"Image Upload" button clicked on start page	None
launch_with_image_upload_picked	User selected an image to upload	None
upload_page_load	Upload image page loaded	None
upload_page_complete_click	User clicked "Use Photo" on upload steps page	None
upload_page_cancel_click	User clicked "Cancel" on upload steps page	None
upload_page_rotate_click	User clicked "Rotate" on the image upload page	{ rotation: number }
upload_page_zoom_click	User clicked "Zoom" on the image upload page	{ zoom: number }
upload_page_flip_click	User clicked "Flip" on the image upload page	{ direction: 'vertical' | 'horizontal' }
vto_page_loaded	Main VTO page loaded	None
take_photo_navigation_button_clicked	User clicked "Take Photo" from navigation buttons	None
slider_toggle_button_clicked	User clicked "Slider Toggle" buttons	{ status: boolean }
filter_toggle_navigation_button_clicked	User clicked "Filter Toggle" from navigation buttons	{ status: boolean }
close_take_photo_page_click	User clicked to close take photo page	None
download_photo_click	User clicked to download a photo	{ products: Product[], image: string }
photo_captured	Photo captured of user wearing makeup	{ products: Product[], image: string }
share_photo_click	User clicked to share a photo	{ products: Product[], image: string }
share_look_click	User clicked to share a look	{ products: Product[] }
slider_thumb_drag	User repositioned the side-by-side slider	{ position: number }
swiper_product_line_updated	Swiper product shade list updated by line	{ products: Product[] }
swiper_product_shade_selected	Product shade selected in swiper shade section	{ product: Product }
swiper_product_shade_clicked	User clicked product shade swatch	{ product: Product }
swiper_expand	User expanded the swiper bar	None
swiper_collapse	User collapsed the swiper bar	None
shop_your_look_clicked	User clicked "Shop Your Look" on top left	{ products: Product[] }
shop_view_load	The shopping bag view was loaded	{ products: Product[] }
shop_view_product_info_toggle_click	User clicked to toggle extra product information section	{ status: boolean, product: Product }
shop_view_back_click	User clicked to return from shopping bag view	None
shop_add_product_click	User clicked to add single product to bag	{ product: Product }
shop_add_all_products_click	User clicked to add all products to bag	{ products: Product[] }
product_bar_updated	List of products in product bar updated	{ products: Product[] }
product_bar_look_updated	List of looks in product bar updated	{ look: Look }
product_bar_product_click	User clicked product in product bar	{ product: Product }
product_bar_remove_product_click	User clicked x to remove product in product bar	{ product: Product }
product_bar_add_product_click	User clicked add product	None
product_bar_add_product_shade_view_load	Select product shade list view loaded	{ product_type: string, line: object, products: Product[], }
product_bar_add_look_view_load	Add look view loaded	{ looks: Look[] }
product_bar_add_look_back_click	User clicked back button in add look view	None
product_bar_add_look_clear_click	User clicked clear all products in add look view	None
product_bar_add_look_swatch_click	User clicked on a look swatch in the add look view	{ look: Look }
product_bar_add_look_confirm_click	User clicked confirm in response to change of look in add look view	{ look: Look }
product_bar_add_look_cancel_click	User clicked cancel in response to change of look in add look view	None
product_bar_add_product_back_click	User clicked back button in add product view	None
product_bar_add_product_clear_click	User clicked clear all products in add product view	None
product_bar_add_product_swatch_click	User clicked on a product shade swatch in the add product view	{ product: Product }
product_bar_add_line_clear_click	User clicked clear all products in add line view	None
product_bar_add_line_back_click	User clicked back button in add line view	None
product_bar_add_line_view_load	Add line view loaded	{ lines: Line[] }
product_bar_add_line_click	User clicked on a line in the add line view	{ selected_line: Line }
product_bar_add_category_load	Add category view loaded	None
product_bar_add_category_back_click	User clicked back button in add category view	None
product_bar_add_category_clear_click	User clicked clear all products in add category view	None
product_bar_add_category_click	User clicked on a category in the add category view	{ category: string }
product_bar_add_category_looks_click	User clicked on looks in the add category view	{ looks: Look[] }
sdk_paused	SDK has been paused	None
sdk_play	SDK has restarted	None
sdk_set_feed_to_camera	SDK setting to live camera feed	None
sdk_initialising	SDK has started to initialise	None
sdk_initialised	SDK has started to initialise	{ build_info: object }
sdk_send_products	SDK sent products to render	{ products: Product[] }
sdk_set_feed_to_static	SDK setting to static camera feed	None
sdk_toggle_visibility	SDK toggled visibility	{ value: boolean }
sdk_capture_photo_start	SDK requested capture live try-on image	None
sdk_captured_photo	SDK captured an image of the live try-on	{ image: string }
sdk_play_art	SDK started ART animation	{ animation: string, loop: boolean }
sdk_end_art	SDK ended ART animation	None
sdk_image_manipulation	SDK set input image manipulation	{ type: 'rotate' | 'zoom' | 'flip' , value: number | { x: number, y: number } }
sdk_set_client_id	SDK set clientID	{ clientid: string }
sdk_sdk_failed_start	SDK failed to start	{ code: number, response: string }
sdk_sdk_started	SDK started	{ code: number, response: string }
add_bag_launch_external_link	Launch external link from add to bag click	{ link: string }
add_bag_launch_external_link_failed	Failed to launch external link	{ link: string, error: object }
journey_reset	App requested reset	None

These events can be accessed and analysed by adding event listeners to your parent web page, as detailed in our event handling documentation. By tracking these events, you can gain valuable insights into how users engage with your virtual makeup experience, and use this information to improve the overall user experience.