Browser SDK API

To configure and manage your Plus Six installation, use the following integration points:

• Config options
• Text config
• Public functions
• Events

Config options

Config options are passed in on initialization via a config object. Here's an example with all options with their default (or an example) value. At a bare minimum, you can just include accountId, accountKey, and widgetContainer. Each config parameter is explained further in the tables below.

const plusSix = new PlusSix({
  // account auth
  accountId:                  '12345',
  accountKey:                 '67890',
  // session
  sessionRecycleInterval:     60 * 1000,
  sessionUserTimeout:         60 * 1000,
  sessionMaxLength:           120 * 1000,
  sessionWarningTime:         10 * 1000,
  // QR widget
  widgetContainer:            document.body,
  widgetColorConnected:       '#5D47FF',
  widgetImageCTA:             'data:image/png;base64,iVBORw0KGgoA...',
  widgetQrLogo:               'data:image/png;base64,iVBORw0KGgoA...',
  widgetAddShadow:            true,
  widgetBorderRadius:         0,
  widgetQrClickable:          false,
  // pointer
  pointerClickEvent:          'click',
  pointerMoveAmp:             1,
  pointerScale:               1,
  pointerColor:               '#5D47FF',
  pointerColorTouch:          '#ffffff',
  pointerColorStroke:         '#000000',
  pointerColorRipple:         '#5D47FF',
  // touchpad config
  touchpadColorMain:          '#5D47FF',
  touchpadHeaderLogo:         'data:image/svg+xml;base64,PHN2ZyB4bWxu...',
  touchpadKeepInstructions:   false,
  touchpadHideClickButton:    false,
  touchpadRedirectURL:        'https://plus-six.com',
  touchpadRedirectTimeout:    6 * 1000,
  // debug
  printConfig:                true,
});

Auth setup (required)

User session timing

QR Widget config

Pointer config

Touchpad config

Debug

Private config (interal use only)

Text config

You can set custom copy on any Touchpad element that can be populated upon connecting to your kiosk. The following properties (with their defaults listed here) can be set with a call to touchpadSetText() on the PlusSix object after initialization. You can override any or all of these text blocks:

plusSixObj.touchpadSetText({
  textTouchpadInstructions:    "Swipe to<br>move the cursor.",
  textSessionTimedOut:         "Your session<br>has timed out.<br><br>Scan the QR to<br>reconnect.",
  textSessionQuit:             "Your session<br>has ended.<br><br>Scan the QR to<br>reconnect.",
  textQuit:                    "EXIT",
  textClick:                   "Click",
  textTapToType:               "Tap here to type",
  textInputSend:               "Done",
  textSignHere:                "SIGN HERE",
  textSignatureCancel:         "Cancel",
  textSignatureSend:           "Submit",
  textPlaceholderDefault:      "Type here",
});

This should be called immedialety after initialization if you always want to use the same copy on the Touchpad. However, if you'd like to change languages during a user session (if the user clicks a language select button on your kiosk, for example), you can change text at any time and send it to the mobile interface by calling touchpadSetText() again:

plusSixObj.touchpadSetText({
  textTouchpadInstructions:    "Toque Aquí<br>para Empezar",
  textSignatureCancel:         "Regresar",
});

Finally, if you've switched languages but want to revert back to the default English copy, you can call the following:

plusSixObj.touchpadResetText();

Public functions

These methods can be called directly on your instance of the PlusSix class.

• widgetEl()
• widgetIsConnected()
• widgetNewQrCode()
• sessionResetTimeout()
• touchpadSetText()
• touchpadResetText()
• touchpadIsConnected()
• touchpadShowInstructions()
• touchpadHideInstructions()

widgetEl() : HTMLElement

Returns the QR Widget element. This is what gets appended to your custom container. This can be useful is you want to append the Widget to different containers throughout the lifecycle of your app.

widgetIsConnected() : boolean

