Installation

You can find instructions on how to install Zyler on Shopify or Woocommerce under "Ecommerce Platforms".

Integration happens in 3 simple steps:

  1. Include our Script
  2. Add the "Try On" Button
  3. Initialize

Include our Script

First of all, you must include a small script hosted by us into your webpage. This script contains the least client side logic necessary to contact our servers and display the image in your site.

Copy the following script tag and paste it in either the <head></head> or at the end of the <body></body> of any pages you want to be able to visualise an outfit - usually a product information page.

<script src="https://www.zyler.com/js/integration/v1/modal.js" crossorigin="anonymous" defer></script>

Add the "Try-On" Button

The "Try-On" button is what your users click to start the Zyler visualisation process. Copy the template html button below and replace the {outfit-id} data attribute with the id of the outfit you want to be visualised via the click of that button.

<button type='button' class="zyler-try-on" style="display: none;" data-outfit-id="{outfit-id}">Try On</button>

The zyler-try-on class and the data-outfit-id attribute are both required. style="display: none;" is set to hide the element initially. This is because the initialisation process in step 3 will hide the element to begin with and only display it when the pre-flight checks have passed.

This button is not styled in anyway so add any classes and/or styling required for it to fit into your site.

Initialize

Finally, you need to initialize the zyler process once the document has loaded. Paste the following javascript snippet in a window.onload callback.

window.onload = function() {
const myZyler = Zyler.init({
partnerId: '{partner-id}' // Replace {partner-id} with your own partner ID.
});
}
Replace {partner-id} with your own partner ID.

If you want to be able to test it in a live environment without your customers seeing, add testMode: true to the configuration object.

const myZyler = Zyler.init({
partnerId: '{partner-id}', // Replace {partner-id} with your own partner ID.
testMode: true
});

This will hide the "Try On" button from your page unless you add show_zyler as a query parameter to the end of the URL on the page you're trying to test visualisation.

e.g

https://www.yourdomain.com?show_zyler