Skip to main content

Augmented Reality

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

AR

R2U.ar.attach

mobile

The ar.attach method attaches an event listener to open the AR experience on mobile devices (e.g.: on a button click). It will automatically track button clicks for analytics purposes.

// 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'
}

await R2U.ar.attach({
element: arButton,
sku: sku,
fallbackOptions: fallbackOptions
/* resize defaults to `false` */
})
parameterdescriptiondefault
elementelement that will trigger ARnull
skuproduct SKU''
skuproduct price''
eventevent that triggers AR'click'
resizeOption to resize 3D model on AR experiencefalse
showInstructionsWhen true, shows an image in full-screen view explaining how to place and manipulate a 3D object on AR before proceeding to the camera experiencefalse
fallbackOptionsBehavior to reproduce when AR experience is not available on device{ alertMessage }*
fallbackOptions.alertMessageWhen defined, alerts user with chosen stringnull
fallbackOptions.fallbackWhen defined, opens a 3D viewer in a warning screen ('viewer') or in fullscreen ('full')null
fallbackOptions.textWhen defined, modifies fallback text on 'viewer' modenull
fallbackOptions.text.titleChanges the tittle on fallback pagenull
fallbackOptions.text.topChanges the top text on fallback pagenull
fallbackOptions.text.bottomChanges the bottom text on fallback pagenull
callToActionWhen defined, include a Call To Action inside the AR experience, such as an Add To Cart buttonnull
callToAction.textCall To Action button textnull
callToAction.onClickCall To Action function to handle the button click inside the AR experiencenull

* alertMessage = 'Sentimos muito, mas infelizmente seu dispositivo não é compatível com a visualização em Realidade Aumentada'

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:

Instruction screen

fallbackOptions

The alertMessage message can be customized

Shows an image when the mobile device does not support the AR experience. If the instructions parameter is provided, the fallback is displayed only when you click on the attached 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:

Fallback

callToAction

Currently only available on iOS Safari and Android WebXR
We recommend the CTA text parameter to be short so that it won't overflow into the product name

Shows a call to action on the Augmented Reality experience, such as an Add To Cart button. The onClick function provided will dispatch when the user interacts with the CTA.

interface R2U {
ar: {
attach: (params: {
element: HTMLElement
sku: string
callToAction?: {
text: string
onClick: () => void
}
}) => Promise<void>
}
}
Call To Action example:

Call To Action

AR demo on iOS

iOS 1iOS 2iOS 3

AR demo on Android

Android 1Android 2Android 3

mobile desktop

The method returns a shareable URL for the AR experience.

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