Logo

Docs

Quick Start Guide

10 seconds superfast Sprie integration 🔥🔥🔥

Pre-requisites

  1. Just have the apikey from sprie.
  2. Make sure the SKUs for the products are in sync with Sprie as well.
  3. Make sure your production url is configured properly with Sprie Settings (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 -->
<button onclick="SprieSDK.Load('product-sku');">Preview</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.

List of all the methods and events are described in detail in the following doc pages.