Integration: How to integrate 360° visuals on your website

HelloAR technology is designed to work on an intuitive and efficient do-it-yourself model. Sellers can easily create their own seamless, interactive product visuals with the help of HelloAR platform and apps while enjoying complete control over the product presentation.

It is super easy for you to integrate HelloAR 360 or 3D product visuals on your website. Your tech team will be able to quickly integrate the solution with few lines code.

There are 3 methods which you can use to implement HelloAR’s 3D technology.

Embed the 3D/360° product on your website as an iframe
Embed a “VIew in 3D” button on your website which opens a popup with the 3D viewer
Use our SDK and customise it in any way you want

IFRAME Approach

You can use an iframe to embed the 3D viewer in your website.

For this approach, you can add the following embed code in your website’s product page:

<iframe 
    src="https://viewer.helloar.io?id={HELLOAR_PRODUCT_ID}"
    height="750"
    width="600"
    allow="fullscreen" 
></iframe>

Button + Popup Approach

With this approach, this is how your product page would look like:

For this approach, you need to complete the following 3 steps

Step 1: Specify The Location Of The Button

Go to your desired location in your website’s html code and the following div element

<div id="helloar-button"></div>

Step 2: Add HelloAR’s script

To the same html page, add the following script tag:

<script
    src="https://content.helloviewer.io/js/helloar_embed_0.0.21.min.js"
    data-product-id={HELLOAR_PRODUCT_ID}
    data-helloar-div="helloar-button"
 ></script>

Step 3: Customise The Button

The above steps are enough to add the “View in 3D” button on your website. But if you want to change the button styling to match your store’s design, you can pass the required styles to the script we wrote in step 3.

Available styling options:

data-button-color [Color of the button] (can be a color string like “red”, “yellow” etc or a hex code like “#fff”)
data-button-width [Size of the button] (can be width in px or %. example – “300px”, “75%”)
data-button-border-radius [Border Radius of the button] (example: “5px”, “40px” etc)
data-font-color [Text color] (same as data-button-color)
data-font-size [Size of the text] (size in px example – “21px”, “45px” etc)
data-font-bold [Should the text be bold or not] (can be “true” or “false”)
data-margin-top [Space between the button and the content above it] (example: “10px”, “25px” etc)
data-button-text [Display text of the button] (example: “View in 3D”)

Example code with all styling options:

<script
    src="https://content.helloviewer.io/js/helloar_embed_0.0.21.min.js"
    data-product-id={HELLOAR_PRODUCT_ID}
    data-helloar-div="helloar-button"
    data-button-width="80%"
    data-margin-top="50px"
    data-font-size="21px"
    data-button-color="#39b56b"
    data-button-border-radius="5px"
    data-font-color="#fff"
    data-button-text="View in 3D"
    data-font-bold="true"
  ></script>

SDK Approach For Custom Integration

Installation

Method 1 – Use HelloAR as a npm package

Installing HelloAR SDK only takes a single command and you’re ready to roll:

npm install helloar
or
yarn add helloar

Method 2 – Use minified HelloAR script from a CDN

Add the following script tag to the head of your website

CDN link: https://content.helloviewer.io/js_sdk/1_1_37/helloar.min.js

Reach out to HelloAR to get the latest version code.

Import HelloAR

Note: Importing is required only if you use the helloar npm package.

Import is not required if you’re using the cdn link

Import HelloAR wherever you want to display the 3D viewer:

import { HelloViewer, HelloARManager } from “helloar/build/helloar.min.js”

Note: HelloAR SDK requires the window object to function properly. So the imports need to happen on the client side.

If you’re using Server Side Rendering (like Next.js), you should do a dynamic import after the DOM has loaded

Dynamic Import:

const { HelloViewer, HelloARManager } = await import(“helloar/build/helloar.min.js”)

Add An HTML <div>

The next step is to create a div in which the HelloAR 3D Viewer will get displayed.

Note: Adding a unique id is necessary.

You can add styling to this div as per your liking.

Required css styles that need to be added to this div:

.threedee-container{ width: YOUR_DESIRED_WIDTH, height: YOUR_DESIRED_HEIGHT position: relative}

HelloAR’s 3D Viewer will inherit the styling of this div.

Initialize The 3D Viewer

Use the following javascript code to initialize the 3D viewer.

HelloARManager.getInstance().useProdServer();
var viewer = new HelloViewer(“3d-viewer”, API_KEY);
viewer.init( HELLOAR_PRODUCT_ID, () => {}, //callback function for success (err) => {} //callback function for error);

Please request the API key from HelloAR.

This code can be run after an event (such as a button click)

Voila! That’s it. The div we created in the previous step will now show your 3D product.

Start your free trial now – Download our app or Signup here. Cancel anytime. No credit card needed. No lock-in.

For any assistance regarding this procedure, please reach out to us on support@helloar.io