Embed with one script tag

This is Level 3 of the spec: your site serves the wall itself, on its own route.

The tag

<script src="https://cdn.example/diazoma-embed.js"
        data-manifest="/.well-known/wall.json"
        data-route="/xr"
        data-core="https://cdn.example/wall.iife.js"
        data-loader="https://cdn.example/loader.js"></script>

The embed script, in this order:

1. builds a WellKnownAdapter from data-manifest;
2. stops if the manifest says "policy": "deny";
3. sets window.diazoma.options with the adapter and the brand (options the page already set win);
4. creates the mount element if there is none;
5. injects the wall loader, which loads the core only when it is needed.

Until the wall mounts, window.__diazoma is { version: 'pending', route }. When the wall mounts it replaces it with { version, route, scope, state() }. Other programs, such as a browser extension, check this object and do not add a second wall.

Attributes

Attribute	Default	Meaning
data-manifest	none, required	URL of the manifest. Without it the script logs an error and does nothing.
data-route	the path of the current page	Path of the page that shows the wall, such as /xr. Passed on as options.route.
data-core	wall.iife.js next to the embed script	The wall itself (three.js is bundled in).
data-loader	loader.js next to the embed script	The small loader: the Enter VR card, and the lazy load of the core.
data-mount	#diazoma	CSS selector of the element the wall mounts in.
data-locale	en	en or bg.
data-title, data-body, data-enter, data-browse	built-in texts	Texts of the Enter VR card.

Serving the three files

The page needs three files, which come from the built packages:

File	Built from
diazoma-embed.js	packages/adapters/dist/diazoma-embed.js
wall.iife.js	packages/wall/dist/wall.iife.js
loader.js	packages/wall/dist/loader.js

Serve them from any static host. The loader is small (at most 3 KB gzipped) and holds no three.js. The core loads only when a visitor enters VR or chooses to browse.

Note

The packages are not on npm yet, so there is no CDN URL to point at. Host the files yourself, as the demo does.

Use the npm package instead

If you build your own page, use the package and an adapter directly. See the Wall API and Adapters API.

import { Wall } from '@diazoma/wall';
import { WellKnownAdapter } from '@diazoma/adapters';

const adapter = await new WellKnownAdapter({ origin: location.origin }).ready();
new Wall({ mount: document.getElementById('diazoma'), adapter, brand: adapter.brand }).mount();

Advertise the route

Set embed.route in the manifest so other programs can offer to open your wall instead of injecting their own:

"embed": { "route": "/xr" }