All Collections
Installing Fibbl
Adding hint to Fibbl button bar
Adding hint to Fibbl button bar

How to implement a hint connected to your Fibbl button bar

Mattias Österberg avatar
Written by Mattias Österberg
Updated over a week ago

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="" type="module"></script>

<!-- Existing button, just add an id to it, if needed -->
<button id="start3d" style="margin: 5em;">Start 3D</button>
data-text="View this product in 3D"

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, vto or any custom string. The keywords will be replaced with the corresponding phrases.

  • data-placement - either top, 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 or below.

Did we miss something?

Not to worry! Just email our support team at ✌️

Did this answer your question?