Designing the Row® | Squarespace Website Design & Tutorials

View Original

How to Integrate Bandsintown into Your Squarespace Site: A Step-by-Step Guide

About this Squarespace Video Tutorial

Hey everyone, welcome back to the blog! I’m Katherine Forbes, founder of Designing the Row and a Squarespace Expert and Authorized Trainer, specializing in creating websites for musicians.

Today, we’re diving into how to integrate Bandsintown into your Squarespace site. We’ll explore both the Bandsintown block method and the widget embed, using my client Jaimee Harris as an example. Let’s get started!

Bandsintown is a powerful platform that connects musicians with their fans. It helps artists manage their tour dates, promote upcoming shows, and engage with their audience. By integrating Bandsintown into your website, you make it easy for fans to find your concert information in one place.

Timestamps

0:00 Intro
0:28 What is Bandsintown?
0:39 Reasons why you would want to use Bandsintown on your website
1:25 Getting started with the Bandsintown manager
2:00 Jaimee Harris Introduction
2:22 Squarespace block method
4:11 Bandsintown widget embed
7:27 Email marketing bonus tip
7:48 Bandsintown History
8:02 Outro


Want 20% off your new Squarespace subscription?

Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.

See this content in the original post

Why use Bandsintown?

Here are a few reasons why you might want to have Bandsintown on your website:

  • Drive Ticket Sales: Direct fans to ticket purchase links and easily note if shows are free or sold out.

  • Professional Appearance: Integrating Bandsintown helps keep your website looking polished and up-to-date.

  • Stay Connected with Fans: Fans can see your upcoming shows and opt in to receive notifications about shows near them.

Setting Up Bandsintown

Before we dive into the integration process, I want to mention that this post assumes you already have your Bandsintown account set up. If you don’t yet, no worries! Just head over to manager.bandsintown.com and sign up as an artist.

You’ll need to link your Bandsintown account to your Facebook music page. This is helpful because it allows your upcoming show dates to display not only on your website but also on your Facebook page.

Adding the Bandsintown Block

Now, let’s get into the practical side of things. First up, we have the Bandsintown block method. This is super easy and adds your upcoming dates immediately with your website branding.

Introducing Jaimee Harris

Before we dive into the tutorial, I want to introduce you to my amazing client, Jaimee Harris. Jaimee is a talented musician known for her soulful sound and heartfelt lyrics. She has graciously agreed to let me use her website and Bandsintown account for this demonstration, so you can see exactly how to integrate these tools effectively.

Step-by-Step Process

Once you’re in the editor on the page where you want to add your tour dates, just click on 'Add Block' and search for 'Bandsintown.' After adding the block, you’ll need to type in your name exactly as it appears on the Facebook page you've connected to your Bandsintown account. This ensures that your tour dates display correctly.

You might need to adjust the spacing of the section once your dates load, but otherwise—it’s as easy as that!

You can customize it to show either 'Upcoming Dates' or set a specific 'Date Range.' Just a quick note: if you choose the date range option, it won’t automatically update to remove shows once the days pass. So, make sure to keep an eye on it; you don’t want to display old dates when there are new and upcoming ones!

I typically use the “date range” feature if I want to display upcoming dates on a client’s homepage but want to filter the view during a heavy touring season. This method requires monitoring and frequent updating of the date range to keep it current. When I worked in artist management, I was constantly updating artists’ websites, so it was manageable then.

The Squarespace block option is also designed to be mobile-friendly, but there’s definitely room for improvement on that front. You might need to adjust the spacing at the bottom of the section like you did on the desktop view. Just be mindful of how it looks on different devices—this applies to Bandsintown and all other content on your website!

Using the Bandsintown Widget Embed

Next, let’s look at the Bandsintown widget embed. This method does take a little customization, especially with colors and fonts, but in my opinion, the layout works better on mobile and features larger buttons, enhancing user experience.

Getting Started with the Widget

To get started, log in to your Bandsintown manager, go to the 'Widgets' section, customize the styling, and grab your embed code. Then, head back to your Squarespace site.

I already styled Jaimee’s widget a couple of years ago when she released her Boomerang album, but I’ll show you all of the options here really quickly.

  • General: Customize colors and fonts.

  • Events: Select the info you want to display for each date and style the button text.

  • Date Format: Choose how to display the dates.

  • Tickets: Customize the look of the Tickets button and the Sold Out button.

  • Remind Me: Show or hide the Remind Me button next to the Tickets button.

  • Follow: Decide if you want the Follow button up top and how it should look.

  • Request a Show: Include this option and customize its appearance.

  • Opt-in Form: I recommend keeping this checked to maintain your styling.

  • Miscellaneous: Language, the number of dates to show, and when the layout switches to the mobile display. I typically keep the default setting at 900.

After customizing, click the "Copy Code" button and return to Squarespace.

Adding the Widget Code

To add this widget code to your site, enter edit mode on your preferred page, click to add a block, and select the code block option. Paste the embed code right into the code block.

With this method, you get 'Upcoming,' 'Past,' and 'Near Me' tabs, which can be really helpful for fans. Many artists love displaying past shows as a marketing tactic to showcase their experience to promoters while also providing essential info to fans.


Comparing Views

Now, let’s look at the mobile view. As you can see, the buttons are larger, and the text stacks in a cleaner way.

Here’s a view to compare the Squarespace Bandsintown block design with the Bandsintown widget code embed. Which one do you prefer? Let me know in the comments!


Bonus Tip: Email Marketing Integration

Here’s a bonus for the embed option: you can use this embed code in your email marketing too! Just drop it into the code section of your emails on platforms like Mailchimp, and you’re good to go! No more typing out and individually linking tour dates in your emails!

Speaking from experience, I used to manually link dates before Bandsintown became popular. Fun fact: Bandsintown was founded in 2006 and officially launched in 2007. I think I started using it for clients around 2014. So, Bandsintown is almost 20 years old!


Conclusion

So there you have it! Two methods to integrate Bandsintown into your Squarespace site. Whether you choose the block method for a quick way to add your dates or the widget embed for its mobile-friendly layout and email marketing integration capability, Bandsintown allows you to keep your fans informed about your upcoming shows effortlessly.

If you found this tutorial helpful, please give it a thumbs up and subscribe for more Squarespace tutorials. If you have any questions or want to share your own experiences with Bandsintown, drop a comment below. While the platform is not perfect, it is my go-to tool when working with musicians to get tour dates on Squarespace websites.

As always, thanks for reading, and I’ll see you in the next post!


The Latest Designing the Row Tutorials…

See this gallery in the original post