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.

Joy Developer Toolkit (JDK) is not currently compatible with single-page applications.

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);
});

PreviousJoy Loyalty Devkit NextPublic API get methods

Last updated 2 months ago