Add a Weather Widget

Using in a Menuboard Manager presentation

Marc Rosenberg avatar
Written by Marc Rosenberg
Updated over a week ago

You will need to add CSS, Javascript, and HTML to a presentation for your weather widget to work. Some example code is shown below.

In the Presentation Editor, go to the CSS tab and paste the following code:

left: 237px;
display: block !important;
position: absolute !important;
text-align: left !important;
width: 670px !important;
/*height: 550px !important;*/
top: 737px;

Next, go to the JS tab and paste the following code:

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src='';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');

var fields=document.getElementById('fields');
var children=fields.children;
var weatherWidget=document.getElementById('weatherwidgetIo');
var firstPress = document.getElementById("playlist").firstChild;
var observer = new MutationObserver(function(mutations, _){
for (mutation of mutations) {
if (mutation.type == 'attributes' && mutation.attributeName == 'style') {
if ( ==='visible') {'visible';
observer.observe(firstPress, {
attributes: true
function showFields() {
for(var i=0; i<=children.length; i++) {

function hideFields() {
for(var i=0; i<=children.length; i++) {
}, 2.88e+7);

Next, go to the HTML tab and paste the following code:

<a class="weatherwidget-io" id="weatherwidgetIo" href="" data-label_1="FORT WORTH" data-label_2="WEATHER" data-font="Arial Black" >FORT WORTH WEATHER</a>Modify the CSS to position and size the weather widget.

Modify weather widget position & size in CSS

Specify the correct weather locale in HTML

More settings at

Did this answer your question?