Skip to main content

Custom Button Styling

Create a fully custom button​

Faslet provides a special mode, called buttonless, which allows you to build your own button, and invoke the popup flow programatically. You receive callbacks for various events including when your button should be shown or hidden, and when sizes are recommended (including the automatic recommendation system) that allows for showing a recommendation in place of the usual button.

tip
Download logos and branding

We highly recommend using the Faslet icon in your custom button. We see up to 15% more interactions with the Size Me Up Virtual Assistant when the icon is used.
Download the Faslet icon in various sizes here.


Once buttonless is enabled, simply add the following method to the window._faslet object.

onResult?: ({ label: string }, resultType: 'auto' | 'result-screen') => unknown;
variablevaluedescription
labelThis matches the size labels on the store. For example; S,M,Lthe recommended size
resultType'auto' or 'result-screen'Where the recommendation was triggered from. auto is the automatic size recommendation for users that have already filled in the popup, and are automatically given a size recommendation without opening the popup. result-screen is the last screen of the popup flow.

To programatically open the popup from your new custom button, simply invoke the method:

window._faslet.openWidget();

This method is added after the button code loads successfully.

Callback Functions​

When using buttonless mode, you'll also want to implement callback functions to handle different states of your custom button:

onButtonShow Callback​

This callback is invoked when the Faslet system determines that your custom button should be displayed. Use this to make your button visible and set up click handlers.

onButtonHidden Callback​

This callback is invoked when the Faslet system determines that your custom button should be hidden. This happens in two main scenarios:

  • A/B Testing: The user is part of a control group that shouldn't see the Size Me Up button
  • Product Compatibility: The current product doesn't support size recommendations

Important: When this callback is triggered, you should hide your custom button immediately. The Faslet system has determined that the Size Me Up functionality should not be available for this user/product combination.

onResult Callback​

This callback is invoked when a size recommendation is calculated, allowing you to update your button text or display the recommended size.

danger

Please do not try to override the CSS styling of the popup and/or button. While it may work today, future button & popup updates may change class names, and overrides may stop working. Except for the buttonless mode, we do not provide guarantees on our CSS class names, IDs or HTML structure.

Example​

A very simplistic example of this working might look like this:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Title</title>
    <script src="https://widget.prod.faslet.net/faslet-app.min.js"></script>
</head>
<body>
<div id="faslet-button">
    <!-- Put this above your custom button so things like the FitBar, SIR and Call to Action popups can be shown in a nice location -->
    <faslet-app
        shop-id="SHOP_ID"
        brand="BRAND"
        product-identifier="PRODUCT_ID"
        platform="unknown"
        product-name="PRODUCT_NAME"
        product-img="PRODUCT_IMAGE_URL"
    />
    <p id="faslet-button-text">What's my size?</p>
</div>
<script>
    var fasletButton = document.querySelector('#faslet-button');
    var fasletButtonText = document.querySelector('#faslet-button-text');

    window._faslet = {
        id: 'PRODUCT_ID',
        shopUrl: 'SHOP_URL',
        addToCart: function(id) {
            ...
        },
        variants: [
          ...
        ],
        colors: [
          ...
        ],
        onButtonShow: () => {
            fasletButton.style.display = 'block';
            fasletButton.onclick = () =>
                window._faslet && window._faslet.openWidget ? window._faslet.openWidget() : undefined;
            console.log('button loaded');
        },
        onButtonHidden: () => {
            fasletButton.style.display = 'none';
            console.error('button hidden');
        },
        onResult: (result, resultType) => {
            fasletButtonText.innerText = `We recommend ${result.label}`;
        }
    }
</script>
</body>
</html>


Help​

In case of any questions, please don’t hesitate to contact us on support@faslet.me