I am trying to embed widgets from https://weatherwidget.io or elfsight.com, but I couldn't find a way to embed these widgets and put it in a custom card on Dashboard. Please kindly advise.
#How can I embed weather javascript widget into HA dashboard? Which custom card can I use?
reef vigil
pseudo dome
I got weatherwidget.io to work. I'm not sure if this is the best route to go but it seems do-able. I defined the widget on the website and got the code. I put it into a simple HTML file and added to my nginx webserver. In HA, I added a webpage (iframe) card and linked to the HTML and it showed up. Because the widget was clickable and linked to forecast7.com, I disabled the ability to click it with card_mod; the script looks like it relies on the link to "feed" the data. (The white border, I believe, is coming from the HTML as I did not define anything special for the styling.)
type: iframe
url: http://10.10.10.6:81/widget.html
aspect_ratio: 50%
card_mod:
style: |
ha-card {
pointer-events: none !important
}
<html><head></head><body>
<a class="weatherwidget-io" href="https://forecast7.com/en/39d99n83d00/43201/?unit=us" data-label_1="COLUMBUS" data-label_2="OHIO" data-theme="original" >COLUMBUS</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script></body></html>
However, I don't think this will update automatically unless the dashboard is refreshed, but, if I remember, I'll keep an eye on it and see what it does.