Deep links

‚ÄčDeep links allow you to open the Panel to specific pages programatically. This allows you to display relevant content to your customers in specific scenarios.

Here are some examples of what you can do with the deep link system:

  • Show a customer how they can earn more points when they click a button on your site

  • Show a customer their referral link

  • Show a customer how they can spend points

Types of deep links

Deep links provide a way to engage a customer with a specific experience within the Panel. The following table defines each deep link and its behaviour.

Deep link

Description

home

Displays the customer's rewards program status based on which programs the account has setup (points, referrals, VIP).

points_activity_rules

Displays a list of ways that the customer can earn points.

points_products

Displays a list of items that the customer can redeem their points for.

referral_program_details

Displays information about the referral program along with the customer's referral URL.

Using deep links

There are 4 different ways you can use the deep link system.

Query parameter

https://store.example.com/?smile_deep_link=points_products

JavaScript

SmileUI.openPanel({ deep_link: 'points_products' });

HTML attribute

<a href="#" data-smile-deep-link="points_products">Redeem your points!</a>

Anchor tag

This method differs slightly from the others. For this method, the deep links are prefixed with "smile-" and are dasherized instead of underscored. For example, the points_products deep link becomes smile-points-products. See the example below.

https://store.example.com/#smile-points-products

Anchor tags should only be used when you want to open the Panel from a page that the user already has open. If you'd like to link to a different page AND open the Panel once the page has loaded, you should use the query parameter approach to deep linking instead.

Links included in emails should also use the query parameter approach.