Reliby provides a button to announce your customers you have Reliby virtual try-on available for them in your webpage. Which means they can try-on your glasses virtually! This button is capable of opening the Reliby app with the glasses your customer is interested in, and also tells the app to only recommend your glasses (it is your customer).
The button is smart. It makes it very seamless to your customers to try-on your glasses, no matter if they are in a mobile phone capable of running the Reliby app, or in a desktop computer. The button will change between the two appearances.
Mobile appearance: If the client is using a mobile device, the button is presented as a regular button. The user can press it and the app will open.
Desktop or laptop appearance: Unfortunately most of the people does not have a camera in their computers, and web browsers are very slow to run the complex Reliby's algorithms. This is why the button in this case evolves to a button with a QR Code the user can scan with their mobile device to open the app and try-on your glasses.
If the potential client does not have the Reliby app installed, they will be prompted to install the app, and later will be able to open your glasses. This process is fast and easy, much more than the trouble needed to get to some optics store to try them out!
We know not all websites are equal, an all of them have unique designs, that is we designed a multiple buttons so your web looks as good or better as it looked before. We provide four variations: Color, Yellow, Grey and Black, you should always use "Color" if possible, the other variations are to use if "Color" does not provide enough contrast or presents conflicts with your color palette. If you cannot use the primary variation, please use "Yellow", "Grey" and "Black" will be used only as a last resource if "Color" or "Yellow" don't work at all.
Is very important your potential clients notice the try-on button so they can try-on your glasses, ultimately is a driver for sales, that's why "Color" and "Yellow" are the main variations so your potential customers can fall in love with your glasses.
Please do not customize the button, you can target our CSS classes, but don't. There are a few reasons why you should not do it:
This section will guide you to add the button to your own web page. This section is pretty generic, and requires some knowledge of the platform you are using as a point of sale (like Shopify or Squarespace), if you have problems please contact the Reliby team at email@example.com and one of our engineers will help you solve it.
We also provide some guides on how to set up the button on some common services:
If your service is not listed below and you are having problems, please contact us to solve your issue and create a guide for the future.
You need to identify the source code
HTML of the product pages you are using, this is were we will inject some of the code to make this work.
Locate the productPage
.html. It will have this sections
<!DOCTYPE html> <html> <head> <!-- This section contains some declarations used in your page --> </head> <body> <!-- This section contains the information and it's structure --> </body> </html>
Copy this text inside the
head section (
Now you have to find inside the
body where the button must be. We suggest over or below the buy button, so the users can see it, and not leave your site without knowing you offer Virtual Try-on.
And copy this code where you want the button to be:
<!-- You have to add this to your site where the button goes in the body --> <div class="reliby-button-placeholder" id="reliby-model-id"></div>
Now it is important to link each button to your glasses so the button knows which glasses to open in the app. You will have to change each
reliby-model-id with a unique ID provided by Reliby for each model. Reliby will provide you with an Excel file relating each model name, URL and
You can change the default color variation with the field
data-variation, being the possible values:
<!-- You have to add this to your site where the button goes in the body --> <div class="reliby-button-placeholder" id="reliby-model-id" data-variation="variation-name"></div>
Once you completed these simple steps, you will be up and running.