If you only want to have to read one article that explains how Fibbl works from A-Z, then you've come to the right place.
Fibbl is a software as a service company offering production of photorealistic 3D models and distribution of 3D and XR product experiences for e-commerce brands. We live for creating a digital product experience exceeding the one of the physical world. In practice, it can look like this.
And we provide an plug n’ play, end-to-end solution for creating this entire experience – all for helping the end consumer to make a better purchasing decision.
Let's bullet down how this work, everything from getting the physical products to when it’s up on the product detail page.
It all starts with you send us your physical products to our studio.
We push them through our production pipeline and out comes a digital twin of your products (3D models).
The 3D models are uploaded to the Fibbl platform (app.fibbl.com), and becomes available in up to 5 different display technologies (3D, Virtual try-on (VTO), Augmented reality placement (ARP), images, videos) – ready to be used on your e-com. Fibbl takes responsibility for all different file types and experiences optimized for different devices and browsers.
First step to use them on your e-com, is to connect the 3D models with your product entities by having a common identifier between them; like a SKU, GTIN, MPN, Item Group ID, etc. This is done most easily by importing your product feed into the Fibbl platform, read more about it here.
When the product feed is imported, the Fibbl system will automatically find and suggest which models it thinks belong to which product. This process is called “assign models”. When you approve a suggestion, you are assigning the model to your company account with the correct product ID which is automatically fetched from the feed.
Example: In the e-commerce system, your product Nike Air Force 1 '07 Next Nature has SKU ‘123’. So for the 3D model of the same product to be displayed on this product page, it also needs to have product ID'123' in Fibbl.
Now, to display the 3D model and relevant technologies on your product detail pages you need to implement a simple javascript that looks like this
This enables you to stream the technologies on your e-commerce. Everything else related to UX/UI is mostly on your side. It is customizable and very flexible, and you do it like you usually do it (HTML, CSS).
Important script principles you should know:
- Fibbl offers localization for our standard elements and screens, here you see the languages we support today and this is controlled with locale in the script.
- Fibbl automatically send events to your GA4 property, once the correct measurement ID has been implemented in the script.
- Fibbl should be implemented on the global product detail page template with a dynamic variable and should not be hardcoded what so ever. Fibbl has built-in logic to render and display all elements when there is a matching model, as well as hide all elements so the experience is as usual if there is no matching model.
- Fibbl has different types of scripts adapted for different types of experiences. But the most used and the one we recommend is fibbl-layer. It's created to be placed above like a transparent layer over your image gallery, until the model has finished loading and takes over the experience making it "3D First". See example here.
When the script is implemented, and the models has the right product ID, everything should work as expected. The implementation code wise is just done once. If you are producing more 3D models in the future, they will appear automatically as you assign more models. As well as if you need to enable or disable something, you do it from the Fibbl platform.
Watch this 5 minute video that goes through how the Fibbl platform works in practise. After that, you know everything you need to know about the technical product.
