Annotations allow you to highlight specific product details—like materials, features, or design elements—directly within the 3D experience. It’s a powerful way to enhance the customer journey by providing context that isn’t always visible at first glance.
Annotations is an optional add-on. If you don’t see it in your platform, reach out to your Customer Success Manager to enable the feature. Keep in mind that it is fairly new feature, we welcome any feedback regarding both user experience and user interface.
Where to find and manage annotations
If you are setting up annotations from scratch, you will first want to navigate to 'Annotations' in the top menu and then go to the sub-option "Locales". Here you configure all of your language variations that you will have annotation content in. It's not recommended to specify a full locale with a country, if you don't really have a country-specific variant of the same language. That is, prefer "sv" to "sv-se".
Once the locales are configured, you can create and manage annotations from two. places:
Annotations page
This page shows an overview of all your created annotation content, you can create, edit and delete annotation content here but cannot assign them to models or specific points.Model detail page
Everything you can do from the annotation landing page you can also do from the model details page – but more. This is where you place the interactive points and connect them with your annotation content.Navigate to Manage
Click on any model
Click the “Annotations” button located just beneath the 3D Viewer.
Follow the instructions and workflow
Once saved, annotations appear automatically in the 3D Viewer as long as you have enabled it via dist settings—no extra code is required. Read below to learn how to enable it via dist settings.
Quick video guide: Getting started with annotations
Display settings (via dist settings)
You can control how and when annotations appear using Distribution Settings in the platform:
Show by default: Annotations will appear immediately when the model loads
Trigger via toggle: A small button will let users toggle annotations on/off
1️⃣ Annotations visible by default without any toggle
(Always visible, no annotations control button)
{
"fibbl-model-viewer": {
"dataset": {
"uiConfig": {
"annotations-control": false
},
"annotationsVisibility": "visible"
}
}
}
2️⃣ Annotations visible by default with toggle enabled
(Visible initially, user can hide/show via toggle)
{
"fibbl-model-viewer": {
"dataset": {
"uiConfig": {
"annotations-control": true
},
"annotationsVisibility": "visible"
}
}
}
3️⃣ Annotations hidden by default but with toggle to enable
(Hidden initially, user can turn on via toggle)
{
"fibbl-model-viewer": {
"dataset": {
"uiConfig": {
"annotations-control": true
},
"annotationsVisibility": "hidden"
}
}
}
Localization behavior
When displaying annotations, the system selects the appropriate description based on the locale used on the web page. Here's how it works:
First, it checks for a description with the full locale (e.g.
sv-SE
)If missing, it falls back to the language only (e.g.
sv
)If still missing, it checks for a generic fallback using
*
If no match is found, it returns the first English description (e.g.
en
)If nothing is available, the annotation point is not shown
Tip: If you're not using multiple translations, just use a simple language code (e.g. en) or the generic *.
Image guidelines
Images used in annotations will automatically crop to a 2.35:1 aspect ratio. This ensures they are optimized for mobile users and displayed correctly across devices.
Best practices
Focus on what makes the product unique — materials, interior features, construction, or technical details
Use clear, concise, and engaging copy. Short headlines and body texts work best
Choose mobile-friendly images with the right aspect ratio (2.35:1)
Add localized descriptions to support international users or use
*
for universal messagingThe view angle and zoom level you set when placing the annotation point will be saved and shown to the end-user when they click it. Use this to guide their attention to the right spot on the product