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.

  • 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!

Colors

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

Customization

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:

  • Different designs for each website make the button match better with each brand's style, but also make users with the application already installed (or who have received marketing from Reliby) have problems identifying you have the virtual try-on with us, and that can make them not try on the glasses and therefore lose that potential customer.
  • We are constantly updating our products to improve them, so changes not controlled by us may cause unexpected compatibility issues.
  • As the catalog grows it becomes more complicated for us to check these things on all the brands' websites, so we won't, as it makes the update process much slower.
  • We won't notify most improvements if they don't have significant changes, won't be necessary because we will provide backwards compatibility but only to Reliby provided assets.

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

<!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 (<head> HERE </head>)

<script src="https://www.reliby.com//ContentsForBrands/TryOnButton/js/reliby-autoload.js"></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:

  • "Color". This is the default color variation, if you don't provide a variation this variation will be used.
  • "Yellow". Secondary variation, only used if "color" does not "work" on your site.
  • "Grey". Tertiary variation, use as a last resource.
  • "Black". Tertiary variation, use as a last resource.
<!-- 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.