Website Widgets powered by TagStation

Follow

TagStation Widgets make it easy to display station automation events on your website.

Available Widgets

Now Playing

The Now Playing widget displays your station’s most current automation event. 

On-Air Now

The On-Air Now widget displays the most current event from your Schedule.

Recently Played

The Recently Played widget displays the last 25 events in date/time descending order.

 

Creating a Widget

1. Log-in to admin.tagstation.com

2. Go to Account >> Widgets

3. Select the type of widget you’d like to create

4. Customize the widget by completing the provided form — all fields are optional!

5. When you’re done, click the “Create widget” button to generate the code you’ll need for your website

6. Copy the code and paste it into your website

 

Example Embed Code

<div class="tsnr-widget tsnr-nowplaying" data-channelkey="45HX77GO15OV" data-title="Now Playing" data-viewmode="nowplaying" data-livedata="0" data-enablesharing="1" data-enableimages="1" data-devmode="0" data-img_fallback="//d8ltdsem2q1tz.cloudfront.net/ci.ashx?TGID=1BCABEF2-1C03-11E3-A78C-120147EB1905" data-msg_shareurl="Read more" data-widgetid="bc1b8471-9dfe-432f-8236-2c836900b7c5" data-scep="d8ltdsem2q1tz.cloudfront.net" data-cep="static.tagstation.com" data-apiep="api-partner.tagstation.com"></div>
<script type="text/javascript">! function (d, s, id) { var js, sec = /^https:/.test(d.location), p = sec ? 'https' : 'http', surl = sec ? '//d8ltdsem2q1tz.cloudfront.net/content/js/widgets.nowplaying.min.js' : '//static.tagstation.com/content/js/widgets.nowplaying.min.js'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.type = 'text/javascript'; js.async = true; js.src = p + ':' + surl; document.body.appendChild(js); } }(document, 'script', 'tsnr-wjs');</script>

If you’re already including our widgets.nowplaying.min.js JavaScript in your page to show other NextRadio widgets, you don’t need to include the JavaScript portion again; it updates automatically to support new features.1

 

Customization Options

To tailor the look and feel of a widget to match the style of your website, we offer a set of theme customization features:

  • Background color: Set by adding a data-color_bg="#fff" attribute
  • Border color: Set by adding a data-color_border="#ddd" attribute
  • Text color: Set by adding a data-color_text="#444" attribute
  • Link color: Set by adding a data-color_link="#39f" attribute
  • Height: Set by adding a data-widgetheight="400" attribute (units are pixels; relevant only to Now Playing widget)

 

Important Note Regarding Album Images

TagStation's contract with Gracenote does not allow the display of album images on websites. The widgets powered by TagStation will not display album images sourced from Gracenote, but will display images authored in the TagStation environment, including customized images, schedule images and campaign images. For songs, the default station logo will display in place of Gracenote album images.

Footnote

  1. Including this JavaScript multiple times will not harm your page; the script will only run once. If you are dynamically inserting multiple widgets, ensure this JavaScript is placed or called after all html for widgets has been inserted in DOM. Otherwise, you may need to re-call tsnr.widgets.nowPlaying_initOne(element) or tsnr.widgets.nowPlaying_initAll()
Have more questions? Submit a request

Comments

Powered by Zendesk