Appearance
Introduction
About live code examples
If you have an ad blocker installed or have enabled some strict privacy settings in your browser, the live code examples may not always work (because some Codepen scripts may be blocked). In this case, try to reload the page several times, or view the code examples on Codepen (if an example isn't shown properly, you still should be able to see a link). Alternatively, try to open this website in another browser. Also, you can test Fibbl components locally in an HTML file, it's explained how to do it below.
This documentation describes and shows how to add Fibbl Components on your website. Since all the components are custom HTML elements, it's rather easy to use and customize them. And you can try to do it right here and right now using live demos that are available for all main components.
How to use live demos
- You can edit the markup and see that the demo updates in several seconds (alternatively, press the "Rerun" button at the right bottom corner).
- You can click on "Edit/Fork on Codepen" at the right top corner to open a demo in a new tab. It will allow you to get a bigger result space.
- You can copy any example into an HTML file and open it on your local machine (you can find a template below in the quick guide). It may be rather useful, because live demos are locked inside small iframes, and features like the browser VTO or the expanded model viewer don't take the whole window as they are supposed to.
- You can hide and reopen "HTML" and "Result" sections in live demos - just click on the corresponding tabs.
Quick guide
Below you can see a live demo that contains 3 basic Fibbl components that represents 4 basic technologies: VTO, 3D, AR and Images.
See the Pen complex-example by Fibbl (@Fibbl) on CodePen.
Try to change the code. For example, you can do the following:
Click on the "HTML" tab to open the source code.
Add
<style>fibbl-model-viewer { background: lightgreen }</style>
at the end of the markup.Close HTML tab, wait a bit or press "Rerun" at the left bottom corner, and you will see that the background color of the 3D model viewer has changed. You can apply other styles too, e.g. change its size (but not that it's inside a grid container).
Let's use another model: replace
@demo-glasses
value in thedata-product-id
attribute with@demo-shoe
.If you do it for the VTO QR code, it will disappear (because this shoe doesn't support VTO). And in the case of any other element, you will see that the model has changed.
Remove any
fibbl-
element from the markup, and it will disappear. Duplicate an element and it will be rendered twice.You can change the locale, to do it add 2 attributes,
data-fibbl-config
anddata-locale="sv-SE"
to thescript
tag:html<script src="https://cdn.fibbl.com/fibbl.js" type="module" data-fibbl-config data-locale="sv-SE" ></script>
Now you can see that the language has changed from English to Swedish. To see more text, place your cursor over a QR code component. You can try other locales. Only the first 2 characters matter, so
fi-XX
,fr-XX
,de-XX
will work. Note, that thedata-fibbl-config
attribute is required: it contains no data, but without it the script will not be able to find the config, so it will not work. There are other config properties, you can find them on the Global config page.You are not restricted by the playground above. Create an empty
fibbl.html
file on your machine and paste the following markup into it (you can copy the code via clicking on a copy icon at the right top corner that appear on hover):html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fibbl Demo</title> </head> <body> <!-- Edit elements inside the body, but don't remove outer tags --> <script src="https://cdn.fibbl.com/fibbl.js" type="module" ></script> <fibbl-model-viewer data-product-id="@demo-shoe" style="width: 400px; height: 400px" ></fibbl-model-viewer> </body> </html>
Open the file in a browser and (if your internet connection is ok) you will see the model viewer.
You can replace all the tags inside the
body
with the markup from the demo above, and it will work exactly the same. Alternatively, you can replace the markup in the live demo with this simpler example (use only tags from the body).Let's reconfigure the UI of the model viewer. To do it, add the
data-ui-config
attribute to thefibbl-model-viewer
component:html<fibbl-model-viewer data-product-id="@demo-shoe" data-ui-config='{ "expand-button": {"position": "left"}, "collapse-button": {"position": "left"}, "hint-text": {"position": "bottom"}, "dimensions-control": {"position": "right top"} }' ></fibbl-model-viewer>
Now you can see that the positions of the expand button and the hint text have changed, and there is a dimensions switcher. You can read more about the UI config on the Model Viewer page.
You can experiment with demo models (
@demo-shoe
,@demo-glasses
and@demo-bag
) freely, they are always available on any website and locally.
Also, you can open components pages, e.g. Fibbl Model Viewer or Fibbl Carousel, and play with simpler live demos.