How to add Floori Lite flooring visualizer to your website
How to add Floori Lite visualizer to your website?
- Add subdomain name (optional)
After logging into your account at https://portal.floori.io/login navigate to the “Account Settings” tab on the left side menu.
Then click “Edit” button on the bottom and change the Subdomain field to the name of your wish. Please note that only small letters are allowed, this means no spaces. For example:
This way our Floori Lite visualizer will be at https://jsfloors.floori.io/
2. Find Floori Lite visualizera URL address
If you’ve skipped step 1, first log into your account at https://portal.floori.io/login.
Now that we are surely logged in the portal, there are 2 ways to establish the visualizer URL address.
One is to click “Launch Floori Lite” in the top right corner and copy the address from the browser.
Second is to go to “Floori Lite” tab on the left side menu and click “Click here!” next to Floori Lite URL field with the right mouse button and select Copy Link Address.
3. Embed the code
The copied link link (example below) should be added to the HTML code (example below). All HTML code should be added to the source code of the web page where you want to add the Floori Lite visualizer.
An example of the Floori Lite visualizer address/iframe:
https://lite.actumwork.pl/preview/74513061d8a22e476bbf21b7714d8e772e547225825f1e4510de0e5f9c3e977f90e170b7665bd7823fdbc31683d95d0ad979
or, if we added the subdomain:
https://jsfloors.floori.io/
Sample iframe HTML code to add to the page:
<iframe src=”https://lite.actumwork.pl/preview/74513061d8a22e476bbf21b7714d8e772e547225825f1e4510de0e5f9c3e977f90e170b7665bd7823fdbc31683d95d0ad979″ style=”width:100%;height:82vh;border:none;”></iframe>
or, if we added the subdomain:
<iframe src="https://kowalski.floori.io/" style=”width:100%;height:82vh;border:none;"></iframe>
In addition, it is also worth adjusting the style (e.g. frame, background color, etc.) so that the plug-in fits your website or e-commerce store.
And just like that, you’re done! The Floori flooring visualizer will render on your website.
It is also a good practice to place a CTA button under each of your products on your website so that when the customer clicks this button, it will take you directly to the product in the Floori Lite visualizer.
After entering a new product on the Floori Portal, you can find a link that you can use to link to this CTA button. This link will direct customers on your site to that specific product within the Floori visualizer.
The goal is that after you click that button, you are immediately brought to that specific product within the visualizer, rather than sending the customer to to the main category view within Floori.
Below are some great implementations of Floori Lite on the websites and e-commerce stores of our clients:
https://jawor-parkiet.pl/645/aranzator.html
Questions, concerns? We are here to help 🙂
Reach us: Hello@Floori.io
