Fibbl Documentation

Appearance

Fibbl Layer ​

A composite element. If you use it, you don't need to add separate scripts for elements that supported by the composite elements - they are already included. That is, you have added fibbl-layer.js, don't add fibbl-model-viewer.js, fibbl-carousel etc.

fibbl-layer allows you to quickly add all Fibbl elements to your website. It must be provided with buttons as children (by a button we imply any element with data-element attribute). Each button corresponds to either model-viewer, carousel, qr-code or video.

Code example ​

html
<script src="https://cdn.fibbl.com/fibbl.js" type="module"></script>

<div id="gallery" style="position: relative; display: flex; place-content: center">
  <img id="picture" src="https://cdn.fibbl.com/img/kitten.jpg" alt="cat" />
  <fibbl-layer data-product-id="@demo-shoe">
    <button data-element="default"> Default</button>
    <button
            class="fibbl-active"
            data-element="fibbl-model-viewer"
            data-ui-config='{ "hint-text": { "position": "bottom" } }'
    >
      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>
    <button data-element="fibbl-video"> Video</button>
  </fibbl-layer>
</div>

Note, you can copy this example into the live demo

Live demo (simple usage) ​

See the Pen Untitled by Fibbl (@Fibbl) on CodePen.

How it works ​

As the name implies, the component renders itself and the content as an additional layer on top of your content.

