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:
Parameter | Description | Type | Default |
---|---|---|---|
showPdpButton | Defines 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 |
pdpUrl | Defines the URL to which the product page button should direct to. | link | registered on the platform |
pdpButtonText | Customizes the text inside the product page button. If not informed, it will use the default value in the language used (Spanish, Portuguese, or English). | text | See product page |
logoUrl | Customizes the client logo displayed alongside the product page button. | link to image | registered on the platform |
showLogo | Defines 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 |
pdpButtonPositionH | Specifies the horizontal position of the product page button. | left | center | right | right |
pdpButtonPositionV | Specifies the vertical position of the product page button. | top | bottom | top |
animationSelector | Sets 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