Introduction to the Joy 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://joy.avada.io rather than included in a bundle or hosted yourself.

<script async src="https://joy.avada.io/scripttag/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://joy.avada.io/scripttag/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://joy.avada.io/scripttag/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

In order to run after the SDK is loaded, you can listen to the event joy:ready

window.addEventListener('joy:ready', () => {

});

NextPublic API get methods

Last updated 1 month ago