Documentation

Delight XR enables you to seamlessly embed VR content into your existing web presence using only HTML markup and thus bridges the gap between VR and the Web. It is compatible with a wide range of HMDs and browsers across mobile and desktop.

Getting Started

At Delight XR we focus on bridging the gap between VR and the Web. Thus we chose to export all functionality of Delight XR through declarative custom-element based HTML markup. No JavaScript programming required. As an added benefit your content delivery strategies can remain the same: Host your own content and make it accessible in VR using Delight XR.

Import script tag

Getting started is as easy as adding our Delight XR loader script into the <head> of your website’s markup.

Once you have received your Delight XR product token, you will have a personalized script link for embedding into your site. Here’s your personal link:

<script src="//cdn.delight-vr.com/latest/dl8-[LICENSEKEY].js" async></script>

You can use either a semantic version in the script tag embed, or you can use the /latest/ tag to ensure you are always up to date. A version archive and changelog will be available here and made public through our mailings.

Use element

As soon as you’ve added the Delight XR loader script using your personalized token, all functionality will be automatically accessible via custom HTML elements, so that you can use the Delight XR elements to declare your content.

Here is an example of what a typical custom element for video could look like

<dl8-video title="Example Video" author="Jane Doe" format="STEREO_360_LR">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
</dl8-video>

Complete example

Here is a complete working example of a minimal HTML page with a test image embedded. Just be sure to replace [LICENSEKEY] with your personal token if you use this as a starting point for your own page.

<!doctype html>
<html lang="en">
<head>
  <title>Delight VR Example</title>
  <script src="//cdn.delight-vr.com/latest/dl8-[LICENSEKEY].js" async></script>
</head>
<body>
  <dl8-img
    title="Test Image"
    author="Delight VR"
    poster="https://delight-vr.com/examples/test-image-poster.jpg"
    src="https://delight-vr.com/examples/test-image.jpg"
    display-mode="inline"
    format="STEREO_360_TB">
  </dl8-img>
</body>
</html>

This is what the embed would look like on your page: