Using VR Experiences from Websites

Experiences created by GMETRI can easily be linked from or embedded within existing websites using the link generated after publishing a project. The following are the steps:

Ensure that the "Public" option for the Published project is turned on. For Linking Simply copy the Deployment URL and put the link on your website. For Embedding Copy the link for the deployment and embed it within an iframe in your website. Add the required permissions to the iframe element as shown in the example below (replace src with your deployment link):

<iframe 
  src='https://....gmetri.com/...'
  height="100%"
  width="100%"
  style='border: none'
  allowfullscreen
  allow="gyroscope; accelerometer; camera;">
</iframe>

In addition to the above permissions on the iframe element, add the following meta tags in the <head> section on your webpage:

<meta name="viewport" 
  content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />

Example code to show a GMETRI Experience as a fullscreen iframe: In index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <title>GMETRI Embed</title>
  <style type="text/css">
    body, html {margin: 0; padding: 0; height: 100%; overflow: hidden;}
    #content {position:absolute; left: 0; right: 0; bottom: 0; top: 0px;}
  </style>
</head>
<body>
  <div id="content">
    <iframe width="100%" height="100%"
      style='border:none'
      allowfullscreen
      allow="gyroscope; accelerometer; camera;" 
      src="https://.... <published url> ..." 
    />
  </div>
</body>
</html>

Last update: