Fibbl offers a range of components that can be used individually or together to create immersive shopping experiences. Depending on your goals, layout, and performance requirements, you can decide which components to implement on your site. All components are available through the main script:
<script
src="https://cdn.fibbl.com/fibbl.js" type="module"
data-fibbl-config
data-locale="sv-SE"
data-analytics-type="google"
data-analytics-id="G-ABCABCABC"
data-token="token_given_by_Fibbl">
</script>
You only need to include this script once. Then, simply add the components you want to your product pages or templates.
Main components and when to use them
fibbl-layer
Use for: “3D-first” experiences where your original image is displayed while the model is loading.
The Fibbl Layer is our flagship components and encapsulate all Fibbl experiences. It combines multiple experiences: 3D, AR, and Virtual Try-On in one interactive window. It’s ideal when you want a seamless, all-in-one experience where shoppers can rotate, zoom, or switch between experiences directly in the same viewer.
fibbl-bar
Use for: Sites using separate buttons or menus
The Fibbl Bar adds a clean, accessible toolbar with buttons for each experience (3D, AR, VTO, etc.). It’s preferable if you consider have your own image gallery or product viewer to be the PDP hero and just want Fibbl’s interactive buttons to launch additional experiences.
fibbl-model-viewer
Use for: Displaying standalone 3D models
This component shows a fully interactive 3D model of your product.
It’s ideal for product campaign pages or product specification blocks on you PDP where you want users to explore the product in 3D without any additional experiences like AR or Try-On.
fibbl-carousel
Use for: Replacing or complementing your image slider
The Fibbl Carousel displays product images in a sleek, swipeable gallery with the standard images of your product model.
fibbl-video
Use for: Displaying the Fibbl videos
Use the Fibbl Video component to embed Fibbl product videos.
fibbl-qr-code
Use for: AR and Virtual Try-On experiences
This component enables customers to launch Augmented Reality or Virtual Try-On directly from your site. On desktop, it displays QR codes for scanning with mobile; on mobile, it shows buttons to open the experience instantly.
fibbl-live-image
Use for: Lightweight, interactive product previews
Fibbl Live Image creates an interactive image that responds to mouse or device motion. It provides a sense of depth and rotation without needing to load a full 3D model. Perfect for product listings or mobile-optimized pages.
fibbl-3d-quick-view
Use for: Instant 3D previews from product listings
Fibbl 3D Quick View allows users to open a compact 3D viewer from product cards or modals. It improves engagement by letting shoppers explore products in 3D without leaving the category or search page.
Implementation tips
You can mix and match multiple components on your site — they work together seamlessly.
Always include only one global script tag with
data-fibbl-configon your page.Use
data-product-iddynamically to load the right experience for each product.Components that aren’t supported for a product automatically hide, so you can safely reuse templates across your catalog.
For analytics tracking, configure the attributes
data-analytics-typeanddata-analytics-idas shown above.
Not sure which to start with?
If you’re new to Fibbl, start with the Fibbl Layer. It combine multiple experiences and cover most use cases. You can always add or replace individual components later as your experience grows.
Would you like me to adapt this for Intercom Help Center formatting (with <h2>, <p>, and <code> blocks formatted to match your current articles)? It would make it ready to paste directly into the CMS.