Skip to main content

Installation

In this guide, we'll walk you through the steps to integrate the ShopAR Plugin seamlessly.

Prerequisites​

Make sure you have a ShopAR Dashboard account.

Make sure you have at least one model added to your account.

Installation​

Using NPM​

Add shopar-plugin to your project:

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

Using <script> tag​

Add the following script to your HTML.

<script src="https://cdn.jsdelivr.net/npm/shopar-plugin@1.2.2/dist/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 setup options for more details).

Setup​

Copy the following code snippet:

<script>
  ShopAR.plugin.setup({
    apiKey: "API_KEY_GOES_HERE",
    sku: "MODEL_ID_GOES_HERE",
    targetElement: document.getElementById("shopAR"),
  });
</script>

Paste the snippet to your product page template and add an HTML element (e.g. div) which has 'shopAR' as the ID.

Yes, it's that simple! ✨

Parameters​

  • The apiKey parameter identifies your account
    • You can find it on the Home page.
  • The sku parameter is the product's name.
    • You can set up any name you want on the My Models page.
  • The targetElement parameter is the HTML element you wish the plugin to embed into.
    • E.g. set it to document.querySelector("#product-carousel") if you want it embedded into the HTML element with ID product-carousel.

Changing parameters at runtime​

To switch to a different model, invoke the setup function once again, providing the new SKU as a parameter:

await ShopAR.plugin.setup({
  apiKey: "API_KEY_GOES_HERE",
  sku: "UPDATED_SKU",
  targetElement: TARGET_ELEMENT_GOES_HERE,
});

Same applies for changing the targetElement parameter.

Starting in 3D mode by default​

To have the plugin start in 3D mode, set the initialState parameter to '3D':

await ShopAR.plugin.setup({
  ...
  initialState: '3D',
});

More information​

Please consult the technical documentation of the official shopar-plugin package on NPM:
https://www.npmjs.com/package/shopar-plugin