Quick Start Guide

Guide for 30-seconds Sprie integration 🔥🔥🔥

Pre-requisites

1. Acquire the apikey from Sprie.
2. Make sure the SKUs for the products are in sync with Sprie.
3. Make sure your development or production urls are configured properly with Sprie (AllowList).
4. Have a simple index.html getting served from a file server / web server.

Integrate

Copy paste this code in a html file

<!-- STEP 1. Load Sprie CDN Script with api key (most preferred way to integrate )-->
<script src="https://cdn.jsdelivr.net/npm/@perceptimagery/sprie-widget@latest?apikey={apikey}"></script>

<!-- STEP 2. Trigger the Virtual Try On-->
<button onclick="SprieSDK.Load('product-sku');">Try On</button>

Remember to replace the {apikey} with a valid apikey that you received from Sprie.

Explanation

1. Integrate SprieSDK from CDN. Since its on CDN, Sprie will be cached in your browser and will work faster on subsequent page visits.
2. Initialise SprieSDK with the apikey (from pre-requisites). Without this step, Sprie will throw error.
3. Trigger Virtual Tryon Loader with SprieSDK Load method. SprieSDK is exported globally through window object.