We see a massive increase in conversion and engagement rates among our clients when their website visitors interact with 3D and AR. However, since these augmented product experiences are fairly uncommon, not all end consumers know what to expect if they click the buttons. Therefore, we developed a script that enables you to add hints to your Fibbl button bar – which increase the probability of higher interaction rates on the buttons. In this article (or video attached to the bottom) we will cover how to implement it.
Fibbl hint is a standalone component that shows a tooltip for any HTML element (usually a button). The main purpose is to attract user's attention. Once it's closed, it will not appear within a certain period of time. The component doesn't require you to change the existing Fibbl integration, it's just an unobtrusive addition to it.
The trigger is invisible and its position in the DOM doesn't matter, so you are free to add it where you want. It accepts a target (usually a button) selector and other options. Example:
<script src="https://cdn.fibbl.com/fibbl-hint.js" type="module"></script>
<!-- Existing button, just add an id to it, if needed -->
<button id="start3d" style="margin: 5em;">Start 3D</button>
<fibbl-hint-trigger
data-target-selector="#start3d"
data-text="View this product in 3D"
data-placement="bottom"
></fibbl-hint-trigger>
Supported custom attributes:
data-target-selector- a selector of an HTML element for which you want to show the hint.data-text- either a predefined key word:3d,images,ar,vtoor any custom string. The keywords will be replaced with the corresponding phrases.data-placement- eithertop,bottom,left,right. Determines the position of the hint relative to the target. The hint can change its position automatically, if there isn't enough space.
ℹ️ You can also style the hint according to your wishes with regular CSS.
Related articles
An extended version of this documentation can be found at https://fibbl-docs.github.io/#fibbl-hint or below.
Did we miss something?
Not to worry! Just email our support team at help@fibbl.com. ✌️