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 widget 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;
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 widget, and are automatically given a size recommendation without opening the widget. result-screen is the last screen of the widget flow.

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

window._faslet.openWidget();

This method is added after the widget code loads successfully.

warning

Please do not try to override the CSS styling of the widget and/or button. While it may work today, future widget 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