Frontend integration

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.

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.

<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.

<div class="sweettooth-init"
data-channel-api-key="pk_Z8AMWQF7riUYTSYyngeosAey"
data-external-customer-id="1000"
data-customer-auth-digest="a113803787ccfd74d2c954c00108722c">
</div>

sweettooth-init properties

Attribute

Description

data-channel-api-key

pk_Z8AMWQF7riUYTSYyngeosAey

Your 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-id

255607391

The 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-digest

3ef3d3bd1e47ae3da723d32147b05b41

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 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 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.

Ruby
ASP
Ruby
require 'digest/md5'
text = "#{customer_id}#{smile_api_secret}"
digest = Digest::MD5.hexdigest(text)
puts digest
# => "a113803787ccfd74d2c954c00108722c"
ASP
// Source: https://gist.github.com/kamranayub/4579346
byte[] hash;
using (MD5 md5 = MD5.Create())
{
str = "customer_id" & "sweettooth_api_secret"
return String.Join("",
Md5.ComputeHash(Encoding.Default.GetBytes(str))
.SelectMany(b => b.ToString("x2"))
.Select(c => c.ToString(CultureInfo.InvariantCulture))
.ToArray());
}

Step 4: Add the Smile.io 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.‌