Visual Guidelines

The Handy UI is designed with a number of configuration options for a seamless visual fit into your designs.

Positioning the Handy UI

The Handy UI is flexible in where it can be placed to best fit into your content. We suggest the following two options when thinking about your integration.

Option 1: In the Header

If the design of your site allows it, we recommend positioning the Handy UI button in the header of your website. This way the user will always be able to see the status of their Handy as they navigate your content.

Universal UI

Option 2: Below Videos

If the design of your site does not allow for a Handy UI button in the header, you may find that it fits better below your video content.

Universal UI

Compact Mode

If you want to minimize the amount of space taken by the Handy UI button, you can use Compact Mode to reduce the size of the Handy UI button.

You can enable Compact Mode when constructing the Handy UI object with the following:

const HANDY = Handy.init({ UUI: { compact: true }});

Themes

The Handy UI has a default theme and a darker theme to help integrate the content into your website.

const HANDY = Handy.init({ UUI: { theme: 'dark' }});

Default Theme

This theme is the default look of the Handy UI and appears without any configuration.

Dark Theme