Skip to main content

Augmented Reality

After adding the script tag to your website, methods for creating the Augmented Reality experience will be available through the global object R2U.

R2U.ar.attach#

mobile

The ar.attach method creates an "eventListener" to open the AR viewer on mobile devices (e.g.: on a button click).

// test SKU -- remember to use your product information
const arButton = document.getElementById('ar-button')
const sku = 'RE000001'
// creates an unsupported device alert
const fallbackOptions = {
//add message in the alert
alertMessage: 'AR not supported by device',
//opens a 3D viewer on the warning screen
fallback: 'viewer'
}
R2U.ar.attach({
element: arButton,
sku,
fallbackOptions
/* resize defaults to `false` */
})

element#

It is the element that will activate the AR experience through an event.

interface R2U {
ar: {
attach: (params: { element: HTMLElement; sku: string }) => Promise<void>
}
}

SKU#

It is the SKU of the product you want to see in AR.

interface R2U {
ar: {
attach: (params: { element: HTMLElement; sku: string }) => Promise<void>
}
}

event#

It is the event that will activate the AR experience.

interface R2U {
ar: {
attach: (params: { element: HTMLElement; sku: string; event?: string }) => Promise<void>
}
}

resize#

Option to resize 3D model on AR experience

interface R2U {
ar: {
attach: (params: { element: HTMLElement; sku: string; resize?: boolean }) => Promise<void>
}
}

showInstructions#

showInstructions#

Default once

When rendered, shows a full-screen panel explaining how to place and manipulate a 3D object, before proceeding to the AR experience.

valueeffect
onceThe instructions screen will render only on the user's first AR experience.
alwaysThe instructions screen will render every time the user interacts with the button
neverThe instructions screen will never render
interface R2U {
ar: {
attach: (params: {
element: HTMLElement
sku: string
showInstructions?: 'once' | 'always' | 'never'
}) => Promise<void>
}
}
Instructions example:

fallbackOptions#

The alertMessage message can be customized

Shows an image when the mobile device does not support the AR experience. If the instructions are entered, the fallback is displayed only when you click on the "See at your home" button.

interface R2U {
ar: {
attach: (params: {
element: HTMLElement
sku: string
//device warning not compatible with AR
fallbackOptions?: {
//add alert message
alertMessage?: string
//opens a 3D viewer on the warning screen
fallback?: 'viewer' | 'full'
//modify the fallback text
text?: {
//change the page title
title?: string
//changes the top text of the page
top?: string
//change bottom page text
bottom?: string
}
}
}) => Promise<void>
}
}
Fallback example:

AR demo on iOS#

AR demo on Android#

R2U.ar.getLink#

mobile desktop

The method returns a shareable URL for the AR experience.

//remember to use your product information
R2U.ar.getLink('RE000001').then((url) => console.log(url))