Returns a boolean indicating QR Widget's current connection status to the Plus Six server.

widgetNewQrCode() : void

Shuts down the current connection, kicks off any users, and starts a new session for a Touchpad to join. You might call this if your app's state just completed a transaction, for example.

sessionResetTimeout() : void

Resets the user interaction timeout timer. Can be used to manually extend the session if the Touchpad hasn't been touched, which is the standard reset event.

touchpadSetText(configObj: object) : void

Sets new UI copy on the Touchpad interface, with available properties described above. You can choose to set copy once, immediately after initializing the PlusSix object. You can also change copy multiple times during a session. One common use case is to change languages when the kiosk changes its own language setting, for example.

touchpadResetText() : void

Resets the Touchpad back to the default English copy.

touchpadIsConnected() : boolean

Returns whether there's an active touchpad session.

touchpadShowInstructions(newCopy: string) : void

Shows the Touchpad instructions again. Optional newCopy value will trigger an update of all customizable text.

touchpadHideInstructions() : void

Hides the Touchpad instructions and ignores the touchpadKeepInstructions flag.

Public functions for native bridge use only

• touchpadFocusTextInput()
• touchpadBlurTextInput()
• touchpadFocusSignatureInput()
• touchpadBlurSignatureInput()

touchpadFocusTextInput(value, placeholder="Tap here to type", type="text") : void

Lets the Touchpad know that a native textfield has been focused. You can pass the current value of the textfield contents, placeholder text that shows up in the mobile textfield, and an html <input> type attribute to show specific software keyboards. Supported special keyboard types are: text, password, email, tel.

touchpadBlurTextInput() : void

Directs the Touchpad to hide its keyboard and blur the textfield that's assumed to be currently-focused.

touchpadFocusSignatureInput() : void

Lets the Touchpad know that a native signature component has been focused. The mobile interface should show the Signature Pad interface.

touchpadBlurSignatureInput() : void

Directs the Touchpad to hide its Signature Pad interface that's assumed to be currently-focused.

Events

The QR Widget emits events as users connect, html elements are virtually-clicked, data is submitted, and other system state is updated. You can add and remove event listeners like so:

// create event listener function
function onNewQrCode(data) {
  console.log("widgetQrRegenerated", data.touchpadURL); 
}

// add event listener
plusSix.on("widgetQrRegenerated", onNewQrCode);

// remove event listener
plusSix.off("widgetQrRegenerated", onNewQrCode);

The following list of events give your listeners a single data object paramater, with event-specific properties described below.

Kiosk status events:

• widgetQrRegenerated
• widgetConnected
• widgetDisconnected
• widgetSessionUpdated
• widgetSessionTimeoutWarning
• nativeBridgeConnected (private)
• nativeDesktopReady (private)
• nativeIOSReady (private)
• nativeBridgeInitialized (private)

Touchpad status & touch events:

• touchpadConnected
• touchpadDisconnected
• touchpadDragStarted
• touchpadDragMoved
• touchpadDragEnded
• touchpadClicked
• touchpadScrolled
• touchpadPinched
• pointerHoverEl

Touchpad text input events

• textInputFocused
• textInputBlurred
• textInputChanged

Touchpad signature events

• signatureInputFocused
• signatureInputBlurred
• signatureInputSubmitted

widgetQrRegenerated

Emitted when the QR code closes the current room and generates a new one. Provides the URL that the QR code currently points to.

{
  "touchpadURL": "String"
}

widgetConnected

Emitted when the QR Widget connects to the Plus Six server. No extra data provided.

widgetDisconnected

Emitted when the QR Widget disconnects from the Plus Six server. No extra data provided.

widgetSessionUpdated

Emitted as the QR Widget session timers run. Fires on requestAnimationFrame in case you want to build your own clock.

{
  "sessionTimeoutTime": "number",
  "sessionStartTime": "number",
  "sessionEndTime": "number",
  "sessionDuration": "number",
  "sessionTimeLeft": "number",
  "sessionProgress": "number",
}

