Skip to main content

Quick Start

Check out how easy it is to integrate our solution to your website!

Integration#

The JavaScript SDK (also compatible with TypeScript) can be added to your website in two equivalent ways:

JavaScript tag#

To use this SDK, add the tag below on the HTML header of your website. This can be done through a tag management system such as the Google Tag Manager or through your e-commerce platform interface.

<html lang="en">
<head>
<title>How to integrate the R2U SDK</title>
<script src="https://unpkg.com/@r2u/javascript-ar-sdk/dist/index.js"></script>
</head>
<body>
Your HTML code
</body>
</html>

JavaScript package manager integration#

Add the SDK using npm or yarn on your JavaScript project.

# using npm
npm install @r2u/javascript-ar-sdk
# using yarn
yarn add @r2u/javascript-ar-sdk

Then import the sdk into your project and unstructure the R2U object from the window global object.

import '@r2u/javascript-ar-sdk'
const { R2U } = window

Getting started#

Here's a sample code that will get you up and running with minimal effort. Be sure to check the rest of the documentation for more detailed information.

;(async () => {
await R2U.init({ customerId: '5e8e7580404328000882f4ae' })
const isActive = await R2U.sku.isActive('RE000001')
if (isActive) {
const sku = 'RE000001'
const arButton = document.getElementById('ar-button')
await R2U.ar.attach({
element: arButton,
sku
})
const viewer = document.getElementById('3d-viewer')
await R2U.viewer.create({
element: viewer,
sku
})
}
})()

We also have a Glitch project with a more detailed example. You can check the final result here. Or you can take a look at the code here.