Skip to main content
If you’re using Smile on Shopify or BigCommerce, the Smile rewards panel and launcher will automatically be visible on your website for your customers to engage and interact with. However, it’s also possible to add the Smile panel and launcher to any website or other custom storefront you’ve built using our JavaScript SDK (Smile.js) — so long as your backend is still powered by one of our supported platforms (like Shopify or BigCommerce).

​
Limitations

Including Smile on a custom website or storefront has a few known limitations:
  • Nudges will not be triggered or visible.
  • The panel and launcher rely on normal page reloads/refreshes to detect when a customer has logged-in or when customer information needs to be updated, so their may be some behaviour quirks when used within a Single Page Application.

​
Instructions

1

Include the JavaScript SDK

Follow the instructions for including Smile’s JavaScript SDK on your website or webpage.
2

Initialize the JavaScript SDK

Follow the instructions for adding the initialization snippet to your website’s code. Ensure that the customer_identity_jwt value you initialize the script with is generated using the currently logged-in customer ID from your e-commerce platform. For Shopify, this is the numerical Customer ID (e.g. 123456789) and NOT the fully qualified GraphQL GID (e.g. gid://shopify/Customer/123456789).
3

Reload the page after customer login or logout

If your website does not trigger a typical page reload/refresh after a customer login or logout occurs, you’ll need to manually trigger one. On every reload, the JavaScript SDK should be fully re-initialized, ensuring that the customer_identity_jwt value matches the currently logged-in customer (or null if no one is currently logged-in). Note: It is not sufficient just to call the initialize method again without a page reload. The page must be fully reloaded.
4

Manually reload customer after actions occur

If your website does not trigger a typical page reload/refresh as a customer navigates between pages, you’ll need to manually reload the customer any time an action occurs that might cause a customer’s rewards information to change (such as after making a purchase, performing an activity, or redeeming their points). If the customer performs the action directly within the Smile panel then their information will be automatically reloaded, however if they perform it on your website (e.g. you create a custom embedded redemption experience), then you’ll need to reload the customer after they redeem. Note: Reloading the customer is only required when the user browsing the website is logged-in.