widgetSessionTimeoutWarning

Emitted when the QR Widget session interaction timeout clock enters the warning zone. If true, maxSessionDuration lets us know that the user was connected longer than the sessionMaxLength.

{
  "maxSessionDuration": "boolean"
}

touchpadConnected

Emitted when a Touchpad connects to the kiosk via the Plus Six server. No extra data provided.

touchpadDisconnected

Emitted when a Touchpad disconnects from the kiosk and Plus Six server. No extra data provided.

touchpadDragStarted

Emitted when the Touchpad starts dragging, thus moving the Pointer. Provides the current Pointer location in the kiosk app.

{
  "pointerX": "number",
  "pointerY": "number"
}

touchpadDragMoved

Emitted when the Touchpad is dragging and thus moving the Pointer. Provides the current Pointer location in the kiosk app, and how far the location moved with the most recent touchmove event.

{
  "pointerX": "number",
  "pointerY": "number",
  "deltaX": "number",
  "deltaY": "number"
}

touchpadDragEnded

Emitted when a the Touchpad finishes dragging. Provides the current Pointer location in the kiosk app.

{
  "pointerX": "number",
  "pointerY": "number"
}

touchpadClicked

Emitted when a the Touchpad sends a click command. Provides the html element that the Pointer virtually clicked.

{
  "clickedEl": "HTMLElement"
}

touchpadScrolled

Emitted when a the Touchpad sends a two-finger scroll gesture. Provides the distance that the user gesture has moved on x & y axis. If the Pointer was hovered inside an element with a plus-six-scroll-container and has a scrollable overflow setting, the scroll gesture will be passed to that container. Otherwise, the scrollEl value will be null, and the window property will be true, telling us that the scroll gesture is being called on the window's outer container.

{
  "scrollDeltaX": "number",
  "scrollDeltaY": "number",
  "scrollEl": "HTMLElement", 
  "window": true
}

touchpadPinched

Emitted when a the Touchpad sends a two-finger pinch gesture. Provides the distance that the pinch has expanded or contracted, and the rotation delta as the pinch touches rotate. If the Pointer was hovered inside an element with a plus-six-pinch-container, the pinch gesture will prevent touchpadScrolled events from firing and pass the pinched element along. This helps us with advanced functionality like pinchable elements inside a larger scrollable element.

{
  "pinchDeltaDist": "number",
  "pinchDeltaRads": "number",
  "pinchEl": "HTMLElement"
}

pointerHoverEl

Emitted when a the Touchpad moves the Pointer and provides the HTMLElement that's most recently hovered. This action also toggles the plus-six-hover class on the elements it passes over.

{
  "hoverEl": "HTMLElement"
}

textInputFocused

Emitted when a text <input> is focused. When this happens, a text input and software keyboard should appear on the Touchpad. Data provides the html element that was focused.

{
  "inputEl": "HTMLElement"
}

textInputBlurred

Emitted when a text <input> is blurreded. Provides the html element that was blurred.

{
  "inputEl": "HTMLElement"
}

textInputChanged

Emitted when a text <input>'s value is changed by input from the Touchpad. Provides the html element and its new value.

{
  "inputEl": "HTMLElement",
  "value": "String"
}

signatureInputFocused

Emitted when a signature component is focused. When this happens, a signtaure pad should appear on the Touchpad. Provides the html element that was focused. This html element should be an

{
  "signatureEl": "HTMLElement"
}

signatureInputBlurred

Emitted when a signature component is blurred. When this happens, the signtaure pad should hide on the Touchpad. Provides the html element that was blurred.

{
  "signatureEl": "HTMLElement"
}

signatureInputSubmitted

Emitted when a signature component receives a signature image submitted by input from the Touchpad. Provides the signature element and its new base64-endcoded image.

{
  "signatureEl": "HTMLElement",
  "signatureImg": "String"
}