Skip to main content

Getting started

You can easily integrate our solution on your website using the <iframe> tag. All you need are the informations about your CUSTOMER_ID and your products' SKU.

Viewer R2U#

Our Viewer allows you to render a 3D model in full screen by passing the CUSTOMER_ID and the SKU as query parameters to the URL.

https://viewer.r2u.io/embed?customerId=CUSTOMER_ID&sku=SKU

Integration#

You just need provide the URL with the right parameters (CUSTOMER_ID and SKU) in the src property of the <iframe> tag.

<iframe
src="https://viewer.r2u.io/embed/?customerId=CUSTOMER_ID&sku=SKU"
width="100%"
height="100%"
frameborder="0"
scrolling="no"
allowxr="yes"
allow="xr-spatial-tracking;fullscreen;camera"
></iframe>

We recommend that you use these properties of the <iframe> tag to enjoy a better experience:

  • width=100%
  • height=100%
  • frameborder=0
  • scrolling="no"
  • allowxr="yes"
  • allow="xr-spatial-tracking;fullscreen;camera"

Obs: some of these properties will not affect the experience now, but we recommend that you keep them for future updates.

Customization parameters#

It's also possible to pass some query parameters to customize the experience via iframe:

ParameterDescriptionTypeDefault
showPdpButtonDefines whether the viewer should display a product page button or not. If no product page link is specified either in the product registration on the platform or via query parameters, the button will not be shown.boolean
0 | 1
0
pdpUrlDefines the URL to which the product page button should direct to.linkregistered on the platform
pdpButtonTextCustomizes the text inside the product page button. If not informed, it will use the default value in the language used (Spanish, Portuguese, or English).textSee product page
logoUrlCustomizes the client logo displayed alongside the product page button.link to imageregistered on the platform
showLogoDefines whether a logo should or should not appear inside the product page button. By default, it displays if there is any specified link, either by platform registration or by the logoUrl parameter; otherwise, it does not display. If no link has been specified but the showLogo parameter is still true (1), the Viewer generates a logo.boolean
0 | 1
see description
pdpButtonPositionHSpecifies the horizontal position of the product page button.left | center | rightright
pdpButtonPositionVSpecifies the vertical position of the product page button.top | bottomtop
animationSelectorSets whether the animation selection menu should or should not appear.boolean
0 | 1
1

The following example displays a product page button with a logo and the text "See product":

viewer.r2u.io/embed?customerId=...&sku=...&showPdpButton=1&showLogo=1&pdpButtonText=See%20product