Use our one-time implementation script to connect your platform with ours. Style the experiences with CSS to match your brand preferences, and go live with immersive 3D across all products, in any browser and on any device—here’s how!
Use our one-time implementation script to connect your platform with ours. Style the experiences with CSS to match your brand preferences, and go live with immersive 3D across all products, in any browser and on any device—here’s how!
Fibbl is a product-experience platform that lets webshop owners stream 3D, AR, Virtual Try-On and 3D product content through a simple front-end implementation. Just paste the main script tag into your site’s <head> — it works on any browser or device.
<script src="https://cdn.fibbl.com/fibbl.js" type="module"></script><div id="gallery" style="position: relative; display: flex; place-content: center"> <img id="picture" src="http://placekitten.com/400/400" alt="cat" /> <fibbl-layer data-product-id="demo-shoe"> <button data-element="default">Default</button> <button data-element="fibbl-model-viewer" class="fibbl-active">3D</button> <button data-element="fibbl-carousel" data-mode="full">IMG</button> <button data-element="fibbl-qr-code" data-type="ar">AR</button> <button data-element="fibbl-qr-code" data-type="vto">VTO</button> </fibbl-layer></div>Enjoy the flexibility of styling the UI with CSS, while using the live CodePen demo to see changes instantly. As you add new products each season, simply toggle the 3D experiences on / off for the new models in your online store.
Each 3D, AR, and VTO experience has its own library with applications and add-ons. Layer them onto any experience—on any eCommerce touchpoint or B2B site—to enhance the live product experience!
A front-end “product-experience” layer of custom HTML elements that stream 3D, AR and Virtual Try-On (VTO) to any site. docs.fibbl.com
Paste the main script tag into your web <head> and the component tag of your choice where you wish to display the content. Style with CSS to fit your preferences.
docs.fibbl.com
Absolutely! Add your components now; they’ll auto-hide until the model becomes available. docs.fibbl.com
The easiest and recommended way is to implement the <fibbl-layer> component in your main product display element. The toggle will let your customers choose between experiences.
docs.fibbl.com
Yes — every main component ships with a live CodePen demo; tweak HTML/CSS and see changes instantly. docs.fibbl.com
Add data-analytics-type="google" and your GA ID in the first Fibbl script tag; events are sent automatically.
docs.fibbl.com
No, the script is deferred — downloaded in parallel to parsing the page and executed after the page has finished parsing.
Fibbl is designed to be lightweight. Content is streamed only when interacted with, ensuring no significant impact on your site’s performance or load times. Learn more in this report
Yes. Use Fibbl.checkModelAvailability('@product-id') or hit GET /check-model-availability on the REST API. However, this is seldom needed since components auto-hide if models are not available.
docs.fibbl.com
Use the "Distribution Settings" in the platform to modify UI appearance, or directly customize the component with custom attributes. View attributes
Yes, you can fetch product content from our REST API, but in most cases, the components are the best way to implement Fibbl.
Components auto-detect capability; AR/VTO buttons fall back to QR-code or hide when not possible. docs.fibbl.com
The components are already lazy loaded out of the box. The experiences will only load when the elements are in the user's viewport.
Check out docs.fibbl.com for complete guides, live demos, and API references or visit help.fibbl.com for a simplified version.