Dear Thortspace … How do I embed a Thortspace viewer into an HTML page?
How to embed a Thortspace viewer to a specific publicly shared sphere into an HTML page?
Aside: This article assumes you know how to set a sphere to be public (in the sharing tab). If you are not familiar with how to make a Thortspace sphere public, please refer to this article:
How to … Publish Thortspace spheres to the web with one click (or thereabouts)
I know many of you woke up this morning wondering how to get your Thortspace spheres onto a web page, as shown below in…
So back to the question, how to embed a Thortspace viewer into a web page.
You could use a frameset, perhaps something like this:
In case you want to copy-and-paste that, here is the same code as text instead of a picture:
<head><meta name="viewport" content="width=device-width,initial-scale=1"></head>
<frameset border="0" rows="100%,*" cols="100%" frameborder="no">
<frame name="BottomFrame" scrolling="no"
You could also use an iframe, perhaps something like this:
<iframe id="iFrameName" style="width:72vw; height:48vw; border:none;" src="https://thort.space/journey/110898789587140112950_5129815931640490948_2023071682883803580/1"></iframe>
Here’s a page with a couple of examples: https://www.thortspace.com/main/example/
Where do I get the URLs to use in the src property of the frame and iframe tags?
You can get these URLs:
(1) from the URL line of the browser — ie. the URL for the current sphere, or the current view of the current sphere you are looking at the browser at the moment
(2) use the Copy button when you are viewing a list of public spheres or public journeys in the browser version of thortspace (which is at https://thort.space)
(3) use “Get Sphere URL” from the main menu of the current sphere when in the Thortspace App:
(4) use a permalinks, as described in this article, and the one linked after it:
How to … share web links to specific Views, Thorts and Groups
(and without having to create a Journey)
How to … Open your current view of sphere in your web browser, and then share that on Facebook if…
How to … add embedded Thortspace content to your Facebook page
Method 1 : Use a static HTML page tab App provided by a third party… There’s lots to choose from, this is one I tried…