Virtual try-on with Reliby button

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).

Button appearances and versatility

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.

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.

All color variations for the button


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:

How to add the button to your web

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 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 head and body.

<!DOCTYPE html>
        <!-- This section contains some declarations used in your page -->
        <!-- This section contains the information and it's structure -->

Copy this text inside the head section (<head> HERE </head>)

<script src=""></script>

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 reliby-model-id.

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>

That's all folks!

Once you completed these simple steps, you will be up and running.