Hides the header and/or sidebar drawer in Home Assistant
If you previously used custom-header you need to uninstall it from HACS
Follow only one of two installation methods below, HACS or Manually:
Installation and tracking with HACS
- In the "Frontend" section of HACS hit the plus icon in the bottom right
- Search for
Kiosk Mode
and install it - If using YAML mode or if HACS doesn't automatically add it you'll need to add the resource below
YAML mode users will add it to their configuration.yaml file.
Non-YAML mode, or Storage Mode, users can find resources in their sidebar under "Configuration" > "Lovelace Dashboards" > "Resources"
resources:
- url: /hacsfiles/kiosk-mode/kiosk-mode.js
type: module
Manual installation
- Download kiosk-mode.js from the latest release and place it in your
www
folder - Add the resource below
YAML mode users add it to their configuration.yaml file.
Non-YAML mode, or Storage Mode, users can find resources in their sidebar under "Configuration" > "Lovelace Dashboards" > "Resources"
resources:
# You'll need to update the version number at the end of the url after every update.
- url: /local/kiosk-mode.js?v=1.2.1
type: module
If you have trouble installing please read this guide
- Config is placed in the root of your Lovelace config:
kiosk_mode:
should not be indented & is per dashboard. - If you want the same settings on other dashboards you'll need to repeat the config on those dashboards as well.
The following config method will be ignored if any query strings/cache are used or a conditional config has a match.
kiosk_mode:
has 4 options:kiosk
,hide_header
,hide_sidebar
, andignore_entity_settings
.- Set any config option to true to activate.
kiosk: true
setshide_header
andhide_sidebar
to true, no need to set either when it's used.ignore_entity_settings
is useful only in conditional configs and will causeentity_settings
to be ignored.
kiosk_mode:
hide_header: true
views:
Note: views:
is added in the example above to show where kiosk_mode:
should be placed in your Lovelace config
Contitional configs take priority and if a condition matches all other config options/methods are ignored.
These use the same options as above, but placed under one of the following user/entity conditions:
Sets the config for every admin user.
Overwritten by user_settings & entity_settings ( unless ignore_entity_settings
is used ).
kiosk_mode:
admin_settings:
hide_header: true
Sets the config for every regular user.
Overwritten by user_settings & entity_settings ( unless ignore_entity_settings
is used ).
kiosk_mode:
non_admin_settings:
hide_header: true
ignore_entity_settings: true
Sets the config for specific users. This uses a user's name, not their username (if they're different).
Overwritten by entity_settings if ignore_entity_settings
is not used.
kiosk_mode:
user_settings:
- users:
- "ryan meek"
- "maykar"
hide_sidebar: true
- users:
- "the wife"
kiosk: true
ignore_entity_settings: true
Dynamically change config on any entity's state. Under entity:
list the entity followed by the state that will enable the config below. For more complex logic use this with a template sensor.
Takes priority over all other config settings unless they use ignore_entity_settings
.
kiosk_mode:
entity_settings:
- entity:
input_boolean.hide_sidebar: 'on'
hide_sidebar: true
- entity:
sensor.hide_header: 'on'
hide_header: true
- entity:
input_text.kiosk: 'true'
kiosk: true
Add a query string such as ?kiosk
to the end of your URL:
https://hass:8123/lovelace/default_view?kiosk
The query string options are:
?kiosk
to hide both header and sidebar?hide_header
to hide only the header?hide_sidebar
to hide only the sidebar
You save settings in a devices cache by using the cache keyword once on the device.
This will also make it so the options work on all views and dashboards.
Example: ?hide_header&cache
makes all views & dashboards hide the header.
This works for all query strings except for the utility strings listed below.
Utility Query Strings
?clear_km_cache
will clear all cached preferences?disable_km
will temporarily disable any modifications
- Fully Kiosk Browser - Great for wall mounted tablets
- Applicationize - Convert web apps into desktop apps
- KTibow/fullscreen-card - Make your Home Assistant browser fullscreen
This was originally based on and inspired by ciotlosm's kiosk mode gist and corrafig's fork of the same gist.
Big thank you to matt8707 for starting this project, allowing me to rewrite it, and transfering ownership.
Many thanks to KTibow as well, for the github release action and support.