Customizing the 3D Viewer's AR-QR Modal

The Dimensions 3D-Viewer makes it easy to show 3D models inside a webpage or application with plenty of customization capabilities.

In this article, we'll focus on the ability to render a custom modal showing the AR QR (code).

If you're not familiar yet with how to get started with the viewer go ahead and read this article first: Getting started with the Dimensions 3D Viewer.

For many users, the internal modal (shown below) will be satisfactory and can be used without any modifications. However, for those who wish to take more control and render in a way that suits their needs more closely, this option is also supported.

* Internal modal

In case you'd like to show a different modal you'd need to configure the `customArQrRenderer` parameter like so:

window.initDimensions({
  account: "my-account",

  viewers: ["3D"],

  threeDViewer: {
    viewer: {
      controls: {
        customArQrRenderer: ({ container, url, getQr, onClose }) => { 
            //your code goes here
        }
      },
    }
  }
});

By passing the function to the viewer's configuration, you're telling the viewer you'd like to take over the modal rendering so when the user clicks on the "View in AR", your code will execute and it's up to you to show the UI with the QR code.

customArQrRenderer receives an object with 4 elements:

container: This is the container (your element) the 3D Viewer is placed in. Typically you'd like to render your modal container inside of it in a way that will overlay it.
url: This is the full URL to the viewer in AR mode (the URL that is encoded into the QR)
getQr: This is a function that returns an image object URL you should use as the source for an image element that will display the QR
onClose: This is a function to call when the user clicks on an element (i.e. button) in your modal that means closing the modal

It's important to emphasize that when you choose to use this capability, everything is up to you in terms of showing the modal, showing the QR, and closing the modal. The Viewer supplies you with everything you need, but it will not show anything when the user clicks to see the QR.

The following code sample shows a fully functioning implementation of a custom modal:

({ container, url, getQr, onClose }) => {
  //ADD QR MODAL CONTAINER
  const qrContainer = document.createElement("div");

  //ADD CLOSE BUTTON TO MODAL
  const closeBtn = document.createElement("button");
  closeBtn.innerText = "X";

  //HANDLE CLOSE BUTTON CLICK
  const onCloseClick = () => {
    closeBtn.removeEventListener("click", onCloseClick);
    container.removeChild(qrContainer);

    //NOTIFY DIMENSIONS VIEWER THAT MODAL IS CLOSED
    onClose();
  };
  
  closeBtn.addEventListener("click", onCloseClick);
  qrContainer.appendChild(closeBtn);
  
  //ADD QR IMAGE
  const qrImg = document.createElement("img");
  qrImg.src = getQr();
  qrContainer.appendChild(qrImg);
  
  //ADD TEXT
  const text = document.createElement("p");
  text.innerText = "VIEW IN AUGMENTED REALITY";
  qrContainer.appendChild(text);
  
  //ADD CUSTOM MODAL TO THE PAGE (INSIDE VIEWER CONTAINER)
  container.appendChild(qrContainer);
}

Following the code shows the following flow:

add a new container ("qrContainer")
add a close button ("closeBtn")
1. handle click on the button
2. when clicked: remove the container, and call onClose
add an image element ("qrImg")
1. use getQr() and set its return value as the image source
add a text element ("text")
finally, add the new container as a child of the Viewer's container.

The final result (with CSS) will look like this:

* Custom modal

To summarize, the Dimensions Viewer let's you customize the AR-QR modal completely to your own standard and look&feel. When opting for this option, make sure you take care of everything related to the modal (showing, removing, closing).