3D First is the recommended implementation for most website. The 3D First experience will enable you to utilise the instant display of you products combined with power of 3D content. The 3D layer component is built to replace your 2D images with 3D as soon as the 3D model is loaded. It also offers a button solution where your users can easily switch back to the original 2D images.
A visual example of Zach Footwear, 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, and then dynamically displayed or hidden on respective product detail page. If a product has Fibbl content, it will be displayed. If a product is missing Fibbl content, it will not be displayed. This is always the case if you have not actively chosen to unpublish a specific product in our system or disable a specific technology for a specific product.
Start out by including the script in the top section of your code for the generic product detail page template. This will render the essential element.
<script
src="https://cdn.fibbl.com/fibbl-layer.js"
type="module"
data-fibbl-config
data-locale="sv-SV"
data-analytics-type="google"
data-analytics-id="G-ABCABCABC">
</script>
ℹ️ data-analytics-type and data-analytics-id is related to our Google Analytics 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 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 today is: Swedish, Finnish, Estonian, Latvian, Lithuanian, Hungarian and Russian.
The script must be provided with buttons. Each button corresponds to the different technologies Fibbl provides – either model-viewer, carousel or qr-code. The fibbl-layer component should be inserted at the bottom of the element you wish to display the content in.
ℹ️ The fibbl-layer.js encapsulate all other modules, so if you wish to combine the fibbl bar with a stand alone component you do not need and should not add the stand alone script tag.
<style>:not(:defined){opacity:0;}</style>
<fibbl-layer data-product-id="12345">
<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>
Initially, the layer hides the content and all the buttons. Then it makes a request to the Fibbl's databases 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.
⚠️ “123456” in data-product-id is only a placeholder example and should be replaced with a dynamic variable.
FAQ
Does the Fibbl script affect the performance of our website?
Yes – as any content on any website. However, with the 3D first implementation the original content is displayed as usual and the 3D content will load in the background making the experience unaffected even if the user has a bad connection.
Can I style the buttons?
Yes, as the buttons is simple HTML you can style them as any other element. It is only the imagination that sets the limits.
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.
Can I adjust the text and elements in the display views within the different technologies?
No, the text and elements within the 3D Model Viewer, Augmented Reality Placement display, Virtual Try On display is controlled by Fibbl. We continuously iterate on this experience and interface to enable the best possible customer experience. Please let us know if you have any feedback around this by dropping an email at help@fibbl.com.
Related articles
An extended version of this documentation can be found at https://docs.fibbl.com/ or below.
Did we miss something?
Not to worry! Just email our support team at help@fibbl.com. ✌️