Intiaro WebAR¶

Introduction¶

The Intiaro WebAR is a powerful tool for integrating augmented reality (AR) experiences into your web applications.

This library provides the means to seamlessly display AR content for your products using a simple and straightforward API.

Getting Started¶

To use the webAR, include the following script tag in your HTML document:

<script src="https://libs.intiaro.com/webar/1.0.0/webAr.js"></script>

Initializing the WebAR Service¶

Before you can start using the webAR, you need to initialize the WebarService with your customer ID. Here’s how you can do it:

const webarService = await IntiaroWebar.WebarService.create("customerId");

Displaying WebAR¶

To display an AR experience, you can call the ‘showWebAr’ method on the ‘webarService’ instance. The method takes two parameters:
‘productId’: This should be the SKU of the product you want to display.
‘Configuration’ (optional): This parameter is used to specify product options. If the provided configuration will not be complete, it will be filled in using a default configuration.

Here’s how to use the showWebAr method:

await webarService.showWebAr("productId");

Replace “productId” with the ID or SKU of the product you want to display. Configuration should be an object containing the necessary product options and configuration settings.

The ‘showWebAr’ method will finish execution when the AR experience is ready and a popup or model is displayed. It may be a good idea to add loading information as getting a product model may take a couple of seconds.

Live example¶

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.intiaro.com/webar/1.0.0/webAr.js"></script>
  </head>
  <body>
    <button type="button" id="showWebAr">Start Intiaro WebAR experience</button>
  </body>
  <script>
    var webarService;
    async function initializeWebar(){
      webarService = await IntiaroWebar.WebarService.create('showcase');
    }
    initializeWebar();

    document.getElementById("showWebAr").addEventListener("click", async (element)=>{
      element.target.innerHTML = "loading..";
      await webarService.showWebAr('8763');
      element.target.innerHTML = "Start Intiaro WebAR experience";
    });
  </script>
</html>

Troubleshooting¶

If you encounter any issues or have questions about using the Intiaro WebAr, please contact our customer support team for assistance.