Delight VR 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.
Import script tag
Getting started is as easy as adding our Delight VR loader script into the <head> of your website’s markup.
Once you have received your Delight VR 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.
As soon as you’ve added the Delight VR loader script using your personalized token, all functionality will be automatically accessible via custom HTML elements, so that you can use the Delight VR 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>
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: