How to Add a Music Player to Webflow and make the most of it

Webflow is a popular website builder among musicians, tutors, and bloggers, for it provides fantastic web audio tools and templates that require no coding. You can launch and test any hypothesis without programmers, on your own. It’s perfect for those who maintain websites and want technologies to save their time and energy.

Webflow offers tons of instruments, so that anyone could enhance their website, and audio players are among them. You can create players in a variety of ways and even build up yourself. The problem is that the latter method implies a lot of programming, which is contrary to the philosophy of zero coding. You see, when you don’t hire a professional developer but instead create a music player yourself with the help of a ready-made widget, you save both time and money!

Elfsight Audio Player for Webflow

Here, in this article, I’ll tell you about my favourite music plugin. It will work perfectly on Webflow, and will never require any programming skills, as it allows you to configure a player popup in a visual editor for free. I’m speaking about the Elfsight Audio plugin.

Elfsight is one of the most trusted worldwide brands producing cross-platform extensions for websites. Audio Player by Elfsight is a responsive plugin which allows website owners to create and maintain their player without the help of professional developers.

Here are the features I love about it the most:

  • HLS (m3u8), DASH, mp3, mp4, ogv, webm – the most popular audio formats supported
  • By entering a URL, music from the most popular platforms can be loaded. SoundCloud, YouTube, Vimeo, Vista, Amazon, and Google Drive are just some of the options.
  • All of the features of a regular player, such as autoplay, player information, player controls, and the ability to shuffle and repeat compositions
  • Pre-made templates that you may start using straight now
  • Color scheme that can be altered according to your preferences
  • Floating and embeddable layouts provide you complete creative flexibility over your music creations

You can try out even more stunning perks of the plugin in the online demo below on this page. What I love most about the plugin, it can be easily added to any website builder, including Webflow. Just follow me in the process of installation further, and you’ll get a player on your website in a few easy steps. What you need to start with is just create a plugin in Elfsight Apps. We’re now ready, let’s move on!

How to add a music player to Webflow

You can always embed a player plugin on a single page (or chosen ones), add a floating player to all pages of a website, and, finally, add it with the help of a special tool called GTM – Google Tag Manager. Let’s go through each process step by step.

How to embed a music player in a Webflow page

You can use a visual editor of your Webflow site and embed the player on a single page by simply creating a section for it. Here’s how you can do it:

  1. Create an Audio Player in Elfsight Apps
  2. Log into the Webflow admin panel
  3. Click ‘Add elements’
  4. Drag and drop the ‘Embed’ elements to the place where you need it
  5. Paste the two lines of your installation code to this block
  6. Press ‘Save and Close’
  7. See the player on the website!

Note: if you wish to add more space between the player and the rest of your website content, add 20 px margins.

How to add a player to all Webflow pages

With Webflow, you’ll have an opportunity to make a floating player appear on all pages by adding the installation code to the website template. Just follow these easy steps and get the widget in minutes.

  1. Create and customize your audio playlist online in Elfsight Apps, add music there. 
  2. Copy installation code.
  3. Log into the Webflow admin panel.
  4. Press the dots icon and select ‘Settings’ in the menu you’ll see
  5. Find ‘Custom Code’ and click on it
  6. Paste your installation code to the ‘Head Code’ field.
  7. Publish the changes by clicking ‘Save’

That’s it, and there’s no need to go into details of typesetting your audio recordings.

How to add a player to Webflow with the help of GTM

Google Tag Manager, or GTM, is a special tool allowing anyone to add plugins even if the website builder doesn’t give a possibility to add custom code.The process in short is as follows: you create an HTML tag in GTM, put this tag and a trigger on a Webflow website, and your plugin starts working. Here’s how you should do it in greater detail:

  1. In Elfsight Apps, create a player and add music compositions to it.
  2. Sign in to your Google Tag Manager account (or create one)
  3. To make a new HTML tag, choose ‘Custom HTML’.
  4. Copy and paste the first line of the installation code into the newly created tag.
  5. Add a trigger and a tag to the Webflow page where you want the player to appear.
  6. Save the tag.
  7. All the changes will go live.

After you’ve learnt how to add the plugin to your website, it’s time to have a bonus! I’ve collected 6 useful tips for you to enhance the design and functionality of your Webflow website with the help of a player.

6 useful tips and tricks for your Webflow Music Player

Unleashing your creativity and presenting music masterpieces to the world is great. I’m absolutely sure you are eager to make your website as fabulous as possible. And here’s what you can do with the online player.

  1. Attach more than one composition to playlist

Studies have shown that time spent on a website is one of the merits of good performance on the Web. If users are your biggest fans and spend a lot of time listening to your pieces of art, this is exactly the kind of thing you need! Because of it, your website will move up in the SERP and attract even more listeners. But don’t but don’t go overboard for too many compositions will frighten people and they won’t click on any of them.

  1. Decorate the player with a background image

Add any image as a decoration to your player, and it will become an integral part of your Webflow website design. It will also visually attract users’ attention to the music plugin, especially if it depicts instruments or a face of the creator.

  1. Make all website elements responsive

This also applies to the player which should perform on both mobile screens and computers of high-resolution. Music players should be functional and visually appealing on devices of different sizes. Mobile responsiveness will work great for both your users and search engines, for they support websites with good user experience.

  1. Share educational content

Answer the most popular questions, place recordings of your interviews, or just mp3 tapes of your podcasts. Any idea will work great for you and your visitors. It’s another amazing channel of communication and a way of presenting the information.

  1. Make it simple

Don’t overload your music player with abundant functionality, especially if it’s small and neat. Too many controls will scare users, and they won’t use the player the way you expect. There’s also a chance they won’t click on it at all.

6. Create a player for dark mode

You can create two modes for a Webflow website: light and dark. Black music player will be a great help in enhancing it. This online player in dark theme decreases the amount of light while keeping the minimal color contrast ratios necessary for readability. 

Got it!

After you’ve embedded the plugin on a website and customized it the way it becomes an indispensable part of design and functionality, you can enjoy your professional music player. It will engage visitors, add festivity and diversity to your template, and complement the atmosphere of your overall website. Don’t hesitate to put a player to the website, and leave all the technical hassles to Elfsight and Webflow!