Examples of the Web AR API SDK

ALL EXAMPLES ASSUME USAGE FROM CDN. IF USING FROM NPM, REMOVE MxtWebAR. PREFIX FROM ALL CLASS CALLS

Note also, that all examples are functions… don't forget to actually call these functions! Also, feel free to have these outside of functions, in your functions, or whatever you want to do!

Checking if an SKU has a WebAR asset

It is usually a good idea to use this call before using getWebArPregeneratedUrl as it is faster, and the manifest is used to determine if the webAR asset exists in browser cached for one hour.

So, for example, if you are using WebAR assets on your PDP pages, as customers go between different PDP pages, the manifest will get browser cached and calls to getAssetTypesAvailable should be lightning fast.

In the example below, make sure that you replace myApiKey and myClientId with your own, as provided by your Account Director.

async function checkForWebArAsset(sku) { const browserArType = MxtWebAR.MxtWebArHelpers.browserArSupport(); const pregenerated = new MxtWebAR.MxtWebArPregenerated({apiKey:'myApiKey', clientId:'myClientId'}); try { const arAssetsAvailable = await pregenerated.getAssetTypesAvailable(sku); if(!browserArType) { //CANT USE WEB AR IN THIS BROWSER, if there are arAssetsAvailable, make a QR code to direct the user to the redirect page. } else if(arAssetsAvailable.includes(browserArType)) { //Web AR Assets are available and work in this browser! } else { //Web AR Assets would work in this browser, but we don't have any! } } catch(e) { console.error('Failed to check if sku has web ar asset', e); } }

Adding the WebAR Asset to an <a> element as the HREF

After checking that the SKU has a WebAR asset, you can get the WebAR asset by doing this.

  • NOTE: you can use the same pregenerated instance that was created in the previous example; you do not have to create a new one.

  • NOTE: this will automatically format the URL in a way the browser understands, in order to open it as a WebAR asset.

In the example below, make sure that you replace myApiKey and myClientId with your own, as provided by your Account Director.

async function addHrefToAnchorTag(anchorElement, sku) { try { const pregenerated = new MxtWebAR.MxtWebArPregenerated({apiKey:'myApiKey', clientId:'myClientId'}); const url = await pregenerated.getWebArPregeneratedUrl(sku); anchorElement.href = url; } catch(e) { console.error('Failed to get sku web ar asset', e); return false; } }

For iOS - THIS IS VERY IMPORTANT - PLEASE READ

iOS has some bizarreness in recognizing URLs on href tags as WebAR assets, especially inside in-app browsers. Marxent found that using this code will remedy that bizarre behavior:

<a rel="ar" id="view-in-ar" href="theUrlToWebArAsset"> <img src=""> <span>Launch AR</span> </a>
  • rel="ar" is how iOS determines that this is an AR asset.

  • <img> tag is required inside of the <a> tag as the first direct child of the element.

    • NOTE: this can be left empty or it can include whatever image you would like that indicates that this will open WebAR view. Example: img src="https://marxentresearch.com/demo/web-ar/img/Icon-ARIcon.svg"

  • <span>Launch AR</span> can go inside the <a> tag, the text can say “View in Room” or “See in AR”, whatever you’d like.

    • NOTE: this is an example of an optional feature that you may want to leverage.

    • NOTE: only one span tag can be included directly under the <a> tag. Additional spans can be nested.

If you want to deploy directly to your website or a test page, you can simply import this code in a <script> tag (make changes to suit your environment).

NOTE: <insert your WebAR Asset URL> is easily obtained by using the getWebArPregeneratedUrl method. Documented here: https://marxent.atlassian.net/wiki/spaces/3CMP/pages/2435252370/Details+of+the+WebAR+Asset+API+SDK#MxtWebArPregenerated

Getting the GLB Model of an Asset

This is the code to get the GLB file (using this option has no formatting for opening as a WebAR asset in the browser).

Getting an Asset from a Particular Environment

By default, the SDK defaults to the PRODUCTION (live) environment. To get something from the TEST or STAGING environment, provide an additional option to the constructor like so:

Getting an Asset of a Particular State

By default, the SDK defaults to the PRODUCTION (live) state of an asset. To get the TEST or STAGING state, provide an additional option to the constructor like so:

Getting an Asset of a Particular LOD (level of detail)

Assets default to 512x512 pixel textures if no LOD is provided. To provide a specific LOD, use:

OR


 

Launching a Product from a QR Code

Although spins of a GLB asset are possible on desktop, launching into AR is only supported on Mobile.

It is a common path therefore on desktop, to show a “View in AR” capability, but have it show a QR code to scan on a mobile device.

 

Creating a QR Code

Here is an example of this using the QRious library, though any QR Code library will do.

 

 

AR Launch Page

This is an example of a page to be written onto your domain. This is the page that will launch of a phone that can in turn launch AR immediately to the user.

This technique gives you a handle for doing any in between steps since this is the first moment launching onto a user’s device.