The Smile Object
The Smile UI Object
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
1
https://store.example.com/?smile_deep_link=points_products
Copied!
JavaScript
1
SmileUI.openPanel({ deep_link: 'points_products' });
Copied!
HTML attribute
1
<a href="#" data-smile-deep-link="points_products">Redeem your points!</a>
Copied!
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.1
https://store.example.com/#smile-points-products
Copied!
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.
Last modified 1yr ago