Appearance
Widget
Player Widget
To integrate the embedded widget which shows information of your radio station on any webpage, you'll have to include an iframe in the page. The iframe features a responsive design to work in most height and width configurations, but requires a minimum height of 38 pixels. It can be configured to show multiple different elements and can be customized to fit the style of your website.
It all starts with including the widget:
html
<iframe src="https://app.theradiohub.com/widget/[station-id]" frameborder="0" width="500" height="100"></iframe>Example widget for Radio Haugaland: Player + epg, light theme:
Example widget for Radio Haugaland: Player + nowplaying, transparent background:
Options can be configured by adding GET-parameters to the url. ex. .../widget/[station-id]?epg=1&theme=light
| Parameter | Description |
|---|---|
| (default) | When no epg or nowplaying parameters are added to the url, the default widget will show. This consists of the audio player and shows the title and dj of the current playing show from the epg-information. |
| epg=1 (optional) | When epg=1 is added to the url, next to the audio player, show-title and show-dj, the show-image will show on the left hand side of the widget. This cannot be used simultaneously with the nowplaying=1 parameter. |
| nowplaying=1 (optional) | When nowplaying=1 is added to the url, instead of the show-title and show-dj the title and artist of the currently playing song will show next to the audio player. On the left side of the widget, the coverart will show. This cannot be used simultaneously with the epg=1 parameter. |
| noplayer=1 (optional) | When you want to display two or more widgets on a page, for example to show epg- and nowplaying-information, you can disable the audioplayer in one of them by adding the noplayer=1 parameter. |
| bg (optional) - transparent - HEX-value (without #) | By default, the widget's background gets its color from the settings in the manage panel, to match with the web-version of The Radio Hub. But this background color can be customized to match the surroundings of the widget. The bg-value can be "transparent" or any hex color value, without the "#"-sign. When you make use of the transparent value, remember to add "allowtransparency" to the iframe code, right after the height parameter. |
| theme (optional) - dark (default) - light | To make sure text is readable on the chosen background color, it is possible to adapt the text-color in the widget. By default, the text is dark, but it can be set to light by adding theme=light as a parameter. |
| height (html-parameter) 38 minimum 275 switches view | The widget-iframe should be at least 38 pixels high. When the height exceeds 275 pixels, the nowplaying- or epg-image will be placed on top of the audio player and show information. The widget scales automatically in realtime. |
More examples:
Player only, light theme:
Player + epg, light theme:
Player + nowplaying, red bg:
Player + epg, light theme:
Player + nowplaying, transparent bg:
Player + nowplaying, transparent bg:
Small, Player only, light theme:
Small, Player + epg, light theme:
Small, Player + nowplaying, red bg: