AI Stylist Widget

This widget integrates an AI stylist into your web application using an iframe.
It provides an interactive interface where users can get personalized fashion advice and product recommendations.

Example Usage

const aiStylist = window.yesplz.aiStylist({
    opener: '#stylist-opener',
    hideOpenerOnFrameOpen: false,
    onFavoriteProduct: function ({ productId, isFavorite }) {
        
    },
    onAccessFavoriteList: function () {
        
    },
    isLoginRequiredForFavorites: true
});

Parameters

Name	Type	Description
opener	string	Selector for the button to open iframe.
useFloatingButton	boolean	Determines whether to use a default floating button as the opener.
hideOpenerOnFrameOpen	boolean	Determines whether to hide the opener button when the iframe is opened.
buildProductUrl	function	A function that builds the URL for a product's detail page.
onFavoriteProduct	function	A callback function that is called when a user marks a product as a favorite or deletes on AI Stylist.
onAccessFavoriteList	function	A callback function that is called when a user accesses the favorites list of AI Stylist.
isLoginRequiredForFavorites	boolean	Determines whether login is required to use favorites feature.

opener

Default: null

A CSS selector string that identifies the element to be used as the opener for the AI Stylist iframe.

Either opener or useFloatingButton must be set.

useFloatingButton

Default: false

If set to true, it uses a default floating button as the opener. This is useful when you want to use a pre-styled, floating button instead of defining your own opener element.

hideOpenerOnFrameOpen

Default: true

If set to true, the opener button will be hidden when the iframe is opened. This can be useful to prevent the opener from overlapping with the opened iframe.

buildProductUrl

Default: productUrl from product information

A function that builds the URL for a product's detail page. This is useful when you need to customize how product URLs are generated.

const aiStylist = window.yesplz.aiStylist({
    opener: '#stylist-opener',
    hideOpenerOnFrameOpen: false,
    buildProductUrl: function (product) {
        // Custom logic to build a detail page URL for products
        return 'product.html?productId=' + product.productId;
    }
});

This function receives a product object as its parameter and should return a string representing the URL for that product's detail page.
You can customize this function to match your website's URL structure for product pages.

onFavoriteProduct

Default: null
Parameters: { productId: string, isFavorite: boolean }

A callback function that is called when a user marks a product as a favorite or deletes on AI Stylist. Implement a callback function to make your favorite feature work.

const aiStylist = window.yesplz.aiStylist({
    // ...
    onFavoriteProduct: function ({ productId, isFavorite }) {
        // Example
        // if need login to use favorites feature
        // if(!isLoggedIn) {
        //     // show login confirm
        //     showLoginConfirm();
        //     return;
        // }
        
        // if product is already favorite status is same, do nothing
        // if(isFavorite === isFavoriteProduct(productId)) {
        //     return;
        // }
        
        if (isFavorite) {
            // update product as favorite
            // favoriteProduct(productId);
        } else {
            // update product as not favorite
            // unFavoriteProduct(productId);
        }
        
        // Do not call window.yesplz.AiStylist.favoriteProduct(productId) method in this function
        // It will be called automatically.
    }
});

onAccessFavoriteList

Default: null

A callback function that is called when a user accesses the favorites list of AI Stylist.

const aiStylist = window.yesplz.aiStylist({
    // ...
    onAccessFavoriteList: function () {
        // if need login to use favorites feature
        // if(!isLoggedIn) {
            // show login confirm or redirect to login page
            // showLoginConfirm();
            // return;
        // }
    }
});

isLoginRequiredForFavorites

Default: false

Determines whether login is required to use favorites feature.
ㅤ
If need login to use favorites feature, set true.
If true, you need to pass the onFavoriteProduct and onAccessFavoriteList callbacks to the parameters.
Call setUserId method after user logs in.
ㅤ
If false, use cookies to identify and store the user.

Product Favorites Methods

Use this methods the AI Stylist Server can update its list of favorite products and provide better search results and recommendations.

setUserId

Parameters: userId: string | null
ㅤ
Call setUserId will update the AI Stylist favorites list based on the user id and save user id to the AI Stylist server when calling favoriteProduct.

// when user logs in
window.yesplz.AiStylist.setUserId('USER_ID');

// when user logs out or session is expired
window.yesplz.AiStylist.setUserId(null);

favoriteProduct

Parameters: productId: string

A function that saves the favorite status of a product to the AI Stylist server.
Add the product to the user's favorites list.

// when user favorite product
window.yesplz.AiStylist.favoriteProduct('PRODUCT_ID');

unFavoriteProduct

Parameters: productId: string

A function that saves the favorite status of a product to the AI Stylist server.
Remove the product from the user's favorites list.

// when user unfavorite product
window.yesplz.AiStylist.unFavoriteProduct('PRODUCT_ID');