Thw two main methods for installation is mentioned in the README.
- Create a new folder under your resources folder (
/www
). Suggestion:custom-ui
. - Copy the custom-ui.js file to that folder.
For the official docs on this see Registering Resources
Register these resources with the Lovelace interface. This is done by navigating to the Lovelace resources page by following below link:
Note: This tab is only available when the active user's profile has "advanced mode" enabled.
- Go to Configuration -> Dashboards -> Resources
- Click "Add resource" button in the bottom right corner
- Add the path to the Url field. Usually something like
/local/www/custom-ui/custom-ui.js
- Select
JavaScript Module
- Click Create
-
Add the following to your resources.yaml (adapt to your own file structure):
- url: /local/lovelace/resources/custom-ui/custom-ui.js type: module
-
Reload the Lovelace resources. Click the top right Lovelace menu triple dots and Reload resources, or call service
lovelace.reload_resources
in/developer-tools/service/
. -
Refresh Lovelace.
Having finished the above procedure, you should check if everything went well, and the info screen reflect the newly adapted file as it should. See below:
In /config/info
:
In Inspector:
In Resources:
If you don't see the above: repeat clearing your browser cache. Eventually it will show up (unless there's an error somewhere, which you will see in inspector most likely).