Installing a 3D Viewer in a modal window

To install a 3D viewer with an object upoaded in the Vizbl platform, you need to follow two simple steps. Before you begin, ensure that you have already uploaded at least one object to Vizbl.

Copy data from the Object Card

Open the list of your uploaded objects on business.vizbl.us. Select the object you want to display in the 3D viewer. Copy the TINUUID and HID parameters; you will need them in the next step.

Add code to Your Site

Add the lines below to your web page code.

<script src="https://vizbl.us/viewer/script.js" async defer></script>
<script>
    window.onload = function() {
      window.vizbl.init('vizbl_3d_view')
    }
</script>

‍

Add the following attributes to the element that will open the 3D view when clicked:

class = /arbitrary class/ (e.g. "vizbl_3d_view")
data-object-tinuuid = /tinuuid of object/
data-object-hid = /hid of collection/ (optional)

Example

<button
      class="vizbl_3d_view"
      data-object-tinuuid="JIcA74VZTmCiFB_vguWSwQ"
      data-object-hid="1cd30ce6"
    >
      open vizbl_view
</button>

‍

The TINUUID parameter specifies the object, while the HID parameter determines the color variant. By modifying these parameters, you can display any of the uploaded objects in your desired color.

An example of a basic html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your website name</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
  </head>

  <body>
    <button
      class="vizbl_3d_view"
      data-object-tinuuid="JIcA74VZTmCiFB_vguWSwQ"
      data-object-hid="1cd30ce6"
    >
      view
    </button>
  </body>

  <script src="https://vizbl.us/viewer/script.js" async defer></script>
  <script>
    window.onload = function() {
      window.vizbl.init('vizbl_3d_view')
    }
  </script>
</html>

‍