nfinite Display Controller

Take control of your nfinite Display.

• Foreword
• About
• Integrations
  • React
  • Advanced
• Installation
• Getting Started
• Browser Support
• Troubleshooting
• Display Controller API
  • Constructor
  • Events
  • Functions
• Contributing

Foreword

This documentation evolves along with the development of the Display Controller API. This means that you can find options or features that are pretty new and they may not be totally stable. To mark those new things we use the following badges:

• : documentation is still "Work in progress" (it concerns only the documentation)
• : early option/feature, its usage may change
• : fresh option/feature which is still not largely used but its usage is stable

About

nfinite Display is an interactive visual content delivery solution and its integration on your website can be easied with nfinite Display Controller.

Features:

• Instantiate nfinite Display
• Hook on Display events and lifecycle
• Access to content information
• Call functions

Info: If you use React on your website, we recommend you to follow the React integration instructions instead. It allows you to manipulate your Display as a Component and keep the exact same features.

Installation

nfinite Display Controller is available on the npm registry. Just run

npm i @hubstairs/display-js
# or
yarn add @hubstairs/display-js

Info: If you do not use npm as a package manager, you can follow the script integration instructions

Getting started

After having set your Display up on nfinite you will received your display id and your access token. Those information are needed to instantiate your Display. Pass the parent DOM element to the Display constructor.

<div id="display">
  <!-- insert the Display right here -->
</div>

import Display from '@hubstairs/display-js'

const domElement = document.querySelector('#display') // select the parent DOM element

// The display id and access token you received from nfinite
const options = {
  displayid,
  token,
}

// instantiate the Display
const display = new Display(domElement, options)

// hook on event
display.on('productClick', product => {
  console.log(`product button clicked for product ${product.code}`)
})

// access to content data
display.getProducts().then(products => {
  console.log('products', products)
})

// call exposed functions
display.nextScene().then(() => {
  console.log('next scene')
})

To go further there are few advanced integration mode.

Browser Support

nfinite Display Controller library is supported in Edge, Chrome, Firefox, Safari, and Opera.

To use this library, you should polyfill by your own:

• Promise
• WeakMap
• fetch

Troubleshooting

nfinite Display is an <iframe /> where source comes from display.nfinite.app so to make sure that it works properly you need to allow the https://display.nfinite.app in your Content Security Policy.

Content-Security-Policy: frame-src https://display.nfinite.app;