How to display the widget on a click

How to display the widget via a custom link.

Aleksandra Velkova avatar
Written by Aleksandra Velkova
Updated over a week ago

Overview

Merchants today have the option of not showing the tab on all pages on their website, and instead add a custom link to different HTML elements to launch the widget on a click only.

This can be text, button, image etc. This guide tells you how to achieve this.

NOTE: Knowledge of HTML is required to add this link.


Step 1: Choose how to display the tab

There are 3 display options for the widget in the Lootly platform:

  • Desktop & Mobile

  • Desktop only

  • None - only display the widget by clicking a link

Go to Display -> Widget -> Tab -> Edit and from display options, choose None:

widget deep link

Once you click on the “None” option, the system will display a code snippet.

Copy this code - you’ll add it to the HTML of the element you wish to open the widget on a click.

Save your changes.


Step 2: Add the code snippet to the element that will launch the widget

This element can be either a text, a button, an image or simply somewhere in the header /footer on your website. When clicked it will open the widget.

For this, you’ll need to add the code snippet you copied from Lootly, to the HTML code of the chosen element.

Please note that each e-commerce platform is different and therefore, how you do this will vary from one platform to another.


Open the widget to a specific part of the program

You can set the widget to open to a specific part of the program for customers when they click on it ( please note that the deep links provided work for logged-in customers only).

  • Earn points section: On page load, opens the widget on earn points page / if customer is not logged it, it redirects to login page. Add the following snippet to the page url where you wish to open the widget on the earn points section: ?lourl=earn-points

  • Spend points: On page load, opens the widget on to rewards tab - add this snippet to the url of the page where you wish to open the widget to the Rewards section: ?lourl=get-coupon

  • Auto open widget: automatically open the launcher when a customer lands on the page where you're displaying the widget: add this snippet to the url: ?lourl=open


That's it!

Did this answer your question?