Widgets are available to Business subscribers.
Adding Widgets to a Presentation
Widgets let you add live, dynamic content — like a clock or news ticker — directly to your presentation. All widgets are found in the Widgets tab of the Presentation Editor.
Clock Widget
The Clock widget displays the current time on your sign.
Open the presentation you want to add the widget to.
Go to the Widgets tab.
Locate the Clock widget and click its toggle to turn it on.
Click and drag the corners of the widget to set the desired width and height.
Use the Top and Left parameters to position the widget on the slide.
News Widget
The News widget displays a live feed of current headlines on your sign.
Open the presentation you want to add the widget to.
Go to the Widgets tab.
Locate the News widget and click its toggle to turn it on.
Click the widget to select it, then adjust the Width and Height in the toolbar to resize it.
Use the Top and Left parameters to position the widget on the canvas.
Weather Widget
The Weather widget displays live weather data using weatherwidget.io. Unlike the Clock and News widgets, it requires adding CSS, JavaScript, and HTML directly in the Presentation Editor.
Add CSS
Go to the CSS tab and paste the following, adjusting position and size as needed:
.weatherwidget-io { left: 237px; display: block !important; position: absolute !important; text-align: left !important; width: 670px !important; top: 737px;}
Add JavaScript
Go to the JS tab and paste the following:
!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');var fields=document.getElementById('fields');var children=fields.children;hideFields();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 (firstPress.style.visibility ==='visible') { weatherWidget.style.visibility='visible'; hideFields(); } else { weatherWidget.style.visibility='hidden'; showFields(); } } }});observer.observe(firstPress, { attributes: true });function showFields() { for(var i=0; i<=children.length; i++) { if(children[i]) children[i].classList.remove("hide-prices"); }}function hideFields() { for(var i=0; i<=children.length; i++) { if(children[i]) children[i].classList.add("hide-prices"); }}setTimeout(function(){ window.location.reload(); }, 2.88e+7);
Add HTML
Go to the HTML tab and paste the following, updating the href, labels, and link text to match your location:
<a class="weatherwidget-io" id="weatherwidgetIo" href="https://forecast7.com/en/32d76n97d33/fort-worth/?unit=us" data-label_1="FORT WORTH" data-label_2="WEATHER" data-font="Arial Black">FORT WORTH WEATHER</a>
Additional widget configuration options are available at weatherwidget.io.