Custom UI

For production use, we recommend building your own UI. This allows you to track user interactions with your own analytics and integrate the plugin seamlessly into your existing design system.

Instructions

Set the defaultUI parameter to false:

const shopAR = await ShopAR.plugin.setup({
  // ...
  defaultUI: false,
});

Use the returned object as a controller:

await shopAR.launchAR?.();
await shopAR.closeAR?.();

await shopAR.launch3D?.();
await shopAR.close3D?.();
// or just
await shopAR.close?.();

Notice how the controller actions can be undefined. This enables you to conditionally show/hide the related UI at runtime.

Custom buttons

Connect the controller to your custom control UI:

customARButton.onclick = shopAR.launchAR;
customARButton.disabled = shopAR.launchAR === undefined;
customCloseARButton.onclick = shopAR.closeAR;
customCloseARButton.disabled = shopAR.closeAR === undefined;

custom3DButton.onclick = shopAR.launch3D;
custom3DButton.disabled = shopAR.launch3D === undefined;
customClose3DButton.onclick = shopAR.close3D;
customClose3DButton.disabled = shopAR.close3D === undefined;
// or just
customCloseAllButton.onclick = shopAR.close;
customCloseAllButton.disabled = shopAR.close === undefined;

Custom loading and error screens

Both launchAR and launch3D return a promise object. This makes it possible to define custom loading and error handling logic:

if (shopAR.launchAR !== undefined) {
  // show loading
  try {
    await shopAR.launchAR();
  } catch (error) {
    // show error
  }
  // hide loading
}