The SDK

The script tag gives your page one object, window.Labbesne. With it you choose the product, place the button, answer Add to bag and Checkout, and listen to what happens.

Nothing on this page is needed for the plain install. Start with Get started if you have not pasted the tag yet.

Before the script has loaded

The script loads async, so your own code may run first. Use the queue: it works before and after the script loads.

<script>
  window.Labbesne = window.Labbesne || []
  Labbesne.push(['on', 'addToBag', ({ product }) => cart.add(product.id)])
</script>

Each entry is a method name followed by its arguments. When the script loads, it runs the queue in order and then replaces the array with the real object. After that, Labbesne.push([...]) runs the command at once, and you can also call the methods directly: Labbesne.open().

Setting it up yourself

By default the script calls init() for you, with the key from the tag. To pass options, tell the tag not to, and call init() once yourself:

<script
  async
  src="https://app.labbesne.com/sdk/v1.js"
  data-key="pk_your_store_key"
  data-auto="false"
></script>
<script>
  window.Labbesne = window.Labbesne || []
  Labbesne.push([
    'init',
    {
      label: 'See it on you',
      checkoutUrl: '/checkout',
    },
  ])
</script>

init() works once per page load. A second call is ignored, with a warning in the console. That is why the tag needs data-auto="false" here: without it, the script may have called init() itself before your code runs.

The script tag

data-key

Your store's publishable key (pk_…), from the store's Install page. Needed, unless you pass key to init().

data-auto

Set data-auto="false" to stop the script calling init() for you. Then nothing happens until your code calls init().

data-datalayer

Set data-datalayer="false" to keep the try-on's steps out of the page's dataLayer. See Analytics.

Options

What init() takes. Every one is optional.

key

The publishable key. Defaults to the tag's data-key.

product

The product to try on: an object, or a function that returns one. A function is called every time the try-on opens, so it can return the variant the shopper has picked.

What you pass is laid over what the script reads from the page, field by field. See Product data.

button

Where the button goes.

Value	What it does
'auto' (the default)	Puts the button inside <div data-labbesne-button></div> if the page has one, otherwise right after Add to bag
false	No button. Open the try-on from your own: see Your own button
{ target, position }	Puts the button at an element or a CSS selector. position is 'after' (the default here), 'before' or 'inside'

label

The button's text. The default is Try it on.

checkoutUrl

Where Checkout on the result goes. Setting it shows the Checkout button without a checkout handler. See Add to bag and checkout.

dataLayer

false keeps the try-on's steps out of the page's dataLayer. The default is true, and it wins over the tag's data-datalayer. See Analytics.

Methods

init(options)

Starts the script with the options above. Once per page load.

init() asks Labbesne whether try-on can start for your key. Only after a yes does it add anything to the page. See When try-on is off.

open(product)

Opens the try-on. product is optional: fields you pass win over the product option and over what the page says.

Labbesne.open({ variantId: 'M', imageUrl: 'https://www.example.com/img/overshirt-olive.jpg' })

If the try-on cannot open, nothing appears and your page gets an error event that says why.

close()

Closes the try-on. The shopper can also close it with its own close button or the Esc key.

mountButton(target, position)

Puts the Labbesne button at an element or a CSS selector. position is 'inside' (the default here), 'after' or 'before'. 'inside' replaces what the element holds.

Like every button the script adds, it only appears once Labbesne has said try-on can start.

on(event, handler)

Listens to an event. Returns a function that stops listening.

const stop = Labbesne.on('result', ({ product }) => console.log('Tried on', product.title))
stop()

off(event, handler)

Stops listening. Pass the same function you gave on().

push(command)

Runs a queued command: Labbesne.push(['open']) is Labbesne.open(). It is what makes the queue work after the script has loaded.

version

The SDK's version, a string. It is '1' for /sdk/v1.js.

Versions

The v1 in /sdk/v1.js is the SDK's version. We update the file behind that address, so fixes reach your shop without a change on your side. Browsers keep the file for a few minutes.

Two things follow:

• Don't add an integrity hash to the tag. The file's contents change, and a pinned hash would stop it loading.
• Don't copy the file to your own server. A copy stops getting fixes, and the script works out where Labbesne is from the address it was loaded from.

Including the tag twice is harmless: the second one does nothing.