Tour Dates Widget Documentation

The JS Widget is intended to be used by artists to easily display concert listings within their website, blog, etc. The widget shows the full list of upcoming concerts for an artist and also highlights local event dates for users visiting the website.

To use the widget, you will need to insert a script and anchor tag into your html. The script tag source contains the javascript for the widget while the anchor tag defines the options for displaying it(artist name, background color, etc.). The script tag must be placed before the anchor tag and they are in the following format:

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

You can copy the above code and replace all the "data" properties with the options for the widget. The widget can be customized however you like and a full listing of the options can be found below the example.

For example, if you wanted your widget to omit past dates and change the background color to blue, you could change the "data-background-color" and the "data-display-past-dates" option in the above code like so:

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

You can specify as many of the following options as you wish

Widget Options

name default value 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 set the text color for the event data
data-link-color #000000 html color code (hex or name) no sets the 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 sets the 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 transparent 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 the name of the font for the widget
data-widget-width 100% width in pixels or percentage no ex: "350px" or "50%". pixel width < 275px will always display concerts in narrow/3-column format.
data-display-limit show all number no number of shows to display. if the artist has more concerts than the limit, a 'Show All Dates' link will appear below the concerts to expand the list.
data-display-local-dates false true/false no if set to true, the browser will prompt the user for location information and place events local to them at the top of the event list
data-display-past-dates true true/false no if set to true, the user will have the option of looking at past events as well as upcoming events
data-auto-style false true/false no if true, the widget will use the parent page's styling to 'guess' good options for its styling: any additional specified options will take precedence over auto style options
data-div-id - DOM element id (string) no this allows you to specify a div for the widget's content to appear in when it is rendered. if not given, the widget will be rendered in-place as the page loads
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" param is still required when using this option.