Integration: How to integrate 360° visuals on your website

Posted by

    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.

    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:

    Button + Popup Integration

    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_button_0.4.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_button.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.

    <script type=”text/javascript” src=”CDN-LINK-GOES-HERE”></script>

    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.

    <div id=”3d-viewer” class=”threedee-container”></div>

    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