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:
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:
<html>
<head><meta name="viewport" content="width=device-width,initial-scale=1"></head>
<frameset border="0" rows="100%,*" cols="100%" frameborder="no">
<frame name="TopFrame"
scrolling="yes" noresize
src="https://thort.space/491487003" >
<frame name="BottomFrame" scrolling="no"
noresize>
<noframes></noframes>
</frameset>
</html>You could also use an iframe, perhaps something like this:
<html>
<body>
<iframe id="iFrameName" style="width:72vw; height:48vw; border:none;" src="https://thort.space/journey/110898789587140112950_5129815931640490948_2023071682883803580/1"></iframe>
</body>
</html>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:
Related articles:
