Using deep links to open and hide the Loyalty Widget

Introduction

Deep links offer a way to direct users to specific areas within the Floating Widget. These links can be incorporated into various elements such as navigation menus, email campaigns, call-to-action buttons, notification bars, and any place where you'd typically include a standard URL. Utilizing deep links can enhance customer interaction and potentially attract new users.

Video Walkthrough

Deep links available

Deep links function as specialized URLs that guide customers straight to a particular screen in the Floating Widget, bypassing the main landing page. Each anchor can be added at the end of any URL, which is a great way to drive your customers toward your Loyalty Program while they browse your store.

  • #ba-loyalty-home → It opens the front page of the Widget
  • #ba-loyalty-rewards → It opens the section My Rewards
  • #ba-loyalty-ways-to-earn → It opens the section Ways to Earn
  • #ba-loyalty-redeem → It opens the section Ways to Redeem
  • #ba-referral-program → It opens the section Referrals Program
  • #ba-referrals → It opens the section My Referrals

Opening the Floating Widget through a deep link

Consider these strategies for implementing deep links to maintain customer interest in your Loyalty program.

Open the 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. For example, #ba-loyalty-rewards opens the Widget in the customer's rewards history section.

Sharing a link to your Loyalty program

Having a readily available link to share your Loyalty program directly with customers can be beneficial. Incorporating such a link in marketing emails, social media profiles like Instagram, or even tweets is an effective method to boost engagement on your website.

  1. Copy your website URL.
  2. Add the Loyalty deep link at the end of the URL. The end result should look like this:mystore.com/#ba-loyalty-home.
  3. Copy the URL and share it away. When your customers visit your website, the Widget will already be opened - magic!

Open the Widget through a page or a button on your website

Integrating a button that opens the Widget provides customers with quick and convenient access to your Loyalty program.

  1. Create your new button according to your theme.
  2. Add the deep link to the href of the button.
  3. The end result should look like this: ​

<a class="your-website-button-class" href="#ba-loyalty-home">Open loyalty widget</a>

Open the widget through a call-to-action

You can place a call-to-action featuring a deep link in numerous locations on your site. For instance, if you're offering a complimentary item as a reward, the product's description page is an ideal spot 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 the anchor only (e.g. #ba-loyalty-redeem) and click Insert link.

Hiding the Widget on mobile and/or desktop screens

Deep links can be employed regardless of whether the Widget is visible or hidden on your website. This approach allows you to conserve valuable screen space on both mobile and desktop devices, while still enabling customers to interact with your Loyalty program. There are two configuration options on this page that can be used in combination or independently.

  1. Go to Onsite > Floating Widget.
  2. Click on Hide Widget.
  3. Toggle the switch to
    1. Option to hide Widget unless deep link is activated - Enable this to hide the Widget button on all screens. This is useful if you would rather open the Widget through a deep link such as mystore.com/#ba-loyalty-home
    2. Option to hide Widget unless deep link is activated - Enable this to display the Widget button on large desktop screens only. The button will be hidden on smaller screens (mobiles).

📝 Note: 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!

Common questions

Can I close the Floating Widget by clicking the same link I used to open it?

No, activating a deep link simply launches the Widget. However, customers can easily dismiss it using the close button located in the top-right corner of the Widget dialog.

Was this article helpful?

Using CSS to add a unique style to your Floating Widget