How to Embed 3D Models on my Website?

Sketchfab is the leading platform to publish, share and integrate 3D content anywhere on the web: your website, eCommerce platforms, blogs, articles, and across social channels.

Our 3D viewer works on any device and any modern browser*.

Any Device

Any Browser*

All Major 3D File Formats

First things first: before you share any 3D model on the web you need to create the 3D file. There are many different 3D creation software options out there; you’ll find a selection of a few popular examples here.

If you manufacture products, you probably already have 3D assets in your pipeline. Sketchfab supports all major 3D file formats, so the majority of your 3D models are likely already compatible with Sketchfab. You may be able to use your file as is, but it’s very likely that it will benefit from a number of optimizations, for aesthetic or performance reasons.

When our partners optimize models for performance on the Sketchfab player, one of the main criteria they focus on is loading time. If a model takes a long time to load, the user experience will suffer and users may close their browser windows rather than wait. This is even more important to consider for mobile users.

The main factors that impact load time are (1) the size of the 3D meshes (number of polygons) and (2) the size and number of textures (if your model uses textures). As a general rule, aim to have as few separate materials, geometries (meshes), textures, and polygons (triangles, quadrangles, etc.) as possible in your model. The lower you keep these numbers, the faster the viewer will load and the better it will perform.

The way you create/prepare your 3D asset depends greatly on the intended use case of the Sketchfab viewer (configurator, eCommerce, landing pages, advertising, social media). Creating custom content designed for your specific use case is always the best option.

You can find more information on how to prepare 3D models here. If you need help to create 3D models or to optimize existing models, reach out to our content creation partners. 

Now that you have a 3D model ready, it’s time to upload your first model. First, you’ll want to create or log in to your Sketchfab account. Once you’re logged in, you can upload your model files in a few different ways.

Click on the UPLOAD button on the top-right corner of any Sketchfab page.

You can either upload to your company account or to your individual account.

You will then be asked to choose the file(s) you would like to upload–just make sure you’re using our supported formats. As an alternative to clicking on the Browse button, you can also just drag and drop your file(s). 

Then simply click the UPLOAD FILES button.

Once you start the uploading process, a window will appear as below. Fill in the information about your model – model name, description, categories, tags, etc. Then click the PUBLISH button. 

After your model has finished uploading and processing, you should be able to see it in the Models section of your profile.

You can also upload to Sketchfab directly from your 3D application using one of our exporters. All major 3D softwares are integrated with Sketchfab to allow you to export your files in just a few clicks directly to Sketchfab.

If you prefer to bulk upload to Sketchfab, we have an API that you can leverage to automate the process. See our API documentation. More info on how to upload your model is available in our help center.

You can embed a Sketchfab 3D model on any HTML website. Before you embed a model, you have to switch the visibility of your model to ‘private or public’. In EDIT PROPERTIES, select Public or Private then save.

Click the Embed button on the model’s page, under the viewer.

Click within the code to copy it, and then paste it into your site’s HTML.

This will work almost anywhere on the web: if the HTML iframe tag is supported, you can embed a Sketchfab model.

You can easily add parameters to the embed code to customize the user experience and increase engagement: make the model autoplay, embed white-label, change the color of the loading bar, etc. 

Remove the headline below the model

To remove the headline below the model, simply unmark the “show byline” option.

Hint=2 parameter

We highly recommend that you add the hint=2 embed parameter which adds the “click and hold to rotate” icon to your model. This will help users understand how to interact with your 3D model. See the example below for MADE.COM and the respective embed code.

Embed white-labeled: Premium and Enterprise licenses

If you would like to embed your model in white-label, you will need to upgrade to the Premium or Enterprise plan. 

Once you have upgraded to a Premium or an Enterprise account, simply select “Remove watermark” in the options.

All the available embed options are explained in more detail here.

For detailed instructions on how to optimize the integration of your 3D models to increase product engagement, read our dedicated blog post.

For more specific websites and platforms, including WordPress, see Embed on Web Platforms. For sharing to social platforms, see Share Online.