Need Help pulling my hair out

I am new to this and have spent hours looking ways to resolve this, i am trying to add a html weather widget to habpanel, i have tried yahoo binding and its to basic, weather underground if finishing there free services at the end of this year so no point wasting time there. i like the look and feel of the Openweathermap service but i just can get it to work at all. on there site i can see they provide code to add there widget on a web page. is there a way this can be added to habpanel.

Code provided is as follows

thanks in advance for any help offer i am a complete novice to all of this type of stuff

The code…???

Code Please

your code goes here
<div id="openweathermap-widget-11"></div>
<script src='//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/d3.min.js'></script><script>window.myWidgetParam ? window.myWidgetParam : window.myWidgetParam = [];  window.myWidgetParam.push({id: 11,cityid: '2643743',appid: 'c77c2a0951939dffa822f427f21e63b9',units: 'metric',containerid: 'openweathermap-widget-11',  });  (function() {var script = document.createElement('script');script.async = true;script.charset = "utf-8";script.src = "//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(script, s);  })();</script