AcuityAI SDK

The acuityai SDK is a library that can be used to overlay shoppability onto any video player. It currently uses a customer dashboard https://acuityai.com to manage the connection between shoppable products in a video and the corresponding e-commerce back-end. (This functionality will soon be integrated into the SDK)

Working samples

• Sample 01
• Sample 02

Get started

Installing

Import using the module

npm install --save @acuityai/acuityai
# or
yarn add @acuityai/acuityai

import '@acuityai/acuityai/dist/acuityai-sdk.css';
import acuityai from '@acuityai/acuityai';

Using gloably via CDN

<link rel="stylesheet" href="https://assets.acuityai.com/acuityai-sdk.css">
<script src="https://assets.acuityai.com/acuityai-sdk.js"></script>

Using

Example:

acuityai.init({
  company: 'stacio',
  checkoutButtonContainer: '#checkout-button',
  shoppingContainer: '#shopping-panel',
  productContainer: '#product-panel',
  vertical: '123',
  group: '123',
});

Properties

| property | type | | description | |-|-|-|-| | company | string | required | Name of the company that is using the SDK. This is created on the customer dashboard at https://customer.acuityai.com | | productPanelContainer | string | HTMLElement | required | Container selector to define the location of the product panel. The product panel contains product thumbnails that can be clicked/tapped to reveal product cards. | | shoppingCartContainer | string | HTMLElement | required | Container selector to define the location of the shopping cart icon. This icon will display the number of items that are currently in the cart. Clicking/tapping the icon will direct the user to the checkout flow. | | productCardContainer | string | HTMLElement | required | Contianer selector to define the location of the product card. Product cards contain detailed product information (e.g., description, colors, sizes, price etc.). Product cards are revealed by clicking/tapping the product thumbnails in the product panel.| | productVertical | string | required | Product vertical the broad vertical that defines the video and the products contained within the video (e.g., NFL, NBA, MLB, Cooking, Travel etc.) Every video must fall within a product vertical. Product verticals are created on the customer dashboard at https://customer.acuityai.com| | productGroup | string | required | Product groups define a collection of products within a product vertical. Every video can be tied to one or more product group. Every product within the group will then display in the product panel as a thumbnail. Product groups are created on the customer dashboard at https://customer.acuityai.com| | showCloseButton | boolean | optional | Show/Hide the cross button that closes the product panel the default value is true | | storageType | 'localStorage' | 'sessionStorage' | optional | Define where the cart data will be store, possible values default sessionStorage | | getStorageKey | (company, vertical, group) => string | optional | Create the storage key used on storage, by default it creates a key cart:{company}:{vertical}:{group} |

Events

Example:

const onUpdateCart = (event) => console.log(event);

// Listen events listener
acuity.on('shoppingCart:update', onUpdateCart);

// Remove event listener
acuity.off('shoppingCart:update', onUpdateCart);

| name | type |description | |-|-|-| | productPanel:select | {id: string} | this event fires when the user clicks on one of the products in the product panel | | productCard:addToCart | {id: string} | this event fires when the user adds a product to cart from the product card | | productCard:dismiss | {id: string} | this event fires when the user dismisses the products card | | shoppingCart:update | CartObject | this event fires when there is any updates to the Shopping cart | | shoppingCart:checkout | CartObject | this event fires when the user clicks on the shopping cart icon |

Actions

Example:

// Clean the Shopping cart of all products
acuity.cleanShoppingCart();
// Show Product panel
acuity.showProductPanel();
// Hide Product panel
acuity.hideProductPanel();

| name | signature | description | |-|-|-| | showProductPanel | () => void | Show the product panel | | hideProductPanel | () => void | Hide the product panel | | getShoppingCart | () => CartObject | Return cart object | | getShoppingCartValue | () => number | Return total price form cart | | cleanShoppingCart | () => void | Clean products from shopping cart |

Objects

CartObject

{
  "session": "36d03110-b087-11ec-a2f2-f9c20de7d4eb",
  "url": "https://<shop>/cart/39307884986483:3,239423520781:4",
  "total" 7,
  "cartProducts": [
    {
      "product": {
        "price": "69.99"
      },
      "quantity": 3
    },
    {
      "product": {
        "price": "45.00"
      },
      "quantity": 4
    }
  ]
}