Installation¶

Learn how to integrate WebXR Gallery into your own projects.

Embedding the Viewer¶

The easiest way to use WebXR Gallery is through the hosted platform at xrgallery.online. However, you can also embed the viewer in your own website.

Option 1: Iframe Embed¶

Embed a published experience directly in your page:

<iframe
  src="https://webxrgallery.com/viewer/YOUR_SEQUENCE_ID"
  width="100%"
  height="600"
  frameborder="0"
  allow="xr-spatial-tracking; fullscreen; autoplay"
  allowfullscreen
></iframe>

Option 2: npm Package¶

Install the @xrgallery/viewer npm package and use the create() API:

npm install @xrgallery/viewer

Then create a viewer in any framework:

const viewer = await XRGallery.create({
  element: '#app',
  sceneId: 'YOUR_SCENE_ID'  // or pass config: { ... }
});

// Clean up when done
viewer.dispose();

See the SDK documentation for full examples in React, Vue, Angular, Svelte, Next.js, and more.

Configuration¶

Environment Variables¶

Create a .env file in the project root:

# Firebase Configuration
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123456789:web:abc123

# Optional: Analytics
VITE_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX

Development Server¶

# Start the development server
npm run dev

# Open in browser
open http://localhost:5173

Viewer URL Parameters¶

The viewer accepts these URL parameters:

Example:

https://webxrgallery.com/viewer/abc123?stage=gallery&autoplay=true

Integration Guide¶

JavaScript API (npm Package)¶

Use XRGallery.create() to embed the viewer directly in your page:

// Create a viewer with a cloud scene
const cloudViewer = await XRGallery.create({
  element: '#app',
  sceneId: 'abc123'
});

// Or with inline config
const configViewer = await XRGallery.create({
  element: '#app',
  config: {
    experience: { title: "My Tour" },
    stages: [{ id: "main", name: "Main", skybox: { type: "image", url: "/pano.jpg" } }]
  }
});

// Clean up
cloudViewer.dispose();
configViewer.dispose();

React Integration¶

import { useEffect, useRef } from 'react';

function VRViewer({ sceneId }: { sceneId: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const v = XRGallery.create({ element: ref.current, sceneId });
    return () => { v.then(v => v.dispose()); };
  }, [sceneId]);

  return <div ref={ref} style={{ width: '100%', height: '100%' }} />;
}

For Vue, Angular, Svelte, and more, see the Framework Guides.

Requirements¶

Browser Support¶

VR Headset Support¶

Next Steps¶

• Self-Hosting Guide - Host tours on your own infrastructure
• Configuration Schema - Full configuration reference
• Troubleshooting - Common issues and solutions