Using deep links to open and hide the Loyalty widget

Deep links can be used to open the Rivo Loyalty widget to specific sections. You can add these deep links in navigation and menu items, emails, buttons, announcement bars and anywhere that you would share a normal URL. Using these links can boost engagement with your customers and encourage new sign-ups! This guide provides details on how Rivo Loyalty’s deep links work.

In this article:
Introduction to deep links
Using deep links
Opening the widget through a link
Hiding the widget on mobile and/or desktop screens
Common questions

Introduction to deep links

Deep links are hyperlinks that send your customers directly to a specific piece of content on your store, rather than the home page. You can use deep links to send your customers directly to a screen in the Loyalty widget. This is a great way to drive your customers toward your Loyalty Program, including any special offers you're running!



Using deep links

There are a few deep links you can use to open the Loyalty widget. Here are the anchors you can use, and the widget section they link to. 

#ba-loyalty-home  →  The front page of the widget
#ba-loyalty-rewards  →  My Rewards
#ba-loyalty-ways-to-earn  →  Ways to Earn
#ba-loyalty-redeem  →  Ways to Redeem
#ba-referral-program  →  The Referrals Program
#ba-referrals  →  My Referrals

Note: If a customer is not signed in to their account on your store, the widget deep links #ba-referrals and #ba-loyalty-rewards  will default to opening the front page of the Loyalty widget.

Opening the widget through a link

Here are some ways to use these deep links to keep your customers engaged with your loyalty program.

Open the Loyalty widget from a link in your navigation menu

This is a great way to put your Loyalty Program front and center and make it feel more native to your store.

From your Shopify Admin click Online Store.

Click Navigation and select the menu you'd like to edit.

Click add Menu item and add the deep link that you'd like the widget to open to. For example #ba-loyalty-rewards  opens the widget on the customer's rewards section.

💡 Pro Tip: When adding a new menu item, only use the deep links, not the entire URL.

Sharing a link to your Loyalty program

Sometimes it's handy to have a link available to share your Loyalty program directly with your customers. Adding a link to your loyalty program in an email campaign, Instagram bio, or a tweet is a popular way to increase engagement on your website.

Copy your website URL.

Add the Loyalty deep link at the end. The end result should look like example.com/#ba-loyalty-home

Copy the URL and share away! When your customers visit your website - the Loyalty widget will already be opened. Magic!

Open the loyalty widget through a page or a button on your website

Opening the widget through a button is a quick and easy way for customers to access your Loyalty program.

Create your new button according to your theme.

Add the Loyalty deep link to the href of the button.

The end result should look like <a class="your-website-button-class" href="#ba-loyalty-home">Open loyalty widget</a>

Note: Deep links will only work with <a> anchor tags, and on top level and main menus. Using a deep link on a menu dropdown or submenu is not supported.

Open the widget through a Call-to-Action

Add a CTA with a deep link almost anywhere on your site! If you are offering a free product as a reward, the product description is a great place to include a deep link to the Ways to Redeem section.

In your Shopify Admin, go to Products and select the product you're offering.

In the Product Description, write your CTA. Try something like 'Redeem your points to get this product for free!'

Highlight the text and click Insert link from the options above the description field.

Add just the deep link, e.g. #ba-loyalty-redeem and click Insert link.

Hiding the widget on mobile and/or desktop screens

You can use deep links with or without the widget being hidden on your website. This is a handy way you can preserve valuable real estate on mobile and desktop screens, while still letting your customers engage with your Loyalty program. There are 2 settings on this page that can be used together, or separately. 



Option to hide widget unless deep link is activated: Toggling this switch ON means your widget launcher will be hidden on all screens. This is useful if you would rather open the loyalty widget through a deep link such as example.com/#ba-loyalty-home. Toggling this switch OFF means the widget launcher will display on your website.
Hide widget launcher on mobile: Toggling this switch ON means the launcher will display on large desktop screens, but will be hidden on mobile screens. You can add a deep link in your Shopify navigation, so that on mobile, your customers can still access your Loyalty program without skipping a beat!

If you would like to hide the on-screen widget using either of these methods, follow these steps:

From the Loyalty dashboard, go to Brand Style > Theme

Click Hide Widget

Toggle the switch on to hide the widget

Both these switches are by default toggled OFF. This means the Loyalty widget will always display on your website. If you'd like to hide it, and only display it when a customer clicks a deep link, you can click here to adjust this setting.

Note: Toggling this switch ON will hide the Loyalty widget on your website. To display the widget on your website all the time, but still use a deep link to open it, leave this setting toggled OFF.

Common questions

Can I close the Loyalty widget by clicking the same link I used to open it? No. However, there is a Close button at the top right corner of the widget dialog for your customers to easily close the widget. Clicking a deep link just opens the Loyalty widget, it doesn't close it.
Was this article helpful?
Cancel
Thank you!