Direct Integration

If you are using an ecommerce site to host your website, one of our other integration options may be more appropriate. For more information, please see the integration page. Alternatively, if you do not want to use the ecommerce integration options, you can integrate Zyler Go directly. This is a more technical solution but it offers more flexibility.

To find an example of how Zyler Go will look on your website please see the overview.

The steps for integrating Zyler Go directly on your website are as follows:

1. Including the Script
2. Including the Try On Buttons
3. Styling Using CSS

Step 1: Including the Script

Copy the code snippet below and paste it at the bottom of the web page where you would like the integration to appear. This should be pasted just before the closing </body> tag to ensure that all other DOM processes have fully loaded before the script is processed. Make sure to replace <partner-id> with the value found within the Partner Portal, e.g. pp937797c2c4c43fb89211342f.

<script partner-id="<partner-id>" src="https://www.zyler.com/js/go-integration/v1/index.js"></script>

Step 2: Including the Try On Buttons

Edit your webpages to add Try On buttons to the PLP and PDP with the following attributes:

1. class="zyler-try-on-cta"
2. data-outfit-handle="<outfit-handle>" where <outfit-handle> is replaced by your product id, which must correspond to the product id field on each outfit in the Partner Portal.
3. style="visibility:hidden" is required to keep the button hidden until some behind-the-scenes checks have completed so that it can be made visible only if the outfit is ready for visualization.
4. Further CSS styling can be applied to the button to fit with your website.

In the following example, the button appears under the product title on the PDP:

For the Try On button in the above, the button element could use the following values:

<button class="zyler-try-on-cta" data-outfit-handle="floral-dress-200413" style="visibility:hidden">Try On</button>

Step 3: Styling Using CSS

For the example screenshot above, the CSS used to style the buttons is as follows:

<style>
  .zyler-try-on-cta {
    display: block;
    border: 1px black solid;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    margin: 0;
    background-color: white;
    cursor: pointer;

    &:hover {
      background-color: #f0eff0;
    }
  }
</style>

This completes the integration steps. Zyler Go is now part of your site.