@plattar/plattar-ar-adapter 1.188.2 → 1.188.4

package/dist/ar/configurator-ar.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfiguratorAR = void 0;
 const plattar_analytics_1 = require("@plattar/plattar-analytics");
 const plattar_api_1 = require("@plattar/plattar-api");
-const plattar_services_1 = require("@plattar/plattar-services");
 const util_1 = require("../util/util");
 const quicklook_viewer_1 = __importDefault(require("../viewers/quicklook-viewer"));
 const scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
@@ -58,31 +57,30 @@ class ConfiguratorAR extends launcher_ar_1.LauncherAR {
      * an AR File
      */
     async _Compose(output) {
-        const objects = this._options.state.state.array();
-        if (objects.length <= 0) {
-            throw new Error("ConfiguratorAR.Compose() - cannot proceed as scene does not contain AR components");
-        }
-        // define our configurator
-        const configurator = new plattar_services_1.Configurator();
-        configurator.server = plattar_api_1.Server.location().type;
-        configurator.output = output;
-        let totalARObjectCount = 0;
-        objects.forEach((object) => {
-            if (object.meta_data.augment) {
-                if (object.meta_data.type === "scenemodel") {
-                    configurator.addModel(object.scene_product_id);
-                }
-                else {
-                    configurator.addSceneProduct(object.scene_product_id, object.product_variation_id);
-                }
-                totalARObjectCount++;
+        const type = output === 'glb' ? "viewer" : "reality";
+        const url = `https://xrutils.plattar.com/v3/scene/${this._options.state.scene.id}/${type}`;
+        // grab our existing scene-graph from the saved API
+        try {
+            const response = await fetch(url, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    data: {
+                        attributes: this._options.state.state.sceneGraph
+                    }
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`ConfiguratorAR - Fetching Existing Graph Error - network response was not ok ${response.status}`);
             }
-        });
-        if (totalARObjectCount <= 0) {
-            throw new Error("ConfiguratorAR.Compose() - cannot proceed as scene does not contain any enabled AR components");
+            const data = await response.json();
+            return data.data.attributes.url;
+        }
+        catch (error) {
+            throw new Error(`ConfiguratorAR - Fetching Existing Graph Error - there was a request error to ${url}, error was ${error.message}`);
         }
-        const results = await configurator.get();
-        return results.filename;
     }
     /**
      * Initialise the SceneAR instance. This returns a Promise that resolves

package/dist/ar/scene-graph-ar.d.ts

@@ -0,0 +1,33 @@
+import { LauncherAR } from "./launcher-ar";
+export interface SceneGraphAROptions {
+    readonly id: string;
+    readonly sceneID: string;
+    readonly useARBanner: boolean;
+}
+/**
+ * Performs AR functionality related to Plattar Scenes
+ */
+export declare class SceneGraphAR extends LauncherAR {
+    private _analytics;
+    private _options;
+    private _ar;
+    constructor(options: SceneGraphAROptions);
+    private _SetupAnalytics;
+    /**
+     * Composes a Scene into an AR Model (remote operation) that can be used to launch
+     * an AR File
+     */
+    private _Compose;
+    /**
+     * Initialise the SceneAR instance. This returns a Promise that resolves
+     * successfully if initialisation is successful, otherwise it will fail.
+     *
+     * filure can occur for a number of reasons but it generally means that AR
+     * cannot be performed.
+     */
+    init(): Promise<LauncherAR>;
+    start(): void;
+    canQuicklook(): boolean;
+    canRealityViewer(): boolean;
+    canSceneViewer(): boolean;
+}

package/dist/ar/scene-graph-ar.js

@@ -0,0 +1,159 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SceneGraphAR = void 0;
+const plattar_analytics_1 = require("@plattar/plattar-analytics");
+const plattar_api_1 = require("@plattar/plattar-api");
+const util_1 = require("../util/util");
+const quicklook_viewer_1 = __importDefault(require("../viewers/quicklook-viewer"));
+const scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
+const launcher_ar_1 = require("./launcher-ar");
+const version_1 = __importDefault(require("../version"));
+/**
+ * Performs AR functionality related to Plattar Scenes
+ */
+class SceneGraphAR extends launcher_ar_1.LauncherAR {
+    constructor(options) {
+        super();
+        // analytics instance
+        this._analytics = null;
+        this._options = options;
+        this._ar = null;
+    }
+    async _SetupAnalytics() {
+        const scene = new plattar_api_1.Scene(this._options.sceneID);
+        scene.include(plattar_api_1.Project);
+        const fetchedScene = await scene.get();
+        let analytics = null;
+        analytics = new plattar_analytics_1.Analytics(fetchedScene.attributes.application_id);
+        analytics.origin = plattar_api_1.Server.location().type;
+        this._analytics = analytics;
+        analytics.data.push("type", "scene-graph-ar");
+        analytics.data.push("sdkVersion", version_1.default);
+        analytics.data.push("sceneId", fetchedScene.id);
+        analytics.data.push("sceneTitle", fetchedScene.attributes.title);
+        const application = fetchedScene.relationships.find(plattar_api_1.Project);
+        // setup application stuff (if any)
+        if (application) {
+            analytics.data.push("applicationId", application.id);
+            analytics.data.push("applicationTitle", application.attributes.title);
+            if (this._options.useARBanner) {
+                this.options.banner = {
+                    title: application.attributes.title,
+                    subtitle: fetchedScene.attributes.title,
+                    button: 'Visit'
+                };
+            }
+        }
+        return fetchedScene;
+    }
+    /**
+     * Composes a Scene into an AR Model (remote operation) that can be used to launch
+     * an AR File
+     */
+    async _Compose(output) {
+        const type = output === 'glb' ? "viewer" : "reality";
+        const url = `https://xrutils.plattar.com/v3/scene/${this._options.sceneID}/${type}/${this._options.id}`;
+        // grab our existing scene-graph from the saved API
+        try {
+            const response = await fetch(url, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`ARAdapter - Fetching Existing Graph Error - network response was not ok ${response.status}`);
+            }
+            const data = await response.json();
+            return data.data.attributes.url;
+        }
+        catch (error) {
+            throw new Error(`ARAdapter - Fetching Existing Graph Error - there was a request error to ${url}, error was ${error.message}`);
+        }
+    }
+    /**
+     * Initialise the SceneAR instance. This returns a Promise that resolves
+     * successfully if initialisation is successful, otherwise it will fail.
+     *
+     * filure can occur for a number of reasons but it generally means that AR
+     * cannot be performed.
+     */
+    async init() {
+        if (!util_1.Util.canAugment()) {
+            throw new Error("SceneGraphAR.init() - cannot proceed as AR not available in context");
+        }
+        const scene = await this._SetupAnalytics();
+        const sceneOpt = scene.attributes.custom_json || {};
+        // we need to define our AR module here
+        // we are in Safari/Quicklook mode here
+        if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
+            // we need to launch a VTO experience here
+            // VTO requires Reality Support
+            if (sceneOpt.anchor === "face") {
+                if (util_1.Util.canRealityViewer()) {
+                    const modelUrl = await this._Compose("vto");
+                    this._ar = new quicklook_viewer_1.default();
+                    this._ar.modelUrl = modelUrl;
+                    this._ar.banner = this.options.banner;
+                    return this;
+                }
+                else {
+                    throw new Error("SceneGraphAR.init() - cannot proceed as VTO AR requires Reality Viewer support");
+                }
+            }
+            // otherwise, load the USDZ stuff second if available
+            if (util_1.Util.canQuicklook()) {
+                const modelUrl = await this._Compose("usdz");
+                this._ar = new quicklook_viewer_1.default();
+                this._ar.modelUrl = modelUrl;
+                this._ar.banner = this.options.banner;
+                return this;
+            }
+            throw new Error("SceneGraphAR.init() - cannot proceed as IOS device does not support AR Mode");
+        }
+        // check android
+        if (util_1.Util.canSceneViewer()) {
+            const modelUrl = await this._Compose("glb");
+            const arviewer = new scene_viewer_1.default();
+            arviewer.modelUrl = modelUrl;
+            arviewer.isVertical = this.options.anchor === "vertical" ? true : false;
+            arviewer.banner = this.options.banner;
+            if (sceneOpt.anchor === "vertical") {
+                arviewer.isVertical = true;
+            }
+            this._ar = arviewer;
+            return this;
+        }
+        // otherwise, we didn't have AR available - it should never really reach this stage as this should be caught
+        // earlier in the process
+        throw new Error("SceneGraphAR.init() - could not initialise AR correctly, check values");
+    }
+    start() {
+        if (!this._ar) {
+            throw new Error("SceneGraphAR.start() - cannot proceed as AR instance is null");
+        }
+        const analytics = this._analytics;
+        if (analytics) {
+            analytics.data.push("device", this._ar.device);
+            analytics.data.push("eventCategory", this._ar.nodeType);
+            analytics.data.push("eventAction", "Start Scene Augment");
+            analytics.write();
+            analytics.startRecordEngagement();
+        }
+        // this was initialised via the init() function
+        this._ar.start();
+    }
+    canQuicklook() {
+        return this._ar && this._ar.nodeType === "Quick Look" ? true : false;
+    }
+    canRealityViewer() {
+        return this._ar && this._ar.nodeType === "Reality Viewer" ? true : false;
+    }
+    canSceneViewer() {
+        return this._ar && this._ar.nodeType === "Scene Viewer" ? true : false;
+    }
+}
+exports.SceneGraphAR = SceneGraphAR;

