Frontend integration

In this section, you will use the JavaScript and HTML code to display customer points balances, rewards, and ways to earn on your website.

Step 1: Add storefront.js to your website

Include JavaScript on every page, typically this is added to the footer of your site.

<script async src="" charset="utf-8"></script>

Step 2: Initialize storefront.js

Include a sweettooth-init div on every page of your website. The data attributes in this div will be read and used to configure's JavaScript when it loads.

<div class="sweettooth-init"

sweettooth-init properties





Your public key. This is used for identifying your store and can be made public. This can be found in your account settings.



The unique id of the currently logged in customer on your store. This should be the same id used when sending Events to the API. This may be left blank if no customer is currently logged in.



The digest is a hashed value used to verify the request is actually coming from your store. To generate this value see generate the customer digest below.

The customer digest is what's used to verify your store is the one requesting information from on behalf of a customer. It should be generated using your platform's server side language so your private key remains secret, using the MD5 algorithm, and converted to hexadecimal. The customer id used should be the external_id sent in the Backend Integration Guide, and as the data-external-customer-id attribute in the sweettooth-init div.

require 'digest/md5'
text = "#{customer_id}#{smile_api_secret}"
digest = Digest::MD5.hexdigest(text)
puts digest
# => "a113803787ccfd74d2c954c00108722c"
// Source:
byte[] hash;
using (MD5 md5 = MD5.Create())
str = "customer_id" & "sweettooth_api_secret"
return String.Join("",
.SelectMany(b => b.ToString("x2"))
.Select(c => c.ToString(CultureInfo.InvariantCulture))

Step 4: Add the Launcher to your website

The launcher displays a tab that lets customers engage with the rewards program.

<div class="sweettooth-launcher"></div>

Optional: Allow customers to spend at checkout

Allowing customers to redeem points at checkout is a great way to promote points spending and boost engagement with your reward program. Adding a points dropdown to your checkout makes spending points quick, easy, and seamless.‌