Integrate virtual tour on website

HTML & CSS
1

Hello,

I made a virtual tour that I exported and saved in my dropbox to have a link. The vitruel tour consists of a folder with html code and different images inside. I want to upload it on my website. I have looked at some tutorials that deal with embed link, other tutorials that indicate that with dropbox, it is necessary to modify the link of the virtual tour by adding dl.dropboxusercontent.com or change dl=0 by raw=1, but I can’t do it, because I don’t know much about it.

Has anyone done this before or knows more about it than I do? I think it’s not complicated because I tried with a virtual tour from a website, and it worked (but it was in .js while mine is in .html)

Thanks for your help

2

From 3rd October 2016 Dropbox discontinued the ability to render Dropbox content in a browser via links.

You need to upload everything to your server.

3

But on my website I also have some carousels where the images are saving in my dropbox and they are correctly displayed on the website

4

This may help:

5

Hi, thanks for your answer, when I publish my virtual tour in the format to upload it on the web, I have a folder which contains files showing in this picture: https://www.cjoint.com/c/LElp6jXF1yR

The link of my virtual tour on box: https://www.dropbox.com/s/gn7l60lnvdyjh7j/index.htm?dl=0

I tried to upload it on my website with this code:

‹video width="1200" height="720" controls> ‹source src="https://dl.dropboxusercontent.com/s/ gn7l60lnvdyjh7j/index.htm?raw=1"> frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreenallow="autoplay </video>

This doesn’t work.

I tryed the example virtual tour on this website: https://www.cloudpano.com/

The tour has this link:
<div id="MMqLrAhy2oN"><script type="text/javascript" async data-short="MMqLrAhy2oN" width="100%" height="500px" src="https://app.cloudpano.com/public/shareScript.js"></script></div>

And it works on my website. I understand that the second is javascript and the first is html.

But how can I code the html on my website?

Thanks

6

Is there a reason you can’t host the tour HTML on you site’s own server?

7

I don’t know, my site is on wix, for my carousels I used dropbox so I thought I would do the same. I don’t know if I can and how to upload the folder of my virtual tour on the wix server

8

I have no experience of Wix, but surely there must be some facility to host assets.

9

Okay and do you know how to code the html display? I also tried with iframe but it doesn’t display on my website. Is it necessary to code a java script which launches the display of the html?

10

Does in need to be in a frame, or are you wanting to see the tour as a standalone “page”?
As a page, you would simply link to the location of the tour HTML, like any other page.
To embed it, I would assume an iframe to work, though sizing may be an issue.

I wouldn’t think video was an appropriate element, unless it is in fact a video.

11

When i try this code:

<div style="position:relative; height:0; padding-top:56.25%"><iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" src="https://www.dl.dropboxusercontent.com/s/gn7l60lnvdyjh7j/index.htm?dl=0" name="Sans titre 6" width="100%" height="100%" frameborder="0" allowfullscreen="true" allow="fullscreen; accelerometer; gyroscope; magnetometer; vr; xr; xr-spatial-tracking; autoplay; camera; microphone"></iframe></div>

it open a window to know where I want to save the html file (but this is not that I want). If I change the dl=0 by raw=1 at the end of the source link, this is the same thing.

I tryed this code with iframe

<iframe src=”https://www.dl.dropboxusercontent.com/s/gn7l60lnvdyjh7j/index.htm?raw=1” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=””></iframe>

But it is written 404 not found.

So does anyone know how to do that?

14

My understanding is that Dropbox no longer allows you to render HTML from Dropbox in a browser (directly or within an iframe).

Anyway, from what I can work out, the relative addresses of .js and .jpg files in your .htm file are not correct.

15

Putting that URL directly into the browser is also showing 404.

That would explain it. So the answer is to drop Dropbox and find another way to host your assets.

16

If I put this URL into a browser I am able to download the HTML:
https://www.dl.dropboxusercontent.com/s/gn7l60lnvdyjh7j/index.htm

I think Dropbox started preventing rendering of HTML in 2016 because too many people were using Dropbox as free hosting.

17

Looking at the html, I understand that the images and the java script are misnamed. I have to change the href by the links of the images.

For the rendering of the html, I have a carousel where the images are saved on my dropbox and the rendering is done correctly, html link:
LErbcI8ctVR_Carousel-SliderBeforeAfter720P.html

In case, do you know some other host which allow the html rendering?

Edit: I changed the path of the images and the .js and .css scripts in the html file. When I open my html file with a code editor, if I click on an image link, it opens correctly in my web browser. But when I want to launch the html, it stays on please wait… Here is th changed html file: https://www.cjoint.com/c/LErbyLysmeR

18

That works because the HTML file is not in Dropbox.

19

I uploaded the carousel on my dropbox (with all the pictures and scripts) with this link: https://www.dropbox.com/s/dys5udse69c8epw/Carousel_SliderBeforeAfter720P.html?dl=0

The html works

Edit, it works because I’m connected at dropbow I think… So do you know some host which allow the html rendering? Something like google cloud ?

20

Yes, this is what I see with that link:

honogan1
(screenshot resized 50%)

Any ordinary hosting will allow HTML to be rendered but I get the impression you are looking for free hosting.

Free hosting is available from a number of websites. I have free hosting at AwardSpace and InfinityFree but when accessing web pages there my antivirus throws up phishing warnings. Also emails from form submissions are not transmitted. I expect both these limitations are due to spammers trying to use the free hosting. On AwardSpace your carousel is currently working here: http://create.mywebcommunity.org/honogan.html. (note it’s not on World Wide Web). A friend is using free Google Sites for a sports club website with impressive functionality but I don’t think that allows you to upload your own HTML content.

There have been an number of threads in this forum about using AWS, for example: How to create a free CDN, Content Delivery Network account - #5 by John_Betong. I have not looked into that or into using Google Cloud.

21

Thanks for the information, I think I’m starting to understand things a little better. I noticed that for the carousel on my wix site, I have directly on my page inserted an html code with the carousel code that will seek the images from my dropbox. I think that’s why it works, I don’t render an html file, I just get the images.

For my virtual tour I tried to do the same thing. I looked in the html at all the files that were called like images, .js scripts and fonts.css.

  1. I modified the font.css file that called fonts, I put the dropbox links of the fonts.
  2. I modified the html file by putting the link of all the called files (the images, the .js and .css).
  3. I integrated on my wix site a box to put a html link. When I look at the preview, it just says please wait.

So here, the html rendering is on my site, and the code fetches images and files stored on my dropbox (like for the carousel). But my render is not displayed correctly so two hypothesis (1) the files are not downloading from dropbox (which is strange because it works for the carousel) or (2) there is a problem in my html code although I was careful to change everything that is called. A last solution would be to maybe find another cloud to just save the files (because my website is already hosted in wix, I juste need a good link of the files).

The link of the html (in .txt): https://www.cjoint.com/c/LEsbauFZieR

Screenshot of the html box on my wix website

Code
Code1352×732 40.1 KB

22

From your Wix screenshot it looks like you can add a code snippet to go within a <div> element. You are adding the code for a complete HTML web page.

I suggest you delete everything that is not within <load> <script> and <style> tags. That includes deleting <!DOCTYPE html>, <html>, <head>, </head>, <body onload="onload()">, </body>, </html>, the title and all meta tags.

Add an extra line to the end of the code to get the JavaScript to run:
<script>onload();</script>

I am far from sure that will work.