Browser SDK installation

The Plus Six Browser SDK leans into the browser's DOM event system and allows basic integration into your kiosk with very little effort. Additional and advanced integration options and techniques are described below. Plus Six expects that your kiosk's browser supports WebSockets, modern CSS, and modern JavaScript.

1. Get an auth key from Plus Six

Contact Plus Six for trial credentials.

2. Grab the SDK

And link to it directly it into your page. By pulling straight from the source, you'll always get the latest updates. You could pull down this javascript file into your build system, but it's not recommended, as the internal APIs may change over time. Find lazy-loading instructions below. This can be the lowest-impact method of integrating and test-driving Plus Six.

<script src="https://plus-six.com/sdk/js/plus-six.min.js"></script>

3. Create an html element container for the QR widget

To quickly test the SDK, you could even inline some CSS that positions the QR container where you want it. In this example code, it's at the bottom-right of the screen, with a slightly smaller scale, because it fit better on the screen. Be sure to always keep the QR code large enough to be easily scanned by a camera at an appropriate distance away from the screen. Finally, think about how you might want to move, show, and hide the QR Widget during the lifecycle of your app. Most of the time, we would recommend not hiding the QR code, as it both acts as a status indicator, and allows the next user in line to take control of the kiosk, if the previous user stepped away before timing out. 

<!-- custom container & positioning -->
<style>
  #qr-holder {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    transform: scale(0.8);
    transform-origin: right bottom;
  }
</style>
<div id="qr-holder"></div>

4. Initialize the library when your app starts

You'll need to add custom configuration values for:

The following is a bare minimum installation. See the API docs for all configuration options.

window.plusSix = new PlusSix({
  accountId:           'customer-id',
  accountKey:          '123456',
  widgetContainer:     document.getElementById('qr-holder'),
});

Optionally lazy-load the library

In some cases you might not want to add the Plus Six javascript into your build process. In fact, right now we don't recommend it, since the product is changing quickly. By importing the latest SDK from our server and lazy-initializing the PlusSix object when it loads, you'll get the latest features and avoid interrupting your default kiosk functionality.

Here are the two main steps to lazy-load the library:

  1. Set up a listener for the SDK, with a callback method to create the PlusSix object, as described above.
// initializer
function initCallback() {
  window.plusSix = new PlusSix(configObj);
}

// generic javascript listener for updated properties
function addPropertyChangedCallback(obj, prop, callback) {
  if (obj[prop]) callback(obj[prop]);
  let val = obj[prop];
  Object.defineProperty(obj, prop, {
    get: function() { return val; },
    set: function(newVal) {
      val = newVal;
      callback(val);
    }
  });
}

// listener for the lazy-loaded PlusSix class becoming available
addPropertyChangedCallback(window, "PlusSix", () => initCallback());
  1. Within your app, create a <script> tag to load the SDK. When it successfully loads into the browser, your initCallback() method will be called.
const script = document.createElement("script");
script.src = "https://plus-six.com/sdk/js/plus-six.min.js";
document.head.appendChild(script);

Further custom integration

Add a custom QR code image

On your kiosk, the QR Widget can display your brand's logo in the center on the QR code. This can help make the QR code look like it's a part of your app. You'll want to prepare an 80x80 square .png image for this purpose. The image needs to be base64-encoded and prefixed with the following string:

data:image/png;base64,

You can do this from the command line, or use an online image encoder.

Pass this string into the PlusSix object with the widgetQrLogo config option.

You can also add a basic call-to-action image above the Widget's QR code. Use the widgetImageCTA property. This is displayed at 128px wide, so you could use up to a 256px image for retina displays.

Style & position the QR Widget

The are a couple of config params that let you choose some basic styles:

Beyond those built-in options, you can target the .plus-six-qr class in your own CSS to override QR Widget styles. We don't reccomend doing too much of this, to avoid potential problems. The best way to style the QR Widget is to apply CSS to the outercontainer that you've defined for it.

Add a call to action

A QR code sitting on a screen isn't very attractive on its own. Your own app's design should accomodate some instructions that the QR Widget will allow them to use the screen with their phone. You can use the PlusSix event system to show and hide this CTA as users connect and disconnect.

Style the Pointer

The are a some config params that let you choose a basic styles:

You could also add your own CSS to further add your own customizations. For example, you could add a shadow to pop the cursor off the page:

.plus-six-pointer {
  filter: drop-shadow( 0 2px 6px rgba(0,0,0,0.5) );
}
.plus-six-pointer.touching {
  filter: drop-shadow( 0 1px 2px rgba(0,0,0,0.3) );
}

Style your interactive elements

As the Pointer moves around the kiosk screen, it toggles the class plus-six-hover on elements that it passes over. If you have :hover or :active styles in your web app, you can add this case to those rules in your own CSS.

For example: 

button:hover,
button.plus-six-hover {
  background-color: #00ff00;
}

Add scrollable containers

If you have an HTMLElement with a scrollable overflow CSS setting, you can add a class of plus-six-scroll-container to it. When the Pointer hovers over an element with this class, it will automatically send two-finger scroll gestures to that element and call the native HTEMLElement.scrollBy(x, y) function. By default, and in absence of any plus-six-scroll-containers, two-finger gestures will be forwarded to the window's outer container. The PlusSix object also emits the data for custom use, via the touchpadScrolled event.

Add pinch gestures

In addition to the scrolling potential mentioned above, the Touchpad also passes along two-finger pinch and rotate gesture data. Unlike the scrolling functionality, the touchpadPinched event doesn't do any native DOM manipulation - this data is for custom integration use.

Add a signature component

Just add a container and image tag to your page with the following classes. You'll probably want the <img> tag to fill the container. The <img> tag is invisible until a signature is submitted, which populates the src attribute with a base64-encoded image.

<div class="plus-six-signature-container">
  <!-- Custom "sign here" form graphics can be under the signature -->
  <img class="plus-six-signature">
</div>

You'll need the container or <img> tag to be a the top of the z-index stack so it's clickable. It will also need to be given a width and height to display incoming signatures that may be a different size. Internally, this image uses object-fit: contain CSS so it will look good regardless of the difference in aspect ratio between the kiosk signature box and the Touchpad signature pad.

<form> elements

The Plus Six browser SDK supports some basic html form functionality by default. When clicking an <input> for text entry, the current value, the type attribute, and the placeholder attribute are sent to the Touchpad to provide a textfield and software keyboard mode that mirrors the kiosk. Supported special keyboard types are: text, password, email, tel. Others will bring up the standard software keyboard.

Mobile interface branding

On the user's mobile phone, the Touchpad will display your brand's logo in the web app header. You'll need to prepare a .png or .svg that uses viewBox for image responsiveness, as we'll resize it to fit in the mobile layout. Just base64 the png or the text of the svg file, prefixed with the following string, depending on file type:

data:image/svg+xml;base64, data:image/png;base64,

You can do this from the command line or use an online base64 text encoder.

Mobile interface copy

You can customize almost all of the copy in the Touchpad app. This could be to implement your own copywriting or to add non-English language support. More info is available in the API docs.