To use it, you should just add it into an element (usually it's a gallery wrapper) with a non-static position. If the position is static, the component will print an error into the console and hide itself.

Initially, the component hides all the buttons. Then it makes a request to the Fibbl's databases and analyzes what techs are enabled for the product with the provided product-id (e.g. 3D model can be enabled, but Virtual Try On disabled or not supported by the product at all). Then the buttons that are not supported are removed (turned into comments).

That is why the video button is hidden in the live demo, because @demo-glasses doesn't have a video. But if you use @demo-shoe instead, the button will be there.

Each button should be provided with the data-element attribute, which is either a name of a Fibbl element or default. All other data- attributes are passed to the corresponding element, when it's created, so you can configure elements this way. The dynamic props are also supported - if you change such a prop for a button, it will be changed for the corresponding element too. Alternatively, you can provide the inner elements markup, this way is described below.

default element is a special case - no element is rendered, the default content is used, the Fibbl content is removed.

How to change the default selected element ​

You can add fibbl-active class to any button. When the layer initializes itself, it looks for this class and activates the corresponding button (or the default one). If you add this class to fibbl-model-viewer button, then it will first show a loading indicator on top of your content, and, when the viewer is ready, a 3D model will be displayed. It allows you to make a smooth transition from images to a 3D model.

Styles and z-index ​

By default, fibbl-layer uses a very big z-index for itself and for the .fibbl-layer-content element. But you can override it.

If you override styles of fibbl-layer, it's recommended to start with all: unset (the same for buttons inside the layer).

But DO NOT use all: unset for .fibbl-layer-content - it will break it. Set only separate properties: background, z-index and color.

Custom attributes ​

  • data-product-id - required. A unique id of product in Fibbl's databases.

Inner components attributes

If you want to set certain attributes for inner components (e.g. for fibbl-model-viewer) you should set them for the corresponding buttons. An example:

html
<!-- fibbl-bar can be used instead of fibbl-layer - the principle is the same -->
<fibbl-layer data-product-id="@demo-shoe">
    <button
        data-element="fibbl-model-viewer"
        data-ui-config='{ "expand-button": false }'
    >
        3D
    </button>
</fibbl-layer>

Refer to each component documentation to get to know what attributes are available.

CSS classes ​

  • .fibbl-active - this class is added to a button, once it's selected and the corresponding element is shown. It's provided to allow users to override the standard styles. Also, you can add it manually to a button to make it selected by default.
  • .fibbl-ready - this class is added to the component itself, after it loads the product data and removes unsupported buttons. It allows you to create an appearance animation (see the advanced demo below).
  • .fibbl-layer-content - a class of the component which is inserted dynamically into the same element that contains fibbl-layer itself. It's not a Fibbl element (e.g. fibbl-model-viewer), it's a wrapper component. Using the class, you can easily change the background, z-index and color CSS props. DO NOT use all: unset for this element - it will break. Just set separate props.
  • .fibbl-layer-loading-indicator - a class of the loading indicator which is shown on top of the default content until the model viewer is loaded. To change the color, set the color CSS prop (however, the color can be changed on the Fibbl's side as well). To remove the indicator, set display: none. DO NOT set other props. DO NOT use all: unset for this element.

Custom events ​

  • fibbl-ready - this event is fired, when the component has received the product data and hidden the unsupported data. As well as the .fibbl-ready class it helps to understand when the component is ready to be displayed. It's a CustomEvent without any payload. You can see how it's used in the advanced example below.

Explicit definition of inner elements ​

There is an alternative way how inner elements can be defined. You can provide the elements markup in a template tag. If choose this way, then you should take into account the following:

  • There must be only 1 template tag, and it must be a direct child of the composite component (fibbl-bar/ fibbl-layer)
  • All the attributes must be defined in the element markup, not on the corresponding button. The button should contain only the data-element attribute (and other non-Fibbl attributes, if needed).
  • The inner elements should not contain data-product-id. It has no effect, because the product id will be set programmatically from the composite component.

The explicit definition of elements allows one to use the Slot API of the inner elements.

In the example below Fibbl Model Viewer is defined explicitly, and the default expand button is replaced with a custom element:

html

<script src="https://cdn.fibbl.com/fibbl.js" type="module"></script>

<style>
  .custom-expand {
    margin: 0.5em;
    padding: 0.5em;
    background: orange;
    border-radius: 100px;
  }
</style>

<div id="gallery" style="position: relative; display: flex; place-content: center">
  <img id="picture" src="https://cdn.fibbl.com/img/kitten.jpg" alt="cat"/>
  <fibbl-layer data-product-id="@demo-shoe">
    <button data-element="default"> Default</button>
    <button
      class="fibbl-active"
      data-element="fibbl-model-viewer"
    >
      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>
    <button data-element="fibbl-video"> Video</button>
    <template>
      <fibbl-model-viewer data-ui-config='{ "hint-text": false }'>
        <div slot="expand-button" class="custom-expand">Expand</div>
      </fibbl-model-viewer>
    </template>
  </fibbl-layer>
</div>

INFO

The inner elements defined via the markup may be used as is, may be copied by the composite component, may be recreated several times. That is, you must not assume that the element provided in the markup will be same element, which is shown, when the corresponding button is clicked. And you must not edit the template, once the composite component has initialized. However, even if the element is copied, its attributes are copied as well, so you can add classes to inner elements.

Advanced usage of fibbl-layer ​

If you want to style fibbl-layer, you may find the following demo quite useful:

See the Pen fibbl-layer by Fibbl (@Fibbl) on CodePen.

Also, it's worth mentioning that the fibbl-layer doesn't add event listeners to the buttons themselves. It listens for click events on itself, so if you add a listener to a button that does e.stopPropagation(), then the layer will not react. Keep it in mind.

fibbl-layer with dimensions switcher ​

The following example demonstrates how you can dynamically enable and disable dimensions in the model viewer, if you use fibbl-layer.

See the Pen fibbl-layer with dimensions by Fibbl (@Fibbl) on CodePen.

Migration from fibbl-3d-layer ​

If you use the experimental fibbl-3d-layer (now it's deprecated, do not use it anymore) and want to switch to the new fibbl-layer, then you may find useful the following live demo, which shows how you can replace the old component with the new one and preserve the default styles of the old one.

See the Pen fibbl-layer simple by Fibbl (@Fibbl) on CodePen.

fibbl-layer with iOS-like styles and VTO button ​

You can use the following example on your website.

See the Pen fibbl-layer with iOS-like styles by Fibbl (@Fibbl) on CodePen.