@acuityai/acuityai

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
    }
  ]
}