Examples

Here are some examples of how you can implement the ShopAR plugin in real world scenarios.

Prerequisites

Make sure you have a ShopAR Dashboard account.
Make sure you have at least one model added to your account.
Make sure you have somewhere to host the plugin webpage

Native WebView

When you implement the ShopAR plugin into a native application you will need to have the ShopAR plugin run on a website which the app can access, and then access that website via the webview. How you host that website is up to you but we would recommend something simple like Amazon's S3 or Cloudfront's R2. Alternatively you can implement a page on your existing website which runs the plugin.

note

The ShopAR plugin requires all domains to be registered in advance with us for AR to work. Please get in touch to add the domain your webview will run on and any staging or local development domains.

Simple

This is a bare bones implementation of the ShopAR plugin. You can use the following code snippet as a basis for your webview page (N.B. you will need to replace the API Key and SKU with one of your own from the dashboard).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ShopAR Plugin Example</title>
    <script src="https://cdn.jsdelivr.net/npm/shopar-plugin@0.8.3/dist/shopar-plugin.js"></script>
  </head>
  <body>
    <div id="shopAR" style="width: 100%; height: 100vh"></div>
    <script>
      ShopAR.plugin.setup({
        apiKey: "YOUR_API_KEY",
        sku: "YOUR_MODEL_SKU",
        targetElement: document.getElementById("shopAR"),
      });
    </script>
  </body>
</html>

Serving multiple products from the same page

You can use a single page to serve the webViews for multiple products by using a query parameter. In this case you would access the webpage using a link as follows:

https://yourdomain.com/shopar?sku=YOUR_SKU

Your webpage would need to read those query parameters and use them to initialize the ShopAR plugin as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ShopAR Plugin Example</title>
    <script src="https://cdn.jsdelivr.net/npm/shopar-plugin@0.8.3/dist/shopar-plugin.js"></script>
  </head>
  <body>
    <div id="shopAR" style="width: 100%; height: 100vh"></div>
    <script>
      let urlParams = new URLSearchParams(window.location.search);
      let sku = urlParams.get("sku");
      const shopAR = await ShopAR.plugin.setup({
        apiKey: "YOUR_API_KEY",
        sku: sku,
        targetElement: document.getElementById("shopAR"),
      });
    </script>
  </body>
</html>

Serve multiple assets & launch directly to AR or 3D

It is also possible to launch directly into 3D or AR without having the user click on a button. If you store the returned object from ShopAR.plugin.launch you can use it to control the behavior of the plugin (see Custom UI).

In this case you would specify the both the SKU and the desired launch behavior in the query parameters.

To launch to 3D: https://yourdomain.com/shopar?sku=YOUR_SKU&launch=3d To launch to AR: https://yourdomain.com/shopar?sku=YOUR_SKU&launch=ar

It's worth noting at this point that you may want to build some custom UI to control this in the way that works best for your use case.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ShopAR Plugin Example</title>
    <script src="https://cdn.jsdelivr.net/npm/shopar-plugin@0.8.3/dist/shopar-plugin.js"></script>
  </head>
  <body>
    <div id="shopAR" style="width: 100%; height: 100vh"></div>
    <script>
      (async () => {
        let urlParams = new URLSearchParams(window.location.search);
        let sku = urlParams.get("sku");
        let launch = urlParams.get("launch");
        const shopAR = await ShopAR.plugin.setup({
          apiKey: "YOUR_API_KEY",
          sku: sku,
          targetElement: document.getElementById("shopAR"),
        });
        if (launch === "ar") {
          await shopAR.launchAR?.();
        } else {
          await shopAR.launch3D?.();
        }
      })();
    </script>
  </body>
</html>

React

The ShopAR plugin also works great in React. This example below shows a simple implementation.

import { useEffect, useRef } from "react";
import * as ShopAR from "shopar-plugin";

export default function ShopARPlugin({
  sku,
  initialState = "3d",
}: {
  sku: string;
  initialState?: "3d" | "ar";
  //... any other props you want to pass to the plugin that will suit your use case
}) {
  const shopARElementRef = useRef<HTMLDivElement>(null);
  const shopARPluginActions = useRef<{ close?: () => Promise<void> } | null>(
    null
  );

  // Setup the plugin
  useEffect(() => {
    if (!shopARElementRef.current || !sku) return;

    const setupShopAR = async () => {
      const actions = await ShopAR.plugin.setup({
        // Your API Key can be found in the dashboard under settings
        apiKey: "YOUR_API_KEY",
        //The SKU of the model you want to display, you can get this from the dashboard
        sku,
        // The element that the plugin will be rendered into
        targetElement: shopARElementRef.current as HTMLDivElement,
        // The initial state of the plugin, either '3d' or 'ar' (optional)
        initialState,
      });
      shopARPluginActions.current = {
        // Launch the plugin in 3D
        launch3D: actions.launch3D,
        // Launch the plugin in AR
        launchAR: actions.launchAR,
        // Close the plugin in AR
        closeAR: actions.closeAR,
        // Close the plugin in 3D
        close3D: actions.close3D,
        // Close the plugin whether in 3D or AR
        close: actions.close,
      };
    };

    setupShopAR().catch(console.error);

    // Cleanup the plugin
    return () => {
      shopARPluginActions.current?.close?.().catch(console.error);
    };
  }, [sku]);

  return (
    <div className="relative h-full w-full">
      {/* The plugin will be rendered into this element. The 3D background is transparent so you can use CSS to control the background color of the element */}
      <div id="shopAR" ref={shopARElementRef} className="w-full h-full" />
    </div>
  );
}

Prerequisites​

Native WebView​

Simple​

Serving multiple products from the same page​

Serve multiple assets & launch directly to AR or 3D​

React​