Skip to main content
Deep links allow you to open the loyalty panel to specific pages programmatically. This enables customers to seamlessly navigate to particular sections of the loyalty panel from links, menu items, or buttons embedded directly on your website or app pages. The following deep links are currently supported and available for general use:
Deep linkDescription
homeIf a customer is currently logged-in, displays their loyalty program status based on which programs the account has setup (points, referrals, VIP). If no customer is currently logged-in, displays general loyalty program information.
points_activity_rulesDisplays a list of ways that a customer can earn points.
points_product:{id}If a customer is currently logged in, displays the redemption screen for the points product whose ID is provided (replace {id} with a valid points product ID). If no customer is currently logged-in, displays the list of rewards that customers can redeem their points for.
points_productsDisplays a list of rewards that a customer can redeem their points for.
referral_program_detailsDisplays information about the referral program. If a customer is currently logged-in, this includes their referral URL.
There are 4 different ways you can use deep links.

Query parameter

Just add a smile_deep_link query parameter to the URL of any link. e.g.
https://store.example.com/?smile_deep_link=points_products
This is the recommended approach for scenarios where you want to both open a new page AND open the rewareds panel once the page has loaded.

JavaScript method

Call the SmileUI.openPanel() method from within your JavaScript code and pass a deep_link parameter as part of the options object. e.g.
JavaScript
SmileUI.openPanel({ deep_link: "points_products" });

HTML attribute

Add a data-smile-deep-link attribute to any <a> (link) element. e.g.
HTML
<a href="#" data-smile-deep-link="points_products">Redeem your points!</a>
HTML attributes can only be used to open the loyalty panel from a page that the user already has open.

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.
https://store.example.com/#smile-points-products
Anchor tags can only be used to open the loyalty panel from a page that the user already has open.