Back to Help Center

Integration Options: 3D+AR Viewer

Let customers explore your product in 3D and view it in augmented reality.

Opens a 3D viewer in a modal window, allowing users to explore the product and launch the AR view if needed.

1. Add the following script to your website before the closing </header> tag or inside the <head> section:

<script type="module" src="https://viewer.arizo.ru/viewer/script.js" async defer></script>
  
<script>    
  window.onload = function() {      
    window.vizbl.initModalButton('vizbl_3d_view')    
  }
</script>

2. Add the following attributes to the element that should open the viewer:

<button
  class="vizbl_3d_view"
  data-object-tinuuid="OBJECT_ID"
  data-object-hid="OBJECT_HID"
  data-size-type="in">

OBJECT_ID — your object's ID. To get it, go to your dashboard and click 3D Models in the top navigation bar. Click the copy icon on any model in the list, then click the same icon next to Object ID in the dropdown.

OBJECT_HID — the color variant of the object. This field is optional — you can leave it empty or remove it entirely. To get the HID, open the same dropdown and select any Variant ID instead of Object ID.

Your element may look like this:

<button 
  class="vizbl_3d_view" 
  data-object-tinuuid="K7CCtKS9Qaer7fQW-6IN1Q" 
  data-object-hid="dbf4c024" 
  data-size-type="in">
  Open AR
</button>

Still need help?

Can't find what you're looking for? Our team is happy to help.