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.
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.
<script async src="https://static.joy.so/avada-joy.min.js"></script>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
{% 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' %}
<script>
window.AVADA_JOY = window.AVADA_JOY || {};
window.AVADA_JOY.shopId = '{{ joy_app_id }}';
{% if customer %}
window.AVADA_JOY.customer = {
id: {{ customer.id | json }},
email: {{ customer.email | json | downcase }},
hash_version: 'v2',
hash_secret: {{ customerHashSecret | json }}
};
{% endif %}
</script>
<script
src="https://static.joy.so/avada-joy.min.js"
defer
/>
Webview
This is an example KoaJS example for the web view render of the Joy widget.
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 = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Joy Loyalty SDK - Mobile WebView</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: #f8f9fa;
}
</style>
<script src="https://static.joy.so/avada-joy.min.js?v=${new Date().getTime()}" defer></script>
</head>
<body>
<script>
window.AVADA_JOY = window.AVADA_JOY || {};
window.AVADA_JOY.shopId = '${shopId}';
window.AVADA_JOY.customer = {
id: ${sCustomerId},
email: '${email}',
hash_version: 'v2',
hash_secret: '${hash}'
};
</script>
</body>
</html>
`);Events
SDK-ready events
In order to run after the SDK is loaded, you can listen to the event joy:ready
window.addEventListener('joy:ready', () => {
});Other app events
Each time customers redeem coupons successfully, you can listen to the event joy:redeemCoupon
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
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
window.addEventListener('joy:applyCoupon', (e) => {
const data = e.detail;
console.log('data applyCoupon', data);
});Last updated