Customizing your embedded 3d model

Using Embed Options

Each Sketchfab membership plan offers different embed options.

Additional options can be unlocked by clicking Upgrade Now in the Embed viewer pop-up (below) and upgrading your Sketchfab plan. 

Basic

Basic membership users can edit a number of options for their model in the Embed viewer pop-up. Under the Appearance tab (above), you can set a Fixed Size, toggle on a Dark Theme, or use the BBcode format, instead of HTML.

Under the Content tab, you can choose how to present your model. You can toggle on the ability for your model to autostart, use an animated entrance, use turntable animation, or preload textures. You can also decide how the navigation hint appears.

Lastly, under the Annotations tab, you can choose whether or not to show your annotations and which annotation to start with.

Pro

In addition to the free Basic membership options above, under the Content tab, Pro users can turn on a transparent background behind their model.

Premium/Enterprise

In addition to Pro membership options, both Premium and Enterprise users can hide several icons and features in the embedded viewer, including: viewer controls (bottom-right corner), model information (top-left corner), and Sketchfab branding (lower-left corner). See the differences in the embedded models below:

Note that if you downgrade your Sketchfab membership, your custom embedded viewer could change. For example, if you were using Pro membership to enable a transparent background, downgrading to Basic would disable that option in your embedded Sketchfab viewer.

Using Embed Parameters

You can even go beyond the options in the Embed viewer pop-up! How? Add one of the many available parameters (listed below) to the model URL and assign a proper value.

Need an example?

If you wanted your embedded model to start and spin automatically, you could add the autospin and autostart parameters to your model's URL and set the correct value.

And if you had Premium membership, you can add the ui_infos, ui_controls, and ui_stop parameters to hide the model information. Doing so would result in an embedded viewer URL like this:

https://sketchfab.com/models/442c548d94744641ba279ae94b5f45ec/embed?autospin=1&autostart=1&ui_infos=0&ui_controls=0&ui_stop=0

Embed size and mobile interfaces

The size and behavior of your embed on different screen sizes or different website designs depends mostly on the HTML and CSS of your website and the Sketchfab iframe, and cannot be controlled very explicitly by Sketchfab settings. In this way, embedding a Sketchfab model on your website is not much different than adding any other element such as an image, in that the wed developer of your site will need to control the behavior of the content.

Mobile Responsiveness

When creating a website that needs to be used on both mobile devices and desktop computers, it's important to consider responsive web design. When styling the Sketchfab iframe with your HTML and CSS code, we recommend implementing something like this, which ensures the embed will always maintain the same aspect ratio, while filling the available width. The model embeds on this page, for example, are using this approach.

Scrolling

You can use the scroll wheel to zoom in and out of models on desktop. That means you cannot scroll down the webpage when the mouse cursor is on the Sketchfab iframe. There are a few options here.

• You can add the scrollwheel=0 embed parameter to prevent zooming on scroll
• Add enough space on one or both sides of the iframe to allow scrolling past it

However, the scrollwheel parameter only works on desktop. On mobile and other touch screens, swiping to scroll is the same action as rotating the model, so there is no way to turn off one and not the other. So, for mobile web design, it's very important to keep space on the side of the iframe if you need visitors to be able to scroll past the 3D viewer on the page.

User interface scale

The buttons inside the Sketchfab iframe should automatically scale depending on the size of the screen (i.e. the buttons for fullscreen, settings, AR, etc.). However, you may need to add the following code to the <head> element of your website:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will make sure that our iframe can detect the appropriate screen width and scale the icons within the iframe correctly.