# Joy Loyalty SDK
### Introduction
Joy Developer Toolkit (JDK) was built with the mission to empower developers to create completely custom-builds for the Shopify store
You can use JDK to retrieve and display customers' information, redeem points for rewards, open or close the widget, etc.
{% hint style="info" %}
**Joy Developer Toolkit (JDK)** is not currently compatible with single-page applications.
{% endhint %}
### Getting started
Include the Joy Js script on each page of your site to access all the functionality of Joy's javascript library. The script should always be loaded directly from `https://static.joy.so` rather than included in a bundle or hosted yourself.
```html
```
Once this script is loaded on your store, or you install the Joy app on your Shopify store, you will be able to access the `joyInstance` global object with all of its methods.
### Authentication
Before going further, make sure you generate your Secret key at `Settings > Developers > Manage keys.`
#### Liquid authentication
```liquid
{% assign joy_app_id = 'APP_ID' %}
{% assign customer_hash_string = customer.id
| append: '-'
| append: customer.email
| downcase
| append: '-'
| append: joy_app_id
%}
{% assign customerHashSecret = customer_hash_string | hmac_sha256: 'APP_SECRET' %}
```
#### Webview
This is an example KoaJS example for the web view render of the Joy widget.
```javascript
const {
shopId, // App ID
shopifyCustomerId, // Shopify customer ID
email, // Email of the customer
secretKey // Secret key of Joy
} = ...
const prepareEmailCustomer = email?.toLowerCase() || '';
const hash = crypto
.createHmac('sha256', secretKey)
.update(`${shopifyCustomerId}-${prepareEmailCustomer}-${shopId}`)
.digest('hex');
try {
return (ctx.body = `
Joy Loyalty SDK - Mobile WebView
`);
```
### Events
#### SDK-ready events
In order to run after the SDK is loaded, you can listen to the event `joy:ready`
```javascript
window.addEventListener('joy:ready', () => {
});
```
#### Other app events
Each time customers redeem coupons successfully, you can listen to the event `joy:redeemCoupon`
```javascript
window.addEventListener('joy:redeemCoupon', (e) => {
const data = e.detail;
console.log('data redeemCoupon', data);
});
```
Each time customers revoke coupons successfully, you can listen to the event `joy:revokeCoupon`
```javascript
window.addEventListener('joy:revokeCoupon', (e) => {
const data = e.detail;
console.log('data revokeCoupon', data);
});
```
Each time customers apply coupons successfully, you can listen to the event `joy:applyCoupon`
