Embedding a button bar to display Fibbl content is probably the easiest way to implement Fibbl on a product detail page. And not only is it the simplest approach, it’s also the setup that, from our experience, tend to perform best in terms of customer engagement. Below is a cheat sheet on how to implement it.
Visual example of implementation can be found at Sportland's website.
Embedding the fibbl-bar 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-bar.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-bar component should be inserted somewhere under the main script, and either above or below your product display element.
ℹ️ The fibbl-bar.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-bar data-product-id="123456">
<button data-element="fibbl-model-viewer">3D</button>
<button data-element="fibbl-carousel">Carousel</button>
<button data-element="fibbl-qr-code" data-type="ar">AR</button>
<button data-element="fibbl-qr-code" data-type="vto">VTO</button>
</fibbl-bar>
Initially, the bar hides 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.
With this implementation the Fibbl content will be displayed in a full screen experience. In case you want to integrate it into an existing element such as the gallery/carousel view on product detail pages, please have a look at the extended documentation at the bottom of this article.
FAQ
Does the Fibbl script affect the performance of our website?
Yes, a tiny bit – as any content on any website. However, with the button bar implementation the content is only loaded when your users click on the buttons.
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. ✌️