Use the widget builder below to create your free background music widget for your Squarespace website. Select a template and click “Continue with this template” to get started.
How to add Background music to Squarespace
- Choose a template: Some of the available ones are Nature Sounds, Spa Music, Chrismas Player, Volume, Halloween, and Embeddable Player. (You can customize the template later)
- Edit background audio tracks: In the Tracks section, you can upload background music you want to embed on your site. Each track can have its title, artist, and image. You can set the order of each background sound by dragging and dropping its placement on the playlist.
- Set the widget’s layout: There are two options: floating and embed. You can also set the web background music widget’s placement (Top Left and right, Bottom Left and right) and turn the close button on or off. Since you are adding background music to Squarespace, select the embed layout type.
- Player Settings: In this section, you can set the player options.
- Player Controls: Turn on or off the buttons of Prev and Next, Play, Shuffle, Loop, Volume, and Playlist on the player. Also, there are toggle options available on the background music widget creator for enabling the Save Playing Track and Progres and shuffle, repeat, and loop playlists by default.
- Autoplay: Automatically play audio background on the website.
- Playlist: Show or hide the playlist by default, track info, and set the playlist’s height.
- Message: This section lets you translate front-end messages.
- Customize Appearance: There are two color schemes available: Light and Dark. The Custom color scheme allows you to edit the background, colors, and fonts. There are even custom CSS and JavaScript fields for further customizing the look and feel of the Squarespace background music widget.
- Once you have finished designing the website background music plugin, click on the “Add to website for free” button and sign up on the following page to save your widget.
- Get the embed code for the background audio gadget and use it on your Squarespace website.
How to embed Background Audio Player in Your Squarespace Website
The embed code will include an External JavaScript file and an HTML div tag with a class attribute unique to your created Background music widget. You can display it on your Squarespace website. Here’s how:
Adding background music to the entire Squarespace website
- Log in to your Squarespace account and choose the website where you want to add the background music widget.
- Click on the Website section on the left side menu:
- Then scroll down and select the Website Tools tab:
- And choose Code Injection:
- Paste the widget installation code into the Footer field and click Save:
Adding background music to an individual page
You can easily showcase background audio widgets on your Squarespace website using the “Embed HTML” block in Website Editor. Here’s how:
- Edit the page where you want to display background music player on Squarespace.
- Add the Embed Block to your page.
- Paste the generated code into the Code Snippet section.
- Save your changes and preview the widget on your Squarespace page.
The best part is you can display your background music widget on multiple websites regardless of whether they are made on Squarespace.
How to Manage Your Background Audio Widget
Once you have created your background audio widget for Squarespace, you can easily manage it on your account. In your dashboard, search for “Background Music” app under list of apps. As you can see from the following screenshot, you can create more Background music widgets, edit existing ones, and get HTML embed code.
