Tour Dates Widget Documentation

The Tour Dates Widget an easy way for artists to display concert listings within their website, blog, etc.

Installation Instructions

To install the widget on your site add:

  • a <script> tag containing the widget javascript source
  • an <a> tag defining options for display (artist name, background color, etc.).

<script src="https://widget.bandsintown.com/main.min.js"></script>
<a class="bit-widget-initializer" data-artist-name="Tame Impala" data-display-past-dates="true" data-background-color="#FFF"></a>

You can copy the above code and customize "data" properties in the <a> tag as you like.

Given the above example, suppose that you wanted to omit past dates and change the text color to blue. You can edit the data-display-past-dates property and add a data-text-color property like so:

<script src="https://widget.bandsintown.com/main.min.js"></script>
<a class="bit-widget-initializer" data-artist-name="Tame Impala" data-display-past-dates="false" data-background-color="#FFF" data-text-color="blue"></a>

Widget Options

You may specify as many of the following options as you wish:

Name Default Format Required Notes
data-artist-name - Artist name Yes The name of the artist for which to show events.
data-text-color #000000 Html color code
(hex or name)
No Text color for the event data.
data-link-color #000000 Html color code
(hex or name)
No Link color for the "upcoming"/"past events" links as well as the event buttons.
data-link-text-color #FFFFFF Html color code
(hex or name)
No Text color for the event buttons.
data-background-color Transparent Html color code
(hex or name)
No Background color for the widget.
data-popup-background-color #FFFFFF Html color code
(hex or name)
No Background color for event popup pages.
data-separator-color #7C7C7C Html color code
(hex or name)
No Color for the separators between events in the list.
data-font Helvetica Font name No Font for the widget.
data-widget-width 100% Width in pixels or percentage No Widget width in CSS width format i.e. "350px" or "50%". Switches to mobile friendly layout at 414px.
data-display-limit Show all Number No Number of shows to display. A "Show All Dates" link will appear below the concerts to expand the list if the limit is exceeded.
data-display-local-dates false true/false No If set to true, the browser will prompt the user for location information and show local events at the top of the event list.
data-display-past-dates true true/false No If set to true, shows past dates in addition to upcoming dates.
data-language Detects browser language Two character
language code
No If set, the widget will always display in the chosen language. English, Spanish, German, French, Japanese, Portuguese and Italian are supported via the following language codes: en, es, de, fr, ja, pt, it.
data-auto-style false true/false No If true, the widget will use the parent page's styling to "guess" at good options for its styling: any additional specified options will take precedence over auto style options.
data-div-id - DOM element id (string) No Specifies a div for the widget render inside. If not specified, the widget will be rendered in the location of the <a> tag.
data-facebook-page-id - Facebook page id (string or number) No This is used to lookup an artist by Facebook page id. If found, the artist with the matching page id will be used, otherwise the artist name will be used: The data-artist-name property is still required when using this option.
data-affil-code "js_(website
domain name)"
String No A word to identify your application, company or band.
data-app-id "js_(website
domain name)"
String No You may specify a word to identify your application, company or band.