JavaScript

Use a Package Manager

Install

pnpm add @neurodyn/room-viewer

npm install @neurodyn/room-viewer

yarn add @neurodyn/room-viewer

bun add @neurodyn/room-viewer

Create a Trigger

Room Viewer reads configuration from data attributes on the element you bind. The same markup can be used with the package manager, global, and embed integrations.

<button
  data-neurodyn-room-viewer-dialog
  data-neurodyn-room-viewer-type="poster"
  data-neurodyn-room-viewer-src="https://placehold.co/800x1200.png"
  data-neurodyn-room-viewer-name="Sample Print"
  data-neurodyn-room-viewer-width="1"
  data-neurodyn-room-viewer-height="1.5"
>
  Open viewer
</button>

Initialize RoomViewer:

import { RoomViewer } from '@neurodyn/room-viewer'

const viewer = new RoomViewer('[data-neurodyn-room-viewer-dialog]')

// Later, when the triggers are no longer needed:
// viewer.destroy()

You can use Room Viewer directly from a CDN without installing a package. Use the global build when you want to initialize triggers yourself, or the embed build when the script should listen for matching triggers automatically.

Global Build

The global build exposes RoomViewer, so you can choose exactly which elements should open the dialog.

<script src="https://cdn.neurodyn.ai/@neurodyn/room-viewer/dist/room-viewer.global.min.js"></script>

Full example:

<button
  data-neurodyn-room-viewer-dialog
  data-neurodyn-room-viewer-type="poster"
  data-neurodyn-room-viewer-src="https://placehold.co/800x1200.png"
  data-neurodyn-room-viewer-name="Sample Print"
  data-neurodyn-room-viewer-width="1"
  data-neurodyn-room-viewer-height="1.5"
>
  Open viewer
</button>

<script src="https://cdn.neurodyn.ai/@neurodyn/room-viewer/dist/room-viewer.global.min.js"></script>

<script>
  const viewer = new RoomViewer('[data-neurodyn-room-viewer-dialog]')

  // Later, when the trigger is no longer needed:
  // viewer.destroy()
</script>

Embed Build

The embed build initializes itself and listens for clicks on elements with data-neurodyn-room-viewer-dialog.

<script defer src="https://cdn.neurodyn.ai/@neurodyn/room-viewer/dist/room-viewer.embed.min.js"></script>

<button
  data-neurodyn-room-viewer-dialog
  data-neurodyn-room-viewer-type="poster"
  data-neurodyn-room-viewer-src="https://placehold.co/800x1200.png"
  data-neurodyn-room-viewer-name="Sample Print"
  data-neurodyn-room-viewer-width="1"
  data-neurodyn-room-viewer-height="1.5"
>
  Open viewer
</button>

Next steps

Read the JavaScript API reference.