How to install the loyalty widget on your website

The widget is a small loyalty window on your own website. Without leaving your site, contacts can see their points and your rewards, claim a reward, share a referral link, sign up for your newsletter, send you a message and buy a gift card.

Decide what the widget shows before you put it live. See How to configure the design of your widget.

Install the code

Go to Apps → Widget.
Click View on the widget you want to install.
Open Installation.
Under Code fragment, copy the script.
Paste it into your website's HTML.

It doesn't matter where on the page the code goes: in the head or the body both work, and so does Google Tag Manager. The widget appears once the page has loaded.

The Instructions card on the same page has guides for the most common website platforms. They're also below.

Limit it to your own website

The Information tab shows the widget's Allowed domain. To set it, open Domain and click Add domain, or Edit domain if one is already set. Fill in your domain and click Save changes.

When an allowed domain is set, the widget only appears on pages whose address contains it. On any other page it doesn't show at all, so check this first if the widget is missing.

The Advanced tab has JavaScript commands you can copy under Open & Close:

window.PiggyWidget.open('overview'); opens the start page
window.PiggyWidget.open('giftcard'); opens the gift card shop
window.PiggyWidget.open('loyalty'); opens the rewards
window.PiggyWidget.open('login'); opens the login page
window.PiggyWidget.open('request-code'); opens the page where contacts request a login code
window.PiggyWidget.close(); closes the widget

To use one in a menu or a button, put it in the link, for example javascript:window.PiggyWidget.open('giftcard');.

A few things to know:

If the widget is already open, the command switches it to the page you chose. This works whether Open widget by default is set to Open or Closed.
A command that runs while the widget is still loading waits and runs as soon as it's ready. It also takes priority over Open widget by default, so a close command keeps the widget closed.
The widget code has to be on the page for a command to work. A link clicked before the code itself has loaded, for example while Google Tag Manager is still loading it, does nothing.
The gift card shop only works when the widget has a Giftcard element with a gift card program selected.

There's no web address that opens the widget on a particular page. It only opens through these commands or when a contact clicks the widget icon.

Under Authentication, the same tab has Login with token, Is logged in and Log out. They're for developers who log contacts in to the widget from their own website, and Login with token needs a token from the Leat API.

WordPress

The easiest way to add code to your WordPress site is a plugin that adds scripts to your header or footer, such as Header and Footer Scripts. Install it, paste the code fragment into it and save.

Wix

Adding your own code to a Wix site needs a premium Wix plan. In your site settings, open Custom code, paste the code fragment, choose your domain and save.

Shopify

In Shopify, go to Online Store → Themes and choose Edit code. Open theme.liquid, paste the code fragment just above the </head> tag and click Save.

Lightspeed

In your Lightspeed eCom back office, go to Settings → Web Extras. Paste the code fragment into Custom Javascript, switch it on and save.

Magento

In Magento, go to Content → Design → Configuration and edit the theme you want. Under HTML Head, paste the code fragment into Scripts and Style Sheets and save.

Squarespace

In Squarespace, go to Settings → Advanced → Code Injection. Paste the code fragment under Header and save.

Check the Allowed domain on the Information tab. If it's set and doesn't match your site's address, the widget stays hidden.
Check the code fragment is on the live page, not only in a draft or preview of your site.
If you've just installed it, clear your browser's cache or open the page in a private window.