Events

Your page can listen to what happens in the try-on. Two events are questions your page answers. The rest are news.

window.Labbesne = window.Labbesne || []
Labbesne.push(['on', 'result', ({ product }) => console.log('Tried on', product.title)])

on() returns a function that stops listening. off(event, handler) does the same.

No event carries the shopper's photo or the result. They stay inside the try-on's frame.

Events your page answers

addToBag

The shopper tapped Add to bag on the result. Your handler gets { product } and adds it to the cart.

The button only shows while there is a listener. What the handler returns tells the shopper whether it worked. See Add to bag and checkout.

checkout

The shopper tapped Checkout. Your handler gets { product } and takes them to checkout. The try-on closes when the handler says it worked.

Without a listener, the button shows only if you set checkoutUrl.

Events your page hears

availability

Whether try-on can start on this page: { available: true } or { available: false }.

It fires once the script has asked Labbesne, shortly after init(). A listener added later is called at once with the last answer. It can fire again: when there was no answer, the next open() asks again.

Use it to show and hide a button of your own. See Your own button.

open

The try-on opened. { product } is the product it opened with.

close

The try-on closed, by the shopper or by close().

ready

The try-on's frame has loaded and can take a product. The frame is loaded once and kept, so this does not fire on every open. It starts loading when the shopper first points at or taps the button, so it can fire before open.

step

The shopper reached a step: { step }.

Step	The shopper is
intro	Reading what try-on does, before agreeing
photo	Taking or picking a photo
clip	Picking a short video. Only where video try-on is switched on
review	Looking at their photo, about to generate
processing	Waiting for the picture
result	Looking at the result

A shopper can go back, so a step can come more than once.

result

A try-on picture is on screen. { product } is the product tried on. The picture itself is not passed to your page.

error

Something stopped the try-on: { code, message }. Almost always it could not start.

code is one of a short list: the codes your page receives. message is a plain sentence in English, meant for your logs.

Problems that happen later, inside the try-on, are shown to the shopper there and do not reach this event. There is one exception: garment_host_not_allowed, a product picture on a host your store doesn't allow. See Errors.

The product in an event

product is the product as the try-on opened with it: what the page said, with what you passed laid over it.

{
  id: 'LO-1',
  variantId: 'M',
  title: 'Linen overshirt',
  brand: 'Example',
  imageUrl: 'https://www.example.com/img/overshirt.jpg',
  url: 'https://www.example.com/products/linen-overshirt'
}

Only title and imageUrl are always there. See Product data.

If a handler throws

For addToBag and checkout, a throw counts as "it didn't work". For the others the try-on carries on, and the browser's console shows your error.