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.
attachUUI method, the Handy UI will replace the empty div you created with an instance of the Handy UI, which has the uui class. So any styling you wish to apply to the Handy UI will need to be applied to the uui class.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.