HTML anchors in Lovelace?

Anyway to replicate how HTML anchors work in Lovelace? I want to have shortcut buttons that scroll me to different parts of a page (ex. click on the living room button and it scrolls you to the switches and lights for your living room).

2 Likes

I have the same issue.

It is possible to “abuse” the label to add html code.
You can add <a href="#example"></a> to the label.
Or you can add <section id="example"></section>
Or you can add <div id="example"></div>

And they will show up nicely in the HTML generated by lovelace.
But; addressing them from the address bar by adding #example to the end of you link will not work.
Probably because the labeltext is generated later than the original page or something.

I would also appreciate a solution for this.
To keep the amount of pages down, I have one page for all my “device remote controls”. It would be very handy to be able to jump to the right one based on the link I use.

1 Like

+1 been trying to figure out a way to do this.

I know this is an old thread, but it raises a very valid question. I think it’s bigger than just anchors.

It would be great to be able to have clickable links of any kind on a Lovelace card.

For example, the weather card could link to the web site of the weather provider for a more detailed forecast, radar, etc. Another example might be clicking on the current state of tide or phase of the moon to bring you to a more detailed tide table or astronomical data site.

As we integrate more IoT things, we end up with devices in HA which also have more in-depth vendor web interfaces. For example, my Honeywell thermostat integration works great in HA, but sometimes I need to go to the Honeywell site for more advanced functions that wouldn’t make sense to add to the HA Climate integration. I should be able to just click on that from the Lovelace Climate card.

You can definitely already make cards with hyperlinks to any site you want. Is this what you mean?

Yes, exactly. I happened to run across this just yesterday playing with a picture card. I’d never noticed it before. Possibly because picture is one of only a handful of cards which support Actions.

Wouldn’t it be great if all cards had this option? Like the examples in my previous post?

1 Like