¿Cómo podemos ayudar?

< All Topics
Print

How to customize the URL of your tours to your own domain.

When you host your virtual tours in 3DVista Cloud service, the URL will not show any references to 3DVista to avoid your clients to get to know what service you are using. The typical URL of a tour hosted in 3DVista Cloud is:

 http://storage.net-fs.com/hosting/….

You can use your own URL following instead using this standard URL format. Here is how:

You need to create a HTML page with the code below and place it in the URL that you want to use:

(We will use the URL of the example, "https://storage.net-fs.com/hosting/2727323/186/", that you need to replace with your own URL. Same applies to Titles and Descriptions)

<!DOCTYPE html>
    <html>  
   
     <head>
           <title>THE TITLE OF THE TOUR</title>
           <meta property="description" content="PUT THE DESCRIPTION HERE" />
           
           
           
           <meta name="twitter:card" content="summary_large_image">
           <meta name="twitter:title" content="PUT THE TITLE FOR TWITTER HERE">
           <meta name="twitter:description" content="PUT THE DESCRIPTION FOR TWITTER HERE">
           <meta name="twitter:url" content="PUT THE URL OF THIS WEBPAGE HERE">
           <meta name="twitter:image:src" content="https://storage.net-fs.com/hosting/2727323/186/socialThumbnail.jpg">
           <meta name="twitter:image:width" content="1200">
           <meta name="twitter:image:height" content="630">
           <meta property="og:title" content="PUT THE TITLE OF THE TOUR HERE">
           <meta property="og:type" content="website">
           <meta property="og:description" content="PUT THE DESCRIPTION HERE">
           <meta property="og:url" content="PUT THE URL OF THIS WEBPAGE HERE">
           <meta property="fb:app_id" content="817622095004141">
           <meta property="og:image" content="https://storage.net-fs.com/hosting/2727323/186/socialThumbnail.jpg">
           <meta property="og:image:width" content="1200">
           <meta property="og:image:height" content="630">
           <link rel="image_src" href="https://storage.net-fs.com/hosting/2727323/186/socialThumbnail.jpg">
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
           <meta name="viewport" content="user-scalable=no, initial-scale=0.5, width=device-width">
           <style type="text/css">
               html, body { height:100%; margin:0; overflow:hidden; padding:0; width:100%;}
               iframe { height:100%; position:relative; width:100%; }
           </style>
       </head>
       <body>
           <script type="text/javascript">
               var ua = (function() { return navigator.userAgent.toLowerCase(); })();
               var inUA = function(value) { return (ua.search(value.toLowerCase()) >= 0); };
               var mobile = inUA('android') || inUA('ios') || inUA('iphone') || inUA('ipod') || inUA('ipad');
               var url = 'https://storage.net-fs.com/hosting/2727323/186/' + window.location.hash;
               function redirect()
               {
                   location.href = url;
               }
               function embed()
               {
                   var attrs = {
                       'width': '100%',
                       'height': '100%',
                       'src': url,
                       'scrolling': 'auto',
                       'frameborder': '0',
                       'allowfullscreen': '1',
                       'allow': 'fullscreen; accelerometer; gyroscope; magnetometer; vr'
                   };
                   var iframe = document.createElement('IFRAME');
                   for (var name in attrs)
                       iframe.setAttribute(name, attrs[name]);
                   document.body.appendChild(iframe);
               }
               if (mobile)
               {
                   embed();
               }
               else if (navigator.getVRDisplays)
               {
                   navigator.getVRDisplays().then(function(displays)
                   {
                       if (displays.length > 0)
                           redirect();
                       else
                           embed();
                   }).catch(function(err)
                   {
                       embed();
                   });
               }
               else
               {
                   embed();
               }
           </script>
       </body>
   </html>

If displayed in an iframe, cardboard mode and gyroscope will not go on iOS, but could be done by changing:

               if (mobile)
               {
                   embed();
               }

For:

               if (mobile)
               {
                   redirect();
               }
Tags: