Skip to main content

Triggering AR Mode Externally

The "View in AR" button provided by the cylindo-viewer component can be controlled through the ar API. This allows for flexibility in the behavior, enabling it to be triggered by external buttons, actions, or scripts.

Enter AR Mode / Show QR code​

document.querySelector("cylindo-viewer").ar = true;
info

If the device is not compatible with AR, entering AR mode will result in a QR code being displayed for other compatible devices.

Hide QR code​

document.querySelector("cylindo-viewer").ar = false;

Using an External Button​

If you'd like to use an external button to control the AR Mode/QR modal, here's a simple example:

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Result
Loading...
Live Editor
function Example() {
  const viewer = React.useRef(null);
  const onButtonClick = () => (viewer.current.ar = !viewer.current.ar);

  return (
    <>
      <button onClick={onButtonClick}>Toggle AR/QR Modal</button>
      <cylindo-viewer ref={viewer} customer-id="5098" code="ARMCHAIR-PDP" />
    </>
  );
}

(deprecated) Enter AR Mode / Show QR code​

document
  .querySelector("cylindo-viewer")
  .dispatchEvent(new CustomEvent("ar-mode-init"));