Skip to main content

Customize your Widget

Customize colors, fonts, content and more

Updated over 2 weeks ago

The Widget can be set to automatically match your website’s color scheme or customized manually to adjust colors, fonts, content and more without any coding.

Click the arrow under the Widget tool in the Tools section of the Bandsintown for Artists Dashboard.

Advanced customizations

Customize which events are displayed

You can control which events are displayed on your Bandsintown Widget, providing more flexibility and precision in managing event visibility.

For example, you can choose to display certain dates through the Widget on one website, and a different set of dates through the Widget on a different site.

To specify which events are displayed, add a new data attribute in the Widget setup code.

The format for this attribute is as follows.

data-events-to-display="106010505,106010509"

The unique strings of numbers in the new parameter correspond to unique event IDs. Any event IDs included in this attribute will determine which events are shown on the Widget. Any events not listed will be hidden.

The parameter data-events-to-display= could be added anywhere inside the widget script, but we recommend adding it just after the artist ID.

For example:

<script charset="utf-8" src="https://widgetv3.bandsintown.com/main.min.js"></script>  <a class="bit-widget-initializer"    data-artist-name="id_15516202" data-events-to-display="[INSERT HERE]" data-background-color="rgba(255,255,255,1)" data-separator-color="rgba(221,221,221,1)" data-text-color="rgba(66,66,66,1)" data-font="Helvetica" data-auto-style="true"

Hide specific events

Use this when you want the widget to show all events by default but exclude a few specific ones that you pick. This is helpful if new dates will be added over time and you do not want to keep updating a whitelist.

How it works

Add the data-events-to-hide attribute with a comma-separated list of event IDs. The widget will render every event except the ones you list.

data-events-to-hide="18018976,18018977"

For example: 

<script charset="utf-8" src="https://widgetv3.bandsintown.com/main.min.js"></script>  <a class="bit-widget-initializer" data-artist-name="id_15516202" data-events-to-hide="[INSERT HERE]" data-background-color="rgba(255,255,255,1)"dataseparator-color="rgba(221,221,221,1)" data-text-color="rgba(66,66,66,1)" data-font="Helvetica" data-auto-style="true"

Priority rules

  • If data-events-to-hide is set, the widget shows all events except those IDs.

  • If both data-events-to-display and data-events-to-hide are provided and non-empty, data-events-to-display takes priority. Treat them as mutually exclusive.

Replace RSVP and Tickets Buttons with VIP and Multi-Ticket Options

Replace the default RSVP and Tickets buttons with a VIP button and a multi-ticket popup.

1. Show RSVP as icon only:

This customization converts the RSVP button into a bell icon to free up space for other buttons.

Parameter:

data-event-rsvp-only-show-icon="true"

2. Prioritize Presale over VIP:

If both Presale and VIP links are provided, the widget will prioritize displaying the Presale button first. If only a VIP link is available, then the VIP button will display in place of the RSVP.

3. Configure the VIP button text:

If empty, the button text will default to "VIP." If a custom label is provided (e.g., "Exclusive VIP"), this text will display.

Parameter:

data-event-custom-ticket-text="VIP Text"

4. Modify the Tickets Button Label:

This customizes the main Tickets button to say “Tickets & VIP” and opens a multi-ticket popup for various ticket options.

Parameter: 

data-event-ticket-text="Tickets & VIP"

Convert Follow Button to Presale Signup Button

Allow fans to sign up for exclusive access to tickets by replacing the Follow button with a Presale signup button.

1. Set the Presale Signup URL

This directs the Follow button to a custom URL, like a presale signup page.

Parameter:

data-follow-section-cta-url="https://www.bandsintown.com/release?release_id=81cbbdd3-3704-4d16-a6d8-58629f68ab38"

2. Customize Follow Section Header Text

This message appears above the follow button, adding context for the presale.

Parameter: 

data-follow-section-header-text="Don't have a presale code? Signup for presale access!"

3. Update the Follow Button Label

This changes the button label to say “Get Code” instead of “Follow,” making it clear this button is for presale access.

Parameter: 

data-follow-section-cta-text="Get Code"

Customize Presale or VIP Button Placement in the Widget

You can now decide where the Presale or VIP button appears in relation to the Tickets button.

This gives you more control over how your widget looks when displayed on your website.

Steps

To choose the button placement, add this parameter to your widget code:

data-event-custom-button-position="right"

Accepted Values

  • "left" → Places the Presale/VIP button to the left of the Tickets button​

  • "right" → Places the Presale/VIP button to the right of the Tickets button

Default behavior:

If the parameter is not included or contains an invalid value, the Presale/VIP button will appear on the left of the Tickets button.

Example

<div
  data-event-custom-button-position="right"
  data-event-rsvp-only-show-icon="true">
</div>

This setup places the Presale/VIP button on the right side of the Tickets button.

Before: Presale/VIP button on the left side of Tickets

After: Presale/VIP button on the right side of Tickets

Notes

  • This setting applies only when the RSVP button is displayed as an icon (data-event-rsvp-only-show-icon="true").

  • If the value entered is not valid, the widget will automatically use the default left-side placement.

  • This update adds more flexibility for artists to customize the widget layout according to their preferences.

Show Events by Country or Continent

You can now choose to show only the events happening in certain countries or continents. This is perfect if you want to create local pages, such as one for LATAM, another for Europe, or just one for the US.

How it works

  • Add one widget for each group of events you want to display.
    ​

    • Example: one for All, one for LATAM, one for Europe, one for USA.

The Bandsintown widget script only needs to be loaded once at the top of your page:

<script charset="utf-8" src="https://widgetv3.bandsintown.com/main.min.js"></script>

  • Each widget block can use its own settings, including country or continent filters, text language, and button labels.
    ​

  • You can use simple buttons or tabs to switch between them, like in the example below.
    ​

Widget options

Option

What it does

Example

data-countries

Show events only in certain countries (use country codes like US, FR, MX)

data-countries="US,CA,MX"

data-continents

Show events only in certain continents

data-continents="NA,EU"

Tip: If you use both options, only events that match both filters will appear. If you leave them empty, all events are shown.

Supported values

For countries:

Use the standard ISO Alpha-2 codes (two-letter country codes), such as:

US (United States), CA (Canada), GB (United Kingdom), FR (France), MX (Mexico), BR (Brazil), JP (Japan).

You can find the full list of codes here.

For continents:

Use the following 2-letter codes based on MaxMind’s GeoIP schema:

Continent

Code

Africa

AF

Antarctica

AN

Asia

AS

Europe

EU

North America

NA

Oceania

OC

South America

SA

Examples

LATAM

<a class="bit-widget-initializer"
   ..."
   data-continents="SA"
   ... >
</a>

Europe

<a class="bit-widget-initializer"
   ...
   data-continents="EU"
   ... >
</a>

NA (US,CA,MX)

<a class="bit-widget-initializer"
   ...
   data-countries="US,CA,MX"
   ... >
</a>

Live Example

See it in action here: Demo: Multiple Widgets by Location

This demo includes tabs for LATAM, Europe, NA, and All each showing the same artist’s events filtered by country or continent.

Learn more about the Widget here.

Did this answer your question?