Mix & Match → Embedded

Instructions

Add mix & match modal styles

#widget { margin: 0 auto; width: 80vw;}  

<link rel="stylesheet" type="text/css" href="//widget.stylitics.com/mnm-embedded/css/style.css">  

Require the mix & match widget script

<script src="//widget.stylitics.com/mnm-embedded/js/main.js"></script>  

Set configuration options and initialize the widget once your target div is on the page.

        //initialize the Mix & Match modal widget

var mixWidget = new TapToSwap('widget');

//optional onload callback
mixWidget.onload = function(outfits){
  console.log(outfits)
}

//optional onswap callback
mixWidget.onswap = function(swap){
  console.log(swap.newItem);
  console.log(swap.updatedOutfit);
}

mixWidget.initMultipleInstance({
  username: 'demo',
  max_outfits_per_item: 5,
  item_number: '389998022'
});


//Mix & Match widget settings
var settings = {
  hideBrandSwapModal: true,
  hideBrandItemLIst: true
};

mixWidget.init(settings);