Embedding Sketchfab into Squarespace
Thought I’d share this tip with the world, glad you found it.
Wanting to allow people to manipulate my 3D models on my website instead of just trying to get a good screenshot led me to some issues.
This is Sketchfab’s Instructions.
I’m Hoping I can continue making guides like this as I come across good stuff to share.
If you open your model in Sketchfab, and click on “Embed” it pulls up a window with some options.
There’s a few changes I make on here.
Screenshot of Sketchfab Embed Options.
If you simply paste the code, as-is, into an Embed Block you get this…
Example:
The player will stay small, even though the size was set to “Auto”. No matter how big you make the Embed Block, it stays the same, and aligned to the left. Ugh. The player I embedded was set to “Auto Size”… and that’s not really working as we’d expect. In the example above, I’ve got the embed block stretched all the way across.
So Let’s change a few things in Sketchfab…
Head back over to Sketchfab, and click Embed again.
First, Turn on “Fixed Size”. The size on there can actually work well with mobile.. so don’t worry about that too much just yet, we will come back to that later.
I like to turn off Caption, but you can leave it on. They can get to the model by clicking the Sketchfab logo, so the link below is not as vital. This is totally up to you. I think in most cases it looks better on Squarespace without the Caption (Name of model and links)
Dark Theme is also Optional, but although subtle, I like it. Do as you please on this one it’s up to you.
Screenshot of settings in Sketchfab Export options, First Tab. These are the settings I use.
I like to have Autostart on, and I’d recommend it, as long as you don’t have too many models autoloading on the same page! Having this on, your model is already moving without needing any user clicks whatsoever. Otherwise they see a “Play” button, not your model. Don’t count on them to click, set it to auto!
Animated Entrance is optional.
Turntable Animation is good, so when it autostarts it starts rotating. The user will see your already moving eye-candy and be drawn to it, instead having the chore of clicking something.
Use the Copy to Clipboard Button in Sketchfab to easily copy the embed code.
Screenshot of settings in Sketchfab Export options, second Tab. These are the settings I use.
In Squarespace, Add an Embed Code.
Use Code Snippet, and then click “Embed Data”
After pasting in your code, you can see it’s bigger, but it’s a fixed size… and that won’t translate well to different devices, like mobile.
Now look down in the code. Don’t worry if you are not a Coder… do not be intimidated. You got this.
Part of the way down, should be before having to scroll… you should see the code for Width and Height.
width="640" height="480"
For Width, get rid of the quotes and put in 100%
width=100% height="480"
You can now make the viewer expand all the way to the edge of the Embed Box…
Example:
And even make it go across the full page if you expand the Embed box all the way…
Be Careful pulling it all the way to the edges of the screen. On Mobile, this is an area they cannot scroll, as it manipulates the model. SO it may be wise to leave a gap around the edges if it’s too tall.
Play around with the height, and see how it looks on Mobile. Using a percentage for the Height doesn’t work as expected, so try to keep the Height as a fixed measurement.