Keyshot XR wesite integration (Squarespace)

Started by LeoBoe, May 06, 2020, 02:56:33 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

LeoBoe

Hey!

Does anyone have experience with integrating XR on a squarespace? I have followed the given instructions as well as hosting from Github (https://blog.keyshot.com/host-keyshotxr-github) but cannot get it working.

Leo

DerekCicero

When you say it's not working, can you be more specific? Can you see the XR on a regular (non-Squarespace) webpage?

LeoBoe

It works just fine when I open the keyshot created HTML file. As long as the linked to files are hosted locally on my computer. It also works when zipping and sending to someone else, as long as they download and unzip the folder on their computer. What I don`t understand is how to embed the XR on a website. Specifically a squarespace created site in this case. From what I understand the keyshot created folder containing the linked to JPEG files needs to linked hosted on a public online server like Github, but I cant get this to work or find any relevant information. 

Josh3D

Hi LeoBoe, I think you're almost there. Here are some things to do/check:

1)  If you're using GitHub, make sure you have an index.html file added to your main folder (repository). Download one here (right-click, Save Link As...). Save this to the folder you created. For example, you would put it in the leobeo.github.io folder on your computer.

2) Once you clone it to GitHub, you will be able to view the KeyShotXR by going to your GitHub Pages URL. For example, you would go to https://leobeo.github.io/KeyShotXR/KeyShotXR.html. This is similar to the URL you will use to embed the KeyShotXR - the KeyShotXR folder and file name will be changed to what you use.

3) KeyShotXRs are embedded into webpages using an iframe (This is the example code you'll see in the instructions.html). On Squarespace, to embed an iframe, you can use the embed block instead of the code block (read about the difference here). Continuing the example, you would copy and paste: https://leobeo.github.io/KeyShotXR/KeyShotXR.html.

If it's not working the way you expect, you can try the code block and copy/paste the embed code for your KeyShotXR with the src set to the GitHub URL of your KeyShotXR.
<div style="left:0px; width:100%; height:0px; position:relative; padding-bottom:75%;">
<iframe src="https://leobeo.github.io/KeyShotXR/KeyShotXR.html" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe>
</div>


Please let us know if you have issues along the way.

LeoBoe

Hey Josh

Is this Josh Mings? If so, you might have seen I sent you a message on linked in as I found you were the creator of the XR example on the keyshot blog. I studied the code of your github hosted HTML and found no difference in that from my own. Very strange! Until I just now found that in my code the imageExtension = "jpg"; while the linked to images are listed with JPG (capital letters). Changing to imageExtension = "JPG"; seem to have solved everything :) !
I will now try to embed block on squarespace. 
Btw, the XR seems to be working just fine without an index.html file in the repository. No idea why, but it works.
Thanks
BR
Leo 

Josh3D

Hey Leo, yes, thanks for connecting. Glad you got the issue fixed! Let me know if you have any other questions.