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.
#
R2U.ar.attachmobile
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.
parameter | description | default |
---|---|---|
element | element that will trigger AR | null |
sku | product SKU | '' |
sku | product price | '' |
event | event that triggers AR | 'click' |
resize | Option to resize 3D model on AR experience | false |
showInstructions | When true, shows an image in full-screen view explaining how to place and manipulate a 3D object on AR before proceeding to the camera experience | false |
fallbackOptions | Behavior to reproduce when AR experience is not available on device | { alertMessage } * |
fallbackOptions.alertMessage | When defined, alerts user with chosen string | null |
fallbackOptions.fallback | When defined, opens a 3D viewer in a warning screen ('viewer' ) or in fullscreen ('full' ) | null |
fallbackOptions.text | When defined, modifies fallback text on 'viewer' mode | null |
fallbackOptions.text.title | Changes the tittle on fallback page | null |
fallbackOptions.text.top | Changes the top text on fallback page | null |
fallbackOptions.text.bottom | Changes the bottom text on fallback page | null |
callToAction | When defined, include a Call To Action inside the AR experience, such as an Add To Cart button | null |
callToAction.text | Call To Action button text | null |
callToAction.onClick | Call To Action function to handle the button click inside the AR experience | null |
* alertMessage = 'Sentimos muito, mas infelizmente seu dispositivo não é compatível com a visualização em Realidade Aumentada'
#
showInstructionsDefault once
When rendered, shows a full-screen panel explaining how to place and manipulate a 3D object, before proceeding to the AR experience.
value | effect |
---|---|
once | The instructions screen will render only on the user's first AR experience. |
always | The instructions screen will render every time the user interacts with the button |
never | The instructions screen will never render |
#
fallbackOptionsThe 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.
#
callToActionCurrently 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.
#
AR demo on iOS#
AR demo on Android#
R2U.ar.getLinkmobile
desktop
The method returns a shareable URL for the AR experience.