Can I display a widget from an external website in a lovelace card? (edit, corrected html code)

Configuration
1

I can display a complete web page using an iFrame card but I’d like just to show a widget from the WindGuru site. I’ve read an old thread (Html-code embedded? - #4 by _dev_null) that suggests putting the widget code in a file in the www directory & reference that in the iFrame card but I can’t get it to work - it just displays a blank card. Elsewhere it’s been suggested a markdown card might do it but it just shows the html code iteself.
Can anyone offer any guidance? This is what I’ve got so far:

type: iframe
url: /local/wgtest.html
aspect_ratio: 100%
title: WindGuru test

and in the www directory the file wgtest.html contains the widget code given by windguru for my locality:

<html>
  <body>
    <script id="wg_fwdg_47864_100_1702204094299">
    (function (window, document) {
      var loader = function () {
        var arg = ["s=47864" ,"m=100","mw=46","uid=wg_fwdg_47864_100_1702204094299" ,"wj=knots" ,"tj=c" ,"waj=m" ,"tij=m" ,"odh=0" ,"doh=24" ,"fhours=72" ,"hrsm=2" ,"vt=forecasts" ,"lng=en" ,"idbs=1" ,"p=WINDSPD,GUST,SMER,HTSGW,TMP,FLHGT,TCDC,APCP1s"];
        var script = document.createElement("script");
        var tag = document.getElementsByTagName("script")[0];
        script.src = "https://www.windguru.cz/js/widget.php?"+(arg.join("&"));
        tag.parentNode.insertBefore(script, tag);
      };
      window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
    })(window, document);
    </script>
 </body>
</html>
2

Probably against protocol but Windguru solved this for me & I thought I ought to post the solution. The hmtl file referenced in the ifram card contains this, and it works perfectly.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WG Widget</title>
<style type="text/css">
body{
width: 100%;
margin: 0px;
}
</style>
</head>
<body>
<script id="wg_fwdg_1202752_100_1702297081222">
(function (window, document) {
  var loader = function () {
    var arg = ["s=1202752" ,"m=100","uid=wg_fwdg_1202752_100_1702297081222" ,"wj=knots" ,"tj=c" ,"waj=m" ,"tij=cm" ,"odh=0" ,"doh=24" ,"fhours=60" ,"hrsm=2" ,"vt=forecasts" ,"lng=en" ,"idbs=1" ,"p=WINDSPD,GUST,SMER,TMP,TCDC,APCP1s"];
    var script = document.createElement("script");
    var tag = document.getElementsByTagName("script")[0];
    script.src = "https://www.windguru.cz/js/widget.php?"+(arg.join("&"));
    tag.parentNode.insertBefore(script, tag);
  };
  window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
})(window, document);
</script>
</body>
</html>
1 Like
3

@DJI thank you. I have used this code and set up to make my Windguru widget accessible in HA. Not all elements working but it is a beginning!