Your own button

The script places a button for you. You can move it, restyle it, or leave it out and open the try-on from a button of your own.

How the script places its button

In this order:

1. A place you marked. If the page has <div data-labbesne-button></div>, the button goes inside it.
2. A known platform's Add to bag button. Shopify, WooCommerce, Magento, BigCommerce and Salesforce Commerce Cloud themes mark theirs up in a way the script knows. So does a button with data-testid="add-to-cart" or data-testid="add-to-bag".
3. A button that reads like Add to bag. "Add to bag", "Add to cart", "Add to basket", and the same in German, French, Spanish, Italian and Dutch. The page's <main> is searched first.

The button goes right after the one it found. Buttons in the page's header, navigation, footer or a dialog are skipped, and so are hidden ones.

Pages that draw themselves in the browser are fine: the script watches the page for 15 seconds until both the product and the button are there. If a re-render removes the button, it puts it back.

If it finds no place, it adds nothing and says so in the console.

Move it

Mark the place:

<div data-labbesne-button></div>

Or name an element when you set up:

Labbesne.push(['init', { button: { target: '#product-actions', position: 'after' } }])

Or place it later, for example after your own code has drawn the page:

Labbesne.mountButton('#try-on-slot')

mountButton() puts the button inside the element by default and replaces what was in it.

Restyle it

Next to Add to bag, the button copies that button's colour, corner radius, font, size, letter spacing, capitals and height, and draws itself as an outline. It lives in a shadow root, so your stylesheet can't change it by accident and its styles can't leak into your page.

Inside a place you marked, there is no button to copy from, so it starts from the defaults below and fills the width of that place.

To change it on purpose, set these CSS variables on the button's host element, [data-labbesne-host]. A value you set in a stylesheet needs !important to win over what the button copied.

Variable	What it sets	Default
--labbesne-color	The outline and the text	#16151b
--labbesne-radius	The corner radius	4px
--labbesne-height	The least height	48px
--labbesne-font	The font family	The page's
--labbesne-font-size	The text size	16px
--labbesne-letter-spacing	The space between letters	normal
--labbesne-text-transform	Capitals: uppercase, none	none
--labbesne-gap	The space above the button	8px

[data-labbesne-host] {
  --labbesne-color: #111111 !important;
  --labbesne-radius: 0 !important;
  --labbesne-gap: 12px;
}

The button's text is the label option: Labbesne.push(['init', { label: 'See it on you' }]).

The store's Appearance page in the dashboard saves your choices, but they do not reach your shop yet. Use the variables above for now.

Use a button of your own

Turn the script's button off, and show yours when try-on can start.

<button id="try-on" hidden>Try it on</button>

<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 || []
  const button = document.getElementById('try-on')

  Labbesne.push(['init', { button: false }])
  Labbesne.push([
    'on',
    'availability',
    ({ available }) => {
      button.hidden = !available
    },
  ])
  button.addEventListener('click', () => Labbesne.push(['open']))
</script>

Wait for availability before you show the button. Try-on can be off for your key, and then open() does nothing but send your page an error event. A button that is always there would sometimes do nothing. See When try-on is off.

availability can fire more than once, so set the button's state from it each time.

With your own button, the script does not push labbesne_button_viewed to the page's dataLayer, and the dashboard's count of button views stays at zero for those pages. The other steps are counted as usual.