How to Optimize the Integration of your 3D Models to Increase Product Engagement
Table Of Contents
I. Embed 3D models anywhere on the web with Sketchfab
II. Enhance the user experience with advanced embed parameters
III. Optimize the user interface (UI) where you embed your 3D model
IV. Boost engagement with 3D annotations and animations
V. Regularly check if your customers engage with your models
At Sketchfab we help clients from all kinds of industries—from footwear to automotive, furniture, and manufacturing—leverage 3D assets online.
We are really proud to see that many clients have experienced some tremendous results after integrating 3D models on their websites: higher conversion rates, boosts in customer engagement with products, and shorter sales cycles, to name a few.
You may be in the process of leveraging 3D models on your website, and wondering how you can optimize your 3D integration.
To get the best possible results from the integration of a 3D model, you first need to optimize the model’s embed parameters and the UI where you are displaying it. Read on to learn some best practices on how to embed 3D models on a website.
I. Embed 3D models anywhere on the web with Sketchfab
The first step to leverage a 3D model of your product online is to create the actual 3D representation of your product.
Once you have created the 3D model, you need to upload it to your company’s Sketchfab account.
Then you can easily embed a 3D model on any HTML website: simply share the 3D model’s URL as if you were sharing a YouTube video.
Anyone can use Sketchfab for commercial use on any plan, even the free Basic tier. Visit our plans page to subscribe to one of our licenses.
II. Enhance the user experience with advanced embed parameters
You can easily customize the appearance of your embed by adding specific parameters to the embed code. To find the embed code of your model, click the Embed button on the model’s page, under the viewer.
Click within the code to copy and paste it.
Embed code example: in green the format of your 3D model, in blue the URL of your 3D model, in red the Embed Parameters.
<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/cc89c1e265514cbab1234eba999683e1/embed?preload=1&ui_controls=0&ui_infos=0&ui_inspector=0&ui_stop=0&ui_watermark=0&ui_watermark_link=0" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/nike-air-max-270-for-configurator-demo-cc89c1e265514cbab1234eba999683e1?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Nike Air Max 270 for configurator demo</a>
by <a href="https://sketchfab.com/Sketchfab?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
</div>Add the code into your site’s HTML. For step by step instruction on how to embed 3D models, read our blog post on how to Get Started with Sketchfab.
The default options that will appear in the embed popup are typically the best for most circumstances, but we recommend also disabling the byline and enabling autostart, more details below.
Remove the byline below your model
When you copy-paste the embed code into your html page, it will, by default, display the title of your model, along with a direct link to your Sketchfab account.
To remove the byline below the model, simply unmark the “show byline” option.
It will automatically remove the title of your model by removing the following blue-highlighted portion from your embed code:
<div class="sketchfab-embed-wrapper"> <iframe width="640" height="480" src="https://sketchfab.com/models/722e900559cf41bdbf9acb8df606b3b8/embed?ui_controls=0&ui_infos=0&ui_watermark=0" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/audi-q7-demo-722e900559cf41bdbf9acb8df606b3b8?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">AUDI Q7 demo</a> by <a href="https://sketchfab.com/Sketchfab?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a> on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a> </p> </div>
Make the model autoplay: fewer clicks, a better eCommerce experience
We recommend setting up your model to autoplay using the Autostart parameter, which makes the 3D model load right away without the need for a click from the user.
Autostart helps improve engagement by reducing the number of clicks in the customer’s journey and increasing conversions, especially on eCommerce websites.
Krups displays an animated 3D model, the Autostart parameter plays the animation without requiring prospective customers to click on the model.
Recommended embed parameters
autostart=1
ui_stop=0
It will hide the “stop” button in the top right, which prevents the customer from stopping the viewer animation.
This feature, in combination with “autostart”, reduces loading time because the viewer does not download the model’s thumbnail.
Do not animate the 3D model itself—just use the Autospin parameter to specify how quickly you want your model to rotate. This should also remove the costs of animation production.
Recommended embed parameters
autospin=1
Setting to any other number will cause the model to automatically spin around the z-axis after loading. The higher the number, the faster the spin. A negative number will reverse the spin direction.
Embed white label to reduce bounce rate
Embedding in white labeled means that you hide all the UI elements of your embed: no Sketchfab logo, no external link. By doing so you greatly reduce the risk of bounce clicks.
You need at least a Premium license to embed in white label.
Embed with a Free or Pro license
Embed white label with a Premium or Enteprise license
Recommended embed parameters
ui_infos=0
This hides all the information at the top of the viewer.
ui_controls=0
This hides the controls at the bottom of the viewer.
ui_watermark=0
This hides the Sketchfab logo.
Customize the play button of your 3D player to educate users on how to interact with your model
A 3D model can look exactly like a photograph. Users may not see the difference or realize that they can actually interact with the 3D model. Add an overlaid ‘click and rotate’ hand icon to your model to educate users on how to interact with your models.
Recommended embed parameters
ui_hint= 2
This forces the “click and drag to rotate” hint to always appear at the start.
Activate the Preload parameter to reduce download time
The Preload parameter will immediately load the best resolution textures, ensuring the highest quality render and also reducing download time by not fetching intermediate sized textures.
Recommended embed parameters
preload= 1
This is useful if you want to prevent your viewers from seeing low-resolution or missing textures during the model load time.
For more detailed and technical information on embed parameters, click here.
Choose a color for your background
It’s possible to turn the background of a model off completely using the Transparent parameter. You can see this background setting in action at the top of the Sketchfab homepage and our Enterprise page, for example.
However, the transparent parameter can slightly hurt the rendering quality, so we do not recommend using it unless absolutely necessary.
Instead we recommend using a solid color background that can achieve the same result. Learn how to do this here.
Embed parameter
Transparent = 1
if it’s absolutely necessary for your integration
Create solid color background in the editor (recommended)
Step by step instructions here
III. Optimize the user interface (UI) where you embed your 3D model
Embed your 3D model at the right place and make it easy to find
One of the pieces of advice to properly integrate a 3D model, is to embed it at the right place on your website:
- On the right page: If it’s an eCommerce website, for example, the 3D model should be displayed on its corresponding product page.
- In your visitor’s journey: Define the different touchpoints and make sure the 3D model is on the visitor path.
eCommerce product page
In the example below, the 3D model of the Kubrick chair has been displayed on its corresponding product page. On the Kubrick’s product page, the 3D model is displayed in a carousel of images
We have observed that Customers who engaged with a 3D model on Made.com are 25% more likely to buy.
Product launch
On a dedicated landing page, for a product launch for example, the 3D model could be displayed on the top of the page and centered in the middle of the page so that a visitor will easily find it simply by scrolling down the page.
For the launch of their new Carbon X shoe, Hoka One One uploaded a model of the shoe on Hoka’s Sketchfab account and then embedded the 3D model on Hoka’s website at the center of a page dedicated to the new Carbon X shoe.
Visitors were able to interact with the new Carbon X shoe in 360°, zooming in and out directly from Hoka’s website, from any device and internet browser.
Give a proper name and icon to your embed
3D is a relatively new type of media and online shoppers are not used to engaging with 3D. As a result, you need to provide an explicit and self-explanatory name and icon for your embed.
The name can be as simple as: 3D, 3D view, 360 (if you think your audience is not familiar enough with 3D)
And the icon should be consistent with the word you chose:
Signify uses a symbol in combination with the indication 360 to incite consumers to click on the embed and engage with the 3D model.
You can also A/B test 2 different presentations to compare your click-through rate.
Display a combination of traditional images alongside your 3D model
We also recommend presenting your interactive 3D products alongside traditional 2D photographs to keep the same traditional eCommerce experience for your customers. And if shoppers find themselves with poor internet connection, they will still be able to enjoy the traditional photographs.
In addition to a 3D model, MADE.COM showcases 7 traditionals images and a video
Optimize the size of your model for different screen sizes
The size of the embed is important and should dynamically adapt to the different screens it’s displayed on.
- Make sure the 3D model iframe is big enough that customers can easily interact with it.
- On mobile, make sure the model iframe does not take up the whole screen width or height, else users will not be able to scroll past it as needed.
- We advise that you optimize the width and height of your embed using CSS and not directly from the size parameters of your iframe embed code. Otherwise the width and height that you select will be automatically applied to your embed in both portrait and landscape views.
We recommend to optimize the size of the embed with CSS code, and not directly from the size parameters of your iframe embed code.
- Remember to check your integration on mobile in both landscape and portrait formats.
IV. Boost engagement with 3D annotations and animations
Create a guided tour of your product with 3D annotations
3D annotations are a great way to educate consumers about your most compelling features and incentivize the user to engage with the model.
3D annotations allow you to mark different points on your products, save the best camera positions, and add interactive product descriptions. You can also add additional information, external links, and images to your annotations.
For steps by steps instructions on how to create annotations using the Sketchfab editor, visit our Help Center.
To have even more control on the annotations, you can use the Sketchfab Viewer API that allows you to
- customize the icon and design of annotations: See a demo here that uses a custom style for the annotation hotspots. You can also hide the “native” annotation tooltips and create your own HTML content. See a demo here.
- automatically add annotations “on the fly” and populate the annotation title and text from any source you like, for example, your own database or an XML file.
- adapt annotations to different contexts, for example, to localize the annotation text in different languages. See a demo here.
Showcase how your product works with animations
You can also animate your models to highlight complex features, components or how your product works.
Krups uses animated 3D models to explain how its coffee machine works, Try it here
Most of the time, animations must be built into the 3D model before uploading. Then, they can be triggered using the API or the regular viewer user interface.
Additionally, simple animations such as translating or rotating objects can be created using the Viewer API, which requires some JavaScript coding skills as well as some knowledge of 3D. If you don’t have these resources internally, feel free to reach out to our support team.
For more information on how to create animations visit our Help Center.
V. Regularly check if your customers engage with your models
And finally, we recommend that you regularly check how your visitors engage with your 3D models.
If you’re an enterprise client, don’t hesitate to reach out to your account manager for some customized recommendations or analytics.
