Creating a Handy UI Instance

Implementing the Handy UI is quick and easy. Learn how in this short tutorial.

Overview

The Handy UI is the fastest way to add an interface to the Handy from your website. We only need 4 lines of code to get everything running.

Line 1 — Import the Handy SDK into your site or project

We’ll simply use the CDN-hosted version of the Handy SDK and insert it into the <head> tag of our site.

<head>
  <script src="https://unpkg.com/@ohdoki/handy-sdk@2.1.12/dist/handy.umd.js"></script>
</head>

Line 2 — Create a named empty div

The Handy UI is inserted into a named div. By default, the Handy SDK will look for a div called handy-ui to bind to.

<div id="handy-ui"></div>

Line 3 and 4 — Initialize the Handy UI and bind it to your site

We will call the initialization method to make the HANDY object accessible. We call it HANDY, but you can give it any name you like.

const HANDY = Handy.init();

Afterwards, we call the attachUUI method, which will bind the Handy UI to the empty div we created in line 2.

HANDY.attachUUI();

Bringing it all together

Once we take our 4 lines of code and put them together, we get the following snippet:

<head>
  <script src="https://unpkg.com/@ohdoki/handy-sdk@2.1.12/dist/handy.umd.js"></script>
</head>

<div id="handy-ui"></div>

<script>
  const HANDY = Handy.init();
  HANDY.attachUUI();
</script>

By copying the above code into your website, you will get the following element to appear:

This is a real instance of the Handy UI. You can interact with it and even connect your Handy to it.

Handy UI settings are stored in your browser’s local storage and persist between different instances of the Handy UI. For example, if you’ve connected your Handy to the Handy UI on this page, you will automatically connect to the Handy UI instance on HandyFeeling.

Next Steps

With the Handy UI on our page, we can begin to leverage the rest of the Handy SDK to issue commands to our Handy using a custom interface. Read the Creating Custom Interfaces tutorial for a brief overview.