Embedding a standalone element to display is a great way if you really want to ensure the improved product experience can’t be missed by your customers, and if you have a natural space to integrate it. Below is a cheat sheet on how to implement it.
Embedding a standalone element to display Fibbl content
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.
Depending on the technology you want to display, you implement the respective code snippet on the desired area of the product detail page to complete the implementation. See the different code snippets below.
3D Model Viewer
The element to display a 3D model of a product.
<script
src="https://cdn.fibbl.com/fibbl-model-viewer.js"
type="module"
data-fibbl-config
data-locale="sv-SE"
data-analytics-type="google"
data-analytics-id="G-ABCABCABC">
</script>
<fibbl-model-viewer
data-product-id="123456"
style="width: 300px; height: 300px"
></fibbl-model-viewer>
Augmented Reality Placement
The element to enable Augmented Reality Placement of a product in the users space. On desktop it displays a QR code which link to the augmented reality experience. On mobile it is a direct link to the augmented reality experience.
<script
src="https://cdn.fibbl.com/fibbl-qr-code.js"
type="module"
data-fibbl-config
data-analytics-type="google"
data-analytics-id="G-ABCABCABC">
</script>
<fibbl-qr-code
data-product-id="123456"
data-type="ar"
style="width: 300px; height: 300px"
></fibbl-qr-code>
Virtual Try On
The element to enable Virtual Try On of a product, currently only glasses, on a users face. On desktop it displays a QR code and a call-to-action button which link to the Virtual Try On experience. On mobile it is a direct link to the Virtual Try On experience.
<script
src="https://cdn.fibbl.com/fibbl-qr-code.js"
type="module"
data-fibbl-config
data-analytics-type="google"
data-analytics-id="G-ABCABCABC">
</script>
<fibbl-qr-code
data-product-id="123456"
data-type="vto"
style="width: 300px; height: 300px"
></fibbl-qr-code>
Only available for glasses at the moment.
Carousel with images
The carousel element showing images of a product.
<script
src="https://cdn.fibbl.com/fibbl-carousel.js"
type="module"
data-fibbl-config
data-analytics-type="google"
data-analytics-id="G-ABCABCABC">
</script>
<fibbl-carousel
data-product-id="123456"
style="width: 300px; height: 300px"
></fibbl-carousel>
ℹ️ 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.
FAQ
Does the Fibbl script affect the performance of our website?
Yes, a tiny bit for the QR code elements and the images – as any content on any website. If you choose to implement the 3D model as a standalone element on the site, the model will be downloaded when the user enter the part of page where the element is implemented. The model is “lazy loaded”, it will not load if the user doesn’t scroll down to the part where it’s implemented. A 3D model size is between 2-5MB .
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
Did we miss something?
Not to worry! Just email our support team at help@fibbl.com. ✌️