# 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`
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://devdocs.joy.so/joy-javascript-api/joy-loyalty-sdk.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.