package/dist/embed/controllers/configurator-controller.d.ts

@@ -1,6 +1,6 @@
 import { LauncherAR } from "../../ar/launcher-ar";
 import { DecodedConfiguratorState } from "../../util/configurator-state";
-import { PlattarController } from "./plattar-controller";
+import { PlattarController, QRCodeOptions } from "./plattar-controller";
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
@@ -9,7 +9,7 @@ export declare class ConfiguratorController extends PlattarController {
     getConfiguratorState(): Promise<DecodedConfiguratorState>;
     onAttributesUpdated(attributeName: string): Promise<void>;
     startARQRCode(options: any): Promise<HTMLElement>;
-    startViewerQRCode(options: any): Promise<HTMLElement>;
+    startViewerQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     startRenderer(): Promise<HTMLElement>;
     initAR(): Promise<LauncherAR>;
     /**

package/dist/embed/controllers/configurator-controller.js

@@ -6,6 +6,7 @@ const scene_product_ar_1 = require("../../ar/scene-product-ar");
 const util_1 = require("../../util/util");
 const plattar_controller_1 = require("./plattar-controller");
 const configurator_ar_1 = require("../../ar/configurator-ar");
+const scene_graph_ar_1 = require("../../ar/scene-graph-ar");
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
@@ -89,8 +90,11 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         return super.startARQRCode(options);
     }
     async startViewerQRCode(options) {
+        const opt = this._GetDefaultQROptions(options);
         // remove the old renderer instance if any
-        this.removeRenderer();
+        if (!opt.detached) {
+            this.removeRenderer();
+        }
         const sceneID = this.getAttribute("scene-id");
         if (!sceneID) {
             throw new Error("ConfiguratorController.startViewerQRCode() - minimum required attributes not set, use scene-id as a minimum");
@@ -120,9 +124,10 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
             // config state is not available
             configState = null;
         }
-        const opt = options || this._GetDefaultQROptions();
         const viewer = document.createElement("plattar-qrcode");
-        this._element = viewer;
+        if (!opt.detached) {
+            this._element = viewer;
+        }
         // required attributes with defaults for plattar-viewer node
         const width = this.getAttribute("width") || "500px";
         const height = this.getAttribute("height") || "500px";
@@ -142,6 +147,7 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         const showAR = this.getAttribute("show-ar");
         const showUI = this.getAttribute("show-ui");
         const showBanner = this.getAttribute("show-ar-banner");
+        const sceneGraphID = this.getAttribute("scene-graph-id");
         if (showUI && showUI === "true") {
             dst = plattar_api_1.Server.location().base + "configurator/dist/index.html?scene_id=" + sceneID;
         }
@@ -154,14 +160,22 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         if (showBanner) {
             dst += "&show_ar_banner=" + showBanner;
         }
+        if (sceneGraphID) {
+            dst += "&scene_graph_id=" + sceneGraphID;
+        }
         viewer.setAttribute("url", opt.url || dst);
-        this._state = plattar_controller_1.ControllerState.QRCode;
         this._prevQROpt = opt;
+        if (!opt.detached) {
+            this._state = plattar_controller_1.ControllerState.QRCode;
+            return new Promise((accept, reject) => {
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+                this.append(viewer);
+            });
+        }
         return new Promise((accept, reject) => {
-            viewer.onload = () => {
-                return accept(viewer);
-            };
-            this.append(viewer);
+            return accept(viewer);
         });
     }
     async startRenderer() {
@@ -293,6 +307,16 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         if (!sceneID) {
             throw new Error("VTOController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
         }
+        const graphID = this.getAttribute("scene-graph-id");
+        // use the scene-graph route if available
+        if (graphID) {
+            const configAR = new scene_graph_ar_1.SceneGraphAR({
+                useARBanner: this.getBooleanAttribute("show-ar-banner"),
+                id: graphID,
+                sceneID: sceneID
+            });
+            return configAR.init();
+        }
         const configAR = new configurator_ar_1.ConfiguratorAR({ state: await this.getConfiguratorState(), useARBanner: this.getBooleanAttribute("show-ar-banner") });
         return configAR.init();
     }

package/dist/embed/controllers/gallery-controller.d.ts

@@ -1,6 +1,6 @@
 import { LauncherAR } from "../../ar/launcher-ar";
 import { DecodedConfiguratorState } from "../../util/configurator-state";
-import { PlattarController } from "./plattar-controller";
+import { PlattarController, QRCodeOptions } from "./plattar-controller";
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
@@ -8,7 +8,7 @@ export declare class GalleryController extends PlattarController {
     private _cachedConfigState;
     getConfiguratorState(): Promise<DecodedConfiguratorState>;
     onAttributesUpdated(attributeName: string): Promise<void>;
-    startViewerQRCode(options: any): Promise<HTMLElement>;
+    startViewerQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     startRenderer(): Promise<HTMLElement>;
     initAR(): Promise<LauncherAR>;
     get element(): HTMLElement | null;

package/dist/embed/controllers/gallery-controller.js

@@ -43,15 +43,19 @@ class GalleryController extends plattar_controller_1.PlattarController {
         }
     }
     async startViewerQRCode(options) {
+        const opt = this._GetDefaultQROptions(options);
         // remove the old renderer instance if any
-        this.removeRenderer();
+        if (!opt.detached) {
+            this.removeRenderer();
+        }
         const sceneID = this.getAttribute("scene-id");
         if (!sceneID) {
             throw new Error("GalleryController.startViewerQRCode() - minimum required attributes not set, use scene-id as a minimum");
         }
-        const opt = options || this._GetDefaultQROptions();
         const viewer = document.createElement("plattar-qrcode");
-        this._element = viewer;
+        if (!opt.detached) {
+            this._element = viewer;
+        }
         // required attributes with defaults for plattar-viewer node
         const width = this.getAttribute("width") || "500px";
         const height = this.getAttribute("height") || "500px";
@@ -69,13 +73,18 @@ class GalleryController extends plattar_controller_1.PlattarController {
         viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
         const dst = plattar_api_1.Server.location().base + "renderer/gallery.html?scene_id=" + sceneID;
         viewer.setAttribute("url", opt.url || dst);
-        this._state = plattar_controller_1.ControllerState.QRCode;
         this._prevQROpt = opt;
+        if (!opt.detached) {
+            this._state = plattar_controller_1.ControllerState.QRCode;
+            return new Promise((accept, reject) => {
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+                this.append(viewer);
+            });
+        }
         return new Promise((accept, reject) => {
-            viewer.onload = () => {
-                return accept(viewer);
-            };
-            this.append(viewer);
+            return accept(viewer);
         });
     }
     async startRenderer() {

package/dist/embed/controllers/launcher-controller.js

@@ -5,6 +5,7 @@ const scene_product_ar_1 = require("../../ar/scene-product-ar");
 const util_1 = require("../../util/util");
 const plattar_controller_1 = require("./plattar-controller");
 const configurator_ar_1 = require("../../ar/configurator-ar");
+const scene_graph_ar_1 = require("../../ar/scene-graph-ar");
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
@@ -88,6 +89,7 @@ class LauncherController extends plattar_controller_1.PlattarController {
         const variationSKU = this.getAttribute("variation-sku");
         const arMode = this.getAttribute("ar-mode");
         const showBanner = this.getAttribute("show-ar-banner");
+        const sceneGraphID = this.getAttribute("scene-graph-id");
         // required attributes with defaults for plattar-launcher node
         const width = this.getAttribute("width") || "500px";
         const height = this.getAttribute("height") || "500px";
@@ -120,10 +122,18 @@ class LauncherController extends plattar_controller_1.PlattarController {
         if (showBanner) {
             viewer.setAttribute("show-ar-banner", showBanner);
         }
-        if (configState) {
-            const encodedState = configState.state.encode();
-            if (encodedState.length < 6000) {
-                viewer.setAttribute("config-state", encodedState);
+        if (sceneGraphID) {
+            viewer.setAttribute("scene-graph-id", sceneGraphID);
+        }
+        else {
+            try {
+                const sceneGraphID = await (await this.getConfiguratorState()).state.encodeSceneGraphID();
+                viewer.setAttribute("scene-graph-id", sceneGraphID);
+            }
+            catch (_err) {
+                // scene graph ID not available for some reason
+                // we will generate a new one
+                console.error(_err);
             }
         }
         return new Promise((accept, reject) => {
@@ -198,6 +208,16 @@ class LauncherController extends plattar_controller_1.PlattarController {
         if (!sceneID) {
             throw new Error("LauncherController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
         }
+        const graphID = this.getAttribute("scene-graph-id");
+        // use the scene-graph route if available
+        if (graphID) {
+            const configAR = new scene_graph_ar_1.SceneGraphAR({
+                useARBanner: this.getBooleanAttribute("show-ar-banner"),
+                id: graphID,
+                sceneID: sceneID
+            });
+            return configAR.init();
+        }
         const configAR = new configurator_ar_1.ConfiguratorAR({ state: await this.getConfiguratorState(), useARBanner: this.getBooleanAttribute("show-ar-banner") });
         return configAR.init();
     }

package/dist/embed/controllers/plattar-controller.d.ts

@@ -6,6 +6,14 @@ export declare enum ControllerState {
     Renderer = 1,
     QRCode = 2
 }
+export interface QRCodeOptions {
+    readonly color: string;
+    readonly qrType: string;
+    readonly shorten: boolean;
+    readonly margin: number;
+    readonly detached: boolean;
+    readonly url?: string | null;
+}
 /**
  * All Plattar Controllers are derived from the same interface
  */
@@ -13,7 +21,7 @@ export declare abstract class PlattarController {
     /**
      * Default QR Code rendering options
      */
-    protected _GetDefaultQROptions(): any;
+    protected _GetDefaultQROptions(opt?: QRCodeOptions | undefined | null): QRCodeOptions;
     private readonly _parent;
     protected _state: ControllerState;
     protected _element: HTMLElement | null;
@@ -56,19 +64,19 @@ export declare abstract class PlattarController {
      * Start Rendering a QR Code with the provided options
      * @param options (optional) - The QR Code Options
      */
-    abstract startViewerQRCode(options: any | undefined | null): Promise<HTMLElement>;
+    abstract startViewerQRCode(options: QRCodeOptions | undefined | null): Promise<HTMLElement>;
     /**
      * Decide which QR Code to render according to the qr-type attribute
      * @param options
      * @returns
      */
-    startQRCode(options: any): Promise<HTMLElement>;
+    startQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     /**
      * Displays a QR Code that sends the user direct to AR
      * @param options
      * @returns
      */
-    startARQRCode(options: any): Promise<HTMLElement>;
+    startARQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     /**
      * Initialise and return a launcher that can be used to start AR
      */

package/dist/embed/controllers/plattar-controller.js

@@ -16,12 +16,15 @@ class PlattarController {
     /**
      * Default QR Code rendering options
      */
-    _GetDefaultQROptions() {
+    _GetDefaultQROptions(opt = null) {
+        const options = opt ?? {};
         return {
-            color: this.getAttribute("qr-color") || "#101721",
-            qrType: this.getAttribute("qr-style") || "default",
-            shorten: this.getAttribute("qr-shorten") || true,
-            margin: 0
+            color: options.color ?? (this.getAttribute("qr-color") || "#101721"),
+            qrType: options.qrType ?? (this.getAttribute("qr-style") || "default"),
+            shorten: options.shorten ?? (this.getBooleanAttribute("qr-shorten") || true),
+            margin: options.margin ?? 0,
+            detached: options.detached ?? (this.getBooleanAttribute("qr-detached") || false),
+            url: options.url ?? null
         };
     }
     ;
@@ -140,11 +143,13 @@ class PlattarController {
      * @returns
      */
     async startARQRCode(options) {
-        // remove the old renderer instance if any
-        this.removeRenderer();
-        const opt = options || this._GetDefaultQROptions();
+        const opt = this._GetDefaultQROptions(options);
         const viewer = document.createElement("plattar-qrcode");
-        this._element = viewer;
+        // remove the old renderer instance if any
+        if (!opt.detached) {
+            this.removeRenderer();
+            this._element = viewer;
+        }
         // required attributes with defaults for plattar-viewer node
         const width = this.getAttribute("width") || "500px";
         const height = this.getAttribute("height") || "500px";
@@ -154,7 +159,7 @@ class PlattarController {
             viewer.setAttribute("color", opt.color);
         }
         if (opt.margin) {
-            viewer.setAttribute("margin", "" + opt.margin);
+            viewer.setAttribute("margin", `${opt.margin}`);
         }
         if (opt.qrType) {
             viewer.setAttribute("qr-type", opt.qrType);
@@ -162,7 +167,7 @@ class PlattarController {
         viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
         const qrOptions = btoa(JSON.stringify(opt));
         let dst = plattar_api_1.Server.location().base + "renderer/launcher.html?qr_options=" + qrOptions;
-        let configState = null;
+        //let configState: string | null = null;
         const sceneID = this.getAttribute("scene-id");
         const embedType = this.getAttribute("embed-type");
         const productID = this.getAttribute("product-id");
@@ -171,16 +176,7 @@ class PlattarController {
         const variationSKU = this.getAttribute("variation-sku");
         const arMode = this.getAttribute("ar-mode");
         const showBanner = this.getAttribute("show-ar-banner");
-        try {
-            configState = (await this.getConfiguratorState()).state.encode();
-        }
-        catch (_err) {
-            // config state not available for some reason
-            configState = null;
-        }
-        if (configState) {
-            dst += "&config_state=" + configState;
-        }
+        const sceneGraphID = this.getAttribute("scene-graph-id");
         if (embedType) {
             dst += "&embed_type=" + embedType;
         }
@@ -205,14 +201,33 @@ class PlattarController {
         if (showBanner) {
             dst += "&show_ar_banner=" + showBanner;
         }
+        if (sceneGraphID) {
+            dst += "&scene_graph_id" + sceneGraphID;
+        }
+        else {
+            try {
+                const sceneGraphID = await (await this.getConfiguratorState()).state.encodeSceneGraphID();
+                dst += "&scene_graph_id=" + sceneGraphID;
+            }
+            catch (_err) {
+                // scene graph ID not available for some reason
+                // we will generate a new one
+                console.error(_err);
+            }
+        }
         viewer.setAttribute("url", opt.url || dst);
-        this._state = ControllerState.QRCode;
         this._prevQROpt = opt;
+        if (!opt.detached) {
+            this._state = ControllerState.QRCode;
+            return new Promise((accept, reject) => {
+                this.append(viewer);
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+            });
+        }
         return new Promise((accept, reject) => {
-            this.append(viewer);
-            viewer.onload = () => {
-                return accept(viewer);
-            };
+            return accept(viewer);
         });
     }
     /**

package/dist/embed/controllers/vto-controller.d.ts

@@ -1,6 +1,6 @@
 import { LauncherAR } from "../../ar/launcher-ar";
 import { DecodedConfiguratorState } from "../../util/configurator-state";
-import { PlattarController } from "./plattar-controller";
+import { PlattarController, QRCodeOptions } from "./plattar-controller";
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
@@ -8,7 +8,7 @@ export declare class VTOController extends PlattarController {
     private _cachedConfigState;
     getConfiguratorState(): Promise<DecodedConfiguratorState>;
     onAttributesUpdated(attributeName: string): Promise<void>;
-    startViewerQRCode(options: any): Promise<HTMLElement>;
+    startViewerQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     startRenderer(): Promise<HTMLElement>;
     initAR(): Promise<LauncherAR>;
     /**