shopar-plugin

ShopAR Plugin

Plugin for the Web that seamlessly integrates into your webpage to create embedded virtual try-on and 3D preview capabilities.

Powered and developed by DeepAR.

Table of contents

• ShopAR Plugin
  • Table of contents
  • Getting started
  • Installation
    • via Script tag
    • via NPM
  • Usage
  • API
    • ShopAR.plugin.setup(options)
  • License

Getting started

Create an account in the ShopAR Dashboard.

Add some models to your account. Make sure the models' client IDs match the product IDs on your website.

Installation

There are two distinct ways of integrating the plugin: via Script tag and via NPM.

via Script tag

Add the following script to your HTML.

<script src="https://cdn.jsdelivr.net/npm/shopar-plugin/shopar-plugin.js"></script>

It is possible to use a different CDN instead of jsDelivr (e.g. cdnjs, unpkg), or even a relative path if the plugin is distributed as a static asset to your app. Just make sure to set the baseUrl parameter accordingly (see plugin.setup for more details).

via NPM

Add shopar-plugin to your project:

npm install shopar-plugin
# or
yarn add shopar-plugin

Usage

Paste the following snippet in your HTML.

<script>
  ShopAR.plugin.setup({
    apiKey: 'API_KEY',
    sku: 'PRODUCT_ID',
    targetElement: 'TARGET_ELEMENT',
  });
</script>

• Replace API_KEY with your API key. You can find it in the ShopAR Dashboard.
• Replace PRODUCT_ID with the ID of the product. Make sure it matches the client ID in the ShopAR Dashboard.
• Replace TARGET_ELEMENT with the HTML element you wish to embed the plugin's UI into.

To change the look-and-feel of the plugin's UI, modify the following CSS classes:

.shopar-btn-container {
  /* Container for the control buttons. */
}
.shopar-btn {
  /* Control button. */
}
.shopar-btn.active {
  /* Toggled control button. */
}

API

ShopAR.plugin.setup(options)

This method fetches the specified product from the ShopAR Dashboard and renders the plugin's UI.

Options used for the plugin setup:

• apiKey
  • Type: string
  • API key found in the ShopAR dashboard.
• sku
  • Type: string
  • Product identifier.
• targetElement
  • Type: HTMLElement
  • The element to inflate with ShopAR UI.
  • Its CSS position property must be either static or relative.
• baseUrl (optional)
  • Type: string
  • If provided, defines where the additional ShopAR plugin files are fetched from.
  • Default value: https://cdn.jsdelivr.net/npm/shopar-plugin@${version}/

License

Please see: https://developer.deepar.ai/customer-agreement