Distribution settings is a built-in sub-feature in the Fibbl platform that enables you to customize and gives you control over how the 3D Viewer behaves on your product detail pages — without dealing with code on your end.
Directly from the Fibbl platform, you can:
Set the default viewing angle of your products
Set the default zoom value of your products
Show or hide additional default buttons or text
Show or hide toggles to trigger annotations or dimensions
Cheat-sheet
Simply copy and paste the code from here to dist settings (in app.fibbl.com), and modify the values accordingly.
If you want to set a custom default rotation of the 3D model…
Use the initialRotation attribute. The value is two numbers: horizontal and vertical rotation in degrees.
{
"fibbl-model-viewer": {
"dataset": {
"initialRotation": "22 35"
}
}
}
If you want to show dimensions by default…
Use the dimensionsVisibility attribute and set it to "visible".
{
"fibbl-model-viewer": {
"dataset": {
"dimensionsVisibility": "visible"
}
}
}
If you want to change the position of the expand (fullscreen) button…
Use the uiConfig JSON object to customize button placement.
{
"fibbl-model-viewer": {
"dataset": {
"uiConfig": {
"expand-button": {
"position": "right bottom"
}
}
}
}
}
If you want to move the hint text to a different location…
Use the uiConfig again but target the hint-text block.
{
"fibbl-model-viewer": {
"dataset": {
"uiConfig": {
"hint-text": {
"position": "bottom"
}
}
}
}
}
If you want to combine multiple settings (e.g. rotation + dimensions + button position)…
Just include them all in one JSON object, like this:
{
"fibbl-model-viewer": {
"dataset": {
"initialRotation": "15 25",
"dimensionsVisibility": "visible",
"uiConfig": {
"expand-button": {
"position": "right bottom"
},
"hint-text": {
"position": "bottom"
}
}
}
}
}
If you want to show toggles for both Annotations and Dimensions — with Annotations ON by default and Dimensions OFF by default…
Use this configuration in your Dist Settings:
{
"fibbl-model-viewer": {
"dataset": {
"annotationsVisibility": "visible",
"dimensionsVisibility": "hidden",
"uiConfig": {
"dimensions-control": {
"position": "left bottom"
},
"annotations-control": {
"position": "left bottom"
},
"hint-text": false
}
}
}
}