Widgets are pre-built SpinetiX components that connect digital signage screens to live data feeds — weather forecasts, news headlines, KPI dashboards, social media, exchange rates, prayer times, flight boards. SpinetiX includes 250+ widget-constructors in Elementi. Each widget fetches data from an external source, formats it using a template, and renders it on screen in real time. No coding required for standard feeds.
When to Use This Guide
- Lobby displays — weather, clock, news ticker, welcome messages
- Production dashboards — live KPIs, OEE metrics, shift targets, safety counters
- Retail — social media walls, customer review feeds, promotion countdowns
- Corporate communications — internal news, employee spotlights, event calendars
How Widgets Work
The Widget-Constructor Model
A widget-constructor is a template with configurable parameters. Open it in Elementi, enter your data source URL, set the refresh interval, adjust colors and fonts — done. The widget-constructor handles all parsing, formatting, and error handling. Available categories:
- Clock & Date — analog, digital, world clocks, multi-timezone
- Weather — current conditions, 5-day forecast, severe alerts
- News — RSS/Atom readers, scrolling tickers, headline cards
- Social Media — Twitter/X feeds, Instagram walls, hashtag monitors
- Calendar — Google Calendar, Outlook/Office 365, iCal
- Data Tables — spreadsheets, JSON tables, CSV listings
- Gauges & KPIs — progress bars, speedometers, counters
- Currency & Exchange — live exchange rates from financial APIs
Step 1: Choose a Widget-Constructor
In Elementi, browse the widget library by category. Select a constructor that matches your use case. For weather: choose the weather widget. For KPIs: choose the gauge or counter widget. Each constructor has a preview showing the default rendering.
Step 2: Configure the Data Source
Enter the data source URL in the widget properties. For a weather widget: enter your city and API key. For a spreadsheet: enter the Google Sheets published URL. For a REST API: enter the endpoint. Set the refresh interval (how often the widget polls for new data).
Step 3: Customize Appearance
Adjust the widget to match your brand: fonts, colors, backgrounds, sizes. Most widget-constructors expose 20–30 visual parameters. Want a dark theme? Change the background to black and text to white. Want Arabic script? Switch the font and text direction.
Step 4: Position in Your Layout
Drag the widget to its zone in your multi-zone layout. Resize to fit. The widget auto-scales its content to the available space. Stack multiple widgets in a playlist to rotate between data feeds — weather for 10 seconds, then news for 15 seconds.
Popular Widget Use Cases
| Widget Type | Data Source | Typical Refresh | Use Case |
|---|---|---|---|
| Weather | OpenWeatherMap API | 15 minutes | Lobby, outdoor kiosk |
| News Ticker | RSS/Atom feed | 5 minutes | Reception, break room |
| Calendar | Google Calendar / O365 | 2 minutes | Meeting rooms, events |
| KPI Dashboard | REST API / Google Sheets | 30 seconds | Production floor, call center |
| Prayer Times | Local calculation / API | Daily | Mosque, hotel, office lobby |
| Exchange Rates | Financial API | 1 minute | Bank branches, trading floors |
| Social Wall | Twitter/X, Instagram | 2 minutes | Retail, events, campuses |
Common Mistakes
- Using free API plans for production. Free weather/news APIs have rate limits (60 calls/hour). 100 players polling every 5 minutes = 1,200 calls/hour. Use a paid plan or proxy through HUB to aggregate queries.
- Hardcoding API keys in widget URLs. Anyone with physical access to the player can extract the key. Use SpinetiX HUB as a secure proxy — credentials stay on the server.
- Over-polling data sources. Weather doesn't change every 5 seconds. Set refresh intervals that match actual data change frequency. Over-polling wastes bandwidth and risks rate limiting.
- Not testing with missing data. APIs go down. What does your widget show when the weather API returns an error? Design fallback states — last-known data or a "data unavailable" message.
- Using full-screen widgets. A full-screen weather widget wastes prime screen real estate. Use multi-zone layouts — weather in a small corner, main content in the hero zone.