Skip to main content
JavaScript
// If the script is loaded synchronously
SmileUI.initialize({
  publishableKey: "pub_0987654321",
  customerToken:
    "eyJhbGciOiJIUzI1NiJ9.eyJjdXN0b21lcl9pZGVudGl0eSI6eyJkaXN0aW5jdF9pZCI6IjEwMCJ9LCJleHAiOjE1ODU1OTE1MzZ9.PGJhiM0NYRok5VGAlAOT6F-57gu7SCBaennQbt6YrqU",
});

// If the script is loaded asynchronously
document.addEventListener("smile-ui-loaded", () => {
  SmileUI.initialize({
    publishableKey: "pub_0987654321",
    customerToken:
      "eyJhbGciOiJIUzI1NiJ9.eyJjdXN0b21lcl9pZGVudGl0eSI6eyJkaXN0aW5jdF9pZCI6IjEwMCJ9LCJleHAiOjE1ODU1OTE1MzZ9.PGJhiM0NYRok5VGAlAOT6F-57gu7SCBaennQbt6YrqU",
  });
});
This method initializes Smile.js with information about the reward program to display and the currently logged in customer. This method must be called before you can interact with other methods provided by the SDK.
If you’re loading the Smile.js script asynchronously, you should wrap your initialization code within a loaded event to ensure it doesn’t encounter an error due to the script not yet being present on the page.

​
Parameters

​
options
object
required
A required object with the following keys:
  • publishableKey - Your Smile.io publishable key. This is used for identifying your store and can be made public. Refer to the help docs for where to find it.
  • customerToken - A signed JWT for the currently logged in customer on your site. See instructions below for generating this value. This should be null or ommitted entirely if no customer is currently logged in.

​
Customer token values

The customerToken should be a JSON Web Token (JWT) containing information about the customer that is currently logged in. It should be generated securely on your platform’s backend and be signed using the HS256 algorithm with one of your account’s signing keys. If no customer is logged in, the customerToken parameter should be null or excluded from the initialization call entirely. The values in the JWT header are constant and never change:
JSON
{
  "alg": "HS256",
  "typ": "JWT"
}
The payload of the JWT should be dynamically generated, e.g.
JSON
{
  "dest": "api.smile.io",
  "sub": "<customer identifier>",
  "exp": "<time in seconds>"
}
  • dest — The intended recipient of the JWT (should always be api.smile.io).
  • sub — An identifier for the currently logged-in customer (see notes below).
  • exp — When the JWT expires (recommendation: 5 minutes after JWT is generated).

​
Customer identifiers (sub values)

You can identify the logged-in customer by providing a sub claim in the payload of the JWT in one of the following supported formats. Choose the appropriate format based on which unique identifier you have available for the currently logged-in customer.
Type of IDFormatExample value
Smile Customer IDSmileCustomer:{id}SmileCustomer:304169228
Shopify Customer IDShopifyCustomer:{id}ShopifyCustomer:10733458
BigCommerce Customer IDBigCommerceCustomer:{id}BigCommerceCustomer:7398675
Custom Platform Customer IDCustomPlatformCustomer:{id}CustomPlatformCustomer:937485
Warning: The Custom Platform Customer ID format will only function for legacy merchants (pre-2018) on custom e-commerce platforms. All other merchants should use one of the other supported formats.

​
JWT generation

JWT generation should always happen on your platform’s backend to ensure your account’s signing key remains secure. We also recommend storing your account’s signing key in an environment secret (rather than plaintext) to further enhance security. Here’s what generating the customerToken value (a JWT) looks like using Ruby:
Ruby
shopify_customer_id = "10733458"
signing_key = "sig_a5b85911214932b56b360ac956ddb392"

payload = {
  aud: "api.smile.io",
  sub: "ShopifyCustomer:#{shopify_customer_id}",
  exp: Time.now.to_i + 300 # Set expiry to 5 minutes
}

signed_jwt = JWT.encode(payload, signing_key, "HS256", { typ: "JWT" })