Using deep links to open and hide the Loyalty widget
Looking to create a loyalty page too? Create a dedicated on-site Rewards Page for your loyalty program
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.
Add a link to your loyalty program in your navigation menu
In this article:
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.
1. From your Shopify Admin click Online Store.
2. Click Navigation and select the menu you'd like to edit.
3. 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.
1. Copy your website URL.
2. Add the Loyalty deep link at the end. The end result should look like example.com/#ba-loyalty-home.
3. 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.
1. Create your new button according to your theme.
2. Add the Loyalty deep link to the href of the button.
3. The end result should look like <a class="your-website-button-class" href="#ba-loyalty-home">Open loyalty widget</a>
Note: Deep links can work on <a> anchor tags and most menus, but this can vary depending on the theme.
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.
1. In your Shopify Admin, go to Products and select the product you're offering.
2. In the Product Description, write your CTA. Try something like 'Redeem your points to get this product for free!'
3. Highlight the text and click Insert link from the options above the description field.
4. 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.
💡 Pro Tip: Enabling these temporarily is also a great way to test your loyalty program. Toggle the switches to hide the widget from your customers and use a deep link to take it for a test drive before you launch!
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:
1. From the Loyalty dashboard, go to On-Site Displays > Floating Widget.
2. Click Hide Widget.
3. Toggle the switch to 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_.
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.