Song History Widget
The Triton Song History Widget allows publishers to easily list current and past songs from their station.
Features
- Customization - choose colors (background, buttons, and text) that match your brand and site
- Flexible UI - Variable width and height to fit in any page or sidebar
- Choose number of songs - Specify the number of tracks in your history
- Monetize your widget - Enter your iTunes affiliate ID to make commissions on purchased songs
Prerequisite
Before adding the player element to your pages, you’ll need to add the following code snippet (JavaScript) to the bottom of your page or site template.
<script src="//widgets.listenlive.co/1.0/tdwidgets.min.js"></script>
Script Tag Attributes
Parameter | Description | Default | Required |
---|---|---|---|
td-lang | Language. Supported values : en (English), es (Spanish), pt (Portuguese), fr (French) | en | none |
The Song History Widget has its own element <td-songhistory></td-songhistory>
and can be included anywhere on your page.
Use the attributes below to configure and customize your widget to suit your needs.
Configuration
When embedding the TD Song History Widget on your site, keep in mind that it is designed to fit within the dimensions of the the element <div>
where it's embedded. The Song History has its own element <td-songhistory></td-songhistory>
and can be included anywhere on your page or site template.
Use the attributes below to configure and customize your widget to suit your needs.
Attributes
Parameter | Type | Description | Required |
---|---|---|---|
id | String | Element ID for internal reference. | yes |
station | String | Radio station | yes |
playerlink | String | Link to a player widget (see Player widget integration) | no |
thirdpartylookup | String | Allows third party lookups e.g. iTunes. Default to true | no |
itunesaffiliateid | String | Your iTunes Affiliate ID | no |
itunescountry | String | The two-letter country code for the store you want to search. | no |
songsdisplayed | Number | Number of tracks you want in the song history | no |
title | String | Widget Top left title | no |
buybtntext | String | Text on the buy button | no |
primarycolor | String | hex value, e.g.: #FFFFFF | no |
highlightcolor | String | hex value, e.g.: #FFFFFF | no |
headerbgcolor | String | hex value, e.g.: #FFFFFF | no |
secondarycolor | String | hex value, e.g.: #FFFFFF | no |
buybtnvisible | Bool | Should the buy button be displayed | no |
coverartvisible | Bool | Should the buy cover art be displayed | no |
timeplayedvisible | Bool | Should the time that the track played be displayed | no |
alllowexplicitcoverart | Bool | Allow the player widget to display explicit cover art. Default false | no |
Callbacks
Listing of events dispatched by the Player Widget to which you can assign a callback.
Event name | Description | Data |
---|---|---|
onappready | Widget application ready | widget object instance |
ontrack | new track is playing | track object |
Player widget integration
When there's a player widget on the same page as a song history widget, you may want them to link the stations between each other. Add a playerlink attribute to the song history widget. The playerlink allows any station changes in the player to notify the song history widget. The playerlink is an ID to the player widget you want to link.
Click here for a live example.
Callback example
<td-songhistory
id="td-songhistory"
station="TRITONRADIOMUSIC"
songsdisplayed="10"
itunesaffiliateid="1234"
title= "Recently played"
buybtntext= "Buy"
highlightcolor="#999999"
primarycolor="#aaaaaa"
headerbgcolor= "#ccc"
secondarycolor="#f5f5f5"
onappready="appReady"
>
</td-songhistory>
<script>
var widgetSongHistory;
//onappready callback function
function appReady( widgetObjectInstance ){
widgetSongHistory = widgetObjectInstance;
}
</script>
Examples
Basic Integration
Click here for a live example.
<!doctype html>
<html>
<head>
<title>Song History</title>
</head>
<body >
<td-songhistory
id="td-songhistory"
station="TRITONRADIOMUSIC"
songsdisplayed="10"
thirdpartylookup="True"
itunesaffiliateid="1234"
title= "Recently played"
buybtntext= "Buy"
highlightcolor="#999999"
primarycolor="#aaaaaa"
headerbgcolor= "#ccc"
secondarycolor="#f5f5f5"
>
</td-songhistory>
<script src="//widgets.listenlive.co/1.0/tdwidgets.min.js"></script>
</body>
</html>