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 also recieved callbacks for when sizes are recommended (including the automatic recommendation system) that allows for showing a recommendation in place of the usual button.

info

This feature is currently only for higher tier customers and not available on our S or M plans. If you are in doubt, or would like to find activate this for your store, please contact us at info@faslet.me.

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

onResult?: ({ label: string }, resultType: 'auto' | 'result-screen') => unknown;

variable	value	description
label	This matches the size labels on the store. For example; S,M,L	the 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.

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">
    <p id="faslet-button-text">What's my size?</p>
    <faslet-app
        shop-id="SHOP_ID"
        brand="BRAND"
        product-identifier="PRODUCT_ID"
        platform="unknown"
        product-name="PRODUCT_NAME"
        product-img="PRODUCT_IMAGE_URL"
    />
</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

Create a fully custom button​

Example​

Help​

Create a fully custom button

Example

Help