3D First (also known as fibbl-layer) is the most used Fibbl component and the recommended implementation method. The 3D First experience will enable you to utilize the instant display of your products combined with power of 3D experiences. The 3D layer component is built to replace your 2D images with 3D, as soon as the 3D model is loaded.
Below is a visual example from NØ NAME, where the buttons have been styled as a toggle. You can find CSS examples for this at https://docs.fibbl.com/fibbl-layer.html.
Embedding the fibbl-layer on product detail pages
The Fibbl script is meant to be simple to integrate into any e-commerce platform. The script is implemented once on the global product detail page template (or any other page template), and then dynamically displayed or hidden on respective product detail page. If a product has a Fibbl experience, it will be displayed. If a product is missing a Fibbl experience, it will not be displayed. This is always the case if you have not actively chosen to deactivate a specific product, or disable a specific technology for a specific product in our platform.
Start out by including the script in the top section of your code for the generic product detail page template. This will enable the components to load.
<script
src="https://cdn.fibbl.com/fibbl.js"
type="module"
data-fibbl-config
data-locale="en-UK"
data-analytics-type="google"
data-analytics-id="G-ABCABCABC">
</script>
ℹ️ data-analytics-type and data-analytics-id is related to our Google Analytics 4 integration and we recommend you to implement it. Read more about it here. “G-ABCABCABC” in data-analytics-id is only a placeholder example and should be replaced with your own Google Analytics measurement ID.
🌍 data-locale is an optional setting if you want to use translations for the help text provided for the features. If you use a locale that is not supported, the default language English is used. Supported languages can be found here. Contact us if you are missing a language.
The most common way of implementing fibbl-layer is with a toggle with two options: 3D, which should be set by default and images which is your current original content. Beside the toggle, you should implement another button to trigger the Augmented Reality (AR) and/or Virtual Try-On (VTO). Once again, the Fibbl script enables the streaming of these experiences – you control the look and feel with regular HTML and CSS. See code example below, and view an interactive demo with css inspiration on this link.
<style>:not(:defined){opacity:0;}</style>
<fibbl-layer data-product-id="{{product.id}}">
<button data-element="default">Images</button>
<button
class="fibbl-active"
data-element="fibbl-model-viewer"
>3D</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>
This code should be placed at the bottom of the element where you want the Fibbl experience to render.
⚠️ “{{product.id}}” in data-product-id is only a placeholder example and should be replaced with a relevant dynamic variable for your products.
Initially, the layer hides the experiences and all the buttons. Then it makes a request to Fibbl's API and analyzes what options are enabled for the product with the provided product-id. Then only buttons corresponding to the enabled options related to the product-id are shown. Each button should be provided with a data-element and a data-type attribute for fibbl-qr-code, depending on the desired technology respective button should trigger.
FAQ
Can I customize the look and feel?
Can I customize the look and feel?
Yes, in fact the most of it is controlled and designed on your end. The buttons are simple HTML and you can style and position them however you want as with any other button on your site. You can also control the visibility and positioning of certain model viewer elements, as well as the background color or image to mention two examples – see this documentation for visibility and positioning, and this documentation for element styles.
Does the Fibbl script affect the performance of our website?
Does the Fibbl script affect the performance of our website?
Yes, a tiny bit – as any script on any website. However, with the 3D first implementation, the original content is displayed as usual and the 3D experience will load in the background making the experience unaffected even if the user has a bad connection. For more information about the impact, read this SEO report.
How can I change the button text and enable local translations for market specific domains?
How can I change the button text and enable local translations for market specific domains?
You can display local translations of the buttons in the same way as you usually do, the button text is simple HTML. You control this on your end.
Related articles
An extended version of this documentation can be found at https://docs.fibbl.com/.
Did we miss something?
Not to worry! Just email our support team at help@fibbl.com. ✌️