Skip to main content
In this section, you will use the Smile.io JavaScript and HTML code to display customer points balances, rewards, and ways to earn on your website.
Storefront.js is now deprecated and support for it will end on December 31, 2025. To migrate to it’s replacement (Smile.js), follow the instructions here .

​
Step 1: Add storefront.js to your website

Include Smile.io JavaScript on every page, typically this is added to the footer of your site.
HTML
<script async src="https://cdn.sweettooth.io/assets/storefront.js" 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 Smile.io’s JavaScript when it loads.
HTML
<div class="sweettooth-init"
     data-channel-api-key="pk_Z8AMWQF7riUYTSYyngeosAey"
     data-external-customer-id="1000"
     data-customer-auth-digest="992b678ee8e8b9b84064d45a150ff2c04f169abb54a2e46a29343cad5ecae16c">
</div>

​
Initialization div properties

AttributeDescription
data-channel-api-keyYour Smile.io public key. This is used for identifying your store and can be made public. This can be found in your account settings.
data-external-customer-idThe unique id of the currently logged in customer on your store. This should be the same id used when sending Events to the Smile.io API. This may be left blank if no customer is currently logged in.
data-customer-auth-digestThe digest is a hashed value used to verify the request is actually coming from your store. To generate this value, see the instructions below.

​
Auth digest generation

The customer digest is what’s used to verify your store is the one requesting information from Smile.io on behalf of a customer. It should be generated using your platform’s server side language so your Smile.io private key remains secret, using the SHA256 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 initialization div.
Ruby
require "digest"

customer_id = "your_customer_id_here"
smile_api_secret = "your_smile_api_secret_here"

text = "#{customer_id}#{smile_api_secret}"
digest = Digest::SHA256.hexdigest(text)

puts digest
# => "992b678ee8e8b9b84064d45a150ff2c04f169abb54a2e46a29343cad5ecae16c"

​
Step 3: Add the Smile.io Launcher to your website

The launcher displays a tab that lets customers engage with the rewards program.
HTML
<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.‌