Zizr Frontend Plugin Integration Guide

This guide provides detailed instructions for integrating the Zizr frontend plugin into your store. Follow the steps below to ensure successful integration and display of Zizr recommendations on your site.

Requirements

To integrate the Zizr frontend plugin, you must meet the following requirements:

A Store ID from Zizr to access our APIs.
Your domain must be whitelisted by Zizr.

To obtain a Store ID and whitelist your domain, please contact us at contact@zizr.id.

Implementing the Zizr Frontend Plugin in Your Store

To implement the Zizr frontend plugin, follow these steps:

Add a Script:
Import the zizr.js script into your page's <head> tag. Ensure that their execution is deferred until the page is fully loaded:
```
<script defer src="https://zizr.id/integration/{store-id}.js"></script>
```
Add Zizr Container:
Add a div element with the id zizr where you want the Zizr recommendations to be displayed. This element will serve as the Zizr container:
```
<div
  id="zizr"
  data-retailer-identifier="{store-id}"
  data-model-style-id="123"
></div>
```
Configure the Zizr Container:
The Zizr plugin uses data-* attributes to configure its behavior.
- data-retailer-identifier: (Optional) The unique identifier issued to you by Zizr. By default, this is set to your domain name.
- data-model-style-id: (Required if URL identification is not configured and data-model-id is not provided) The ID of the product variant for which you want to get recommendations. This ID must match the "modelStyleId" field of a product uploaded to Zizr.
- data-model-id: (Required if URL identification is not configured and data-model-style-id is not provided) Unique identifier for the product model. Can be used as an alternative to data-model-style-id in case there's no specific ID for the product variants.
- data-language: (Optional) Set the ISO code for the desired display language. The default value is en.
For example:
```
<div
  id="zizr"
  data-retailer-identifier="{store-id}"
  data-model-id="123"
  data-language="no"
></div>
```

Parameters

Parameter	Description	Default	Required
retailer-identifier	Identifier issued to the retailer to gain access to our recommendations. Defaults to the domain name.	Domain Name	No
model-style-id	The ID of the product variant for which to get a recommendation. Required if URL identification is not configured and `model-id` is not provided.		Yes, one of `model-style-id` or `model-id` if URL identification is absent
model-id	The ID of the product model for which to get a recommendation. Required if URL identification is not configured and `model-style-id` is not provided.		Yes, one of `model-style-id` or `model-id` if URL identification is absent
language	ISO code for the display language.	en	No

Note

For the entire list of parameters, refer to the Zizr Frontend Plugin API Reference.

Integration examples

Basic Shoes Example

Basic Dress Example

Basic Shorts Example

Note

Ensure you replace {store-id} with your actual store identifier in the script and link URLs.