@acuityai/acuityai

AcuityAi SDK

The acuityai SDK is library that uses https://acuityai.com for implement shoppable in video element by utilizing our easy interface.

Get started

Installing

Import our script into the exists application

import acuityai from 'acuityai';

You can import it globally direct into the scripts tags

<script src="https://assets.acuityai.com/acuity-layer.js"></script>
<script>
	acuityaiLayer.start(...)
</script>

Connecting the video into the interface

acuityai.start(config);

Config

property	type		description
selector	string	required	here you can pass the selector for the shoppable interface know where it should place the product panel
cartButtonSelector	string	optional	here you can pass the selector for the cart button be placed inside, you can also create your on button using events and actions.
company	string	required	name of the company created on the https://customer.acuityai.com
video	element	optional	video element using the video element we are able to track, time, and dispatch actions like pause and play. If you don't want to pass the video element you can sync the product tray using setProgress.
asset	string	required	this is the asset id that you can get from the https://customer.acuityai.com of the related video asset

Example

acuityai.start({
    selector: '#shoppable-layer',
    cartButtonSelector: '#shoppable-btn-cart',
    company: 'company',
    video: document.querySelector('#video'),
    asset: 'myvideo-123'
});

Events

Cart total

cart updates every-time a product is added or remove from the cart

acuityai.events.on('cartTotal', total => {
	console.log(total);
});

Open product

trigger every time a product is opened

acuityai.events.on('openProduct', () => {
	console.log('openProduct');
});

Close product

trigger every time a product is closed

acuityai.events.on('closeProduct', () => {
	console.log('closeProduct');
});

Actions

Open/Close Cart

This method enables you to open/close the cart

acuityai.toggleCart();

Set video progress

Enables the progress of the video. This is used to sync our product tray with the video time line. When a video element is informed on the start method, set progress is not required.

acuityai.setProgress({ duration, currentTime });

Destroy

This method enables the destruction fo all the elements created on start

acuityai.destroy();