How to add Player widget to Webflow website

Online Audio Player widget is among the leading ways to get your audience intrigued by your site and its content. Applying a music player with an exceptional playlist will guarantee value to your content and will transform it into a more enticing for your audience. In the event that you’ve chosen to upgrade your Webflow website with an audio option, you are welcome to use this guide provided below to get it done. And now let’s proceed and see what is a player plugin, learn which way you can add it to your Webflow website and what problems may occur when you decide to do it. 

What is Player widget 

Elfsight Online Audio Player is a simple feature for websites enabling visitors and site owners to have various audio tracks on any page of the Webflow website. The tool has a wide variety of options, for example, you are not limited when it comes to the total music files to attach to the widget, there are tons of audio formats for you – from mp3 to DASH. There’s also a possibility to make a playlist with mp3 and other tracks in line with your needs. 

Here are the most peculiar features of the audio widget for you to see: 

  • There’s a possibility to make your own color theme for the online audio player. 
  • An autoplay feature is there for you to assist you with switching on that your Webflow site users could start listening to your playlist the moment they open your page. 
  • A background image could be added to your audio feature to match it with your website’s style. 
  • Music tracks can be added by URL or straight from your device. 
  • If you don’t have time or really can’t create a player widget that will be a good fit for your website in terms of style, you are always welcome to apply one of professionally built templates. 

On this page you will observe all the music widget’s details closely, if you need it. And now we can move on to dragging to light what positives and negatives a player plugin can bring to your site. 

Player widget on Webflow: positives and negatives

Certainly, when you start thinking about adding the Audio Player to your Webflow website, you cannot avoid some important points. An Online audio widget can bring both positive and negative qualities to your website, so we advise you to acquaint yourself with the information below before embedding music feature to some of your pages. 

Take a look at these benefits you can get the taste of from an audio player on your Webflow site: 

  • Music tool sets the atmosphere on your website. In case you’re an owner of a lifestyle blog, sports site or an online portfolio, a music widget can become an exceptional enhancement to it. 
  • Audio player widget can grow the engagement of your audience. The exact same way as the music in the games used to serve as an attractive interaction for the gamers and stood in as yet one way to captivate them, the well-built playlist can do the same for your Webflow website. 
  • A cool playlist can assist you deliver your idea more clearly. You are welcome to make the online music player a means of delivering not only music, but for instance podcast episodes that have something in common with the topic your website is dedicated to. 
  • You can make money off your music. Whether a player widget gives some marketing options, you can even make use of it to profit off your music and any other audio file. All that needs to be done here is to add the player on the pages of your Webflow website to start making money off your music. 

However, notwithstanding all the positive aspects, the audio music player on your website can still be perceived skeptically by your audience for many reasons. Let’s dive deeper into why you should be careful with adding any audio file on your Webflow site pages: 

  • Wrong applying of the online music player widget can be irritating. Generally users visit sites while listening to music with headphones on. Therefore, the music playing right when they open your website can upset users and they will leave instantly. 
  • Not all browsers support media content. Therefore, your well thought-out music playlist may simply not be seen by part of the audience, and your brilliant idea of adding music to the site will fall flat. 
  • Some sites just don’t need an audio player. You may consider that the background music and any other audio file on your site will enlarge it impeccably, but your users may have really different opinions on this topic. Accordingly, apply this option very carefully. 

Now that you understand all the pros and cons that the audio music player plugin can bring to your site, you can make an informed decision about adding it. Remember that regardless of the ubiquitous dominance of music streaming services, the audio widget on your Webflow site is still not for everyone. But if you still want to implement it, let’s proceed to the installation guidelines. 

Adding the Music Player to Webflow website

You have multiple ways to integrate the Music Player to your Webflow website. One of the easiest is to make use of an online audio widget – it’s simple and will only take a few easy steps.

  1. There’s no need to write the code for creating your Audio Player. 
  2. A huge number of readymade templates will offer you exceptional ideas for your audio widget and any audio file. 
  3. You’ll have a possibility to create the music player yourself, without a need to hire an experienced programmer and being anxious about the widget’s correct work. 
  4. The music widget can be assessed immediately in an online demo. 

And now it’s time to find out how you can embed the Audio Player widget on your Webflow website. 

Use the Music widget

And here are the steps you need to follow if you want to add the Audio Player app through the use of Webflow admin panel: 

  1. First thing you’ll need to acquire if you want to add the music widget with mp3 and other audio files to your Webflow website – the tool’s installation code.
  2. To do it, log in to your Elfsight account cnd click on the name of the music widget you need to install on the Applications tab.
  3. Select Add to website option next to the name of the widget with mp3 tracks you need to embed to your Shopify website. A popup window will be seen where you’ll get the installation code of your Online Audio widget.
  4. Then log in to your Webflow account and select the website where you’d like to add your music widget to.
  5. Click on the Plus icon, then drag and drop the Embed element from the left-hand menu to the place where you’d like the mp3 music widget to be demonstrated.
  6. Paste your installation code into the HTML Embed Code Editor window that appears next and click Save & Close.
  7. Adjust needed settings in the right-hand menu, then click Publish and press Publish to Selected Domains.
  8. Done! The widget has been successfully added to your Webflow website.

In case you want your online music widget to appear on all pages of your Webflow website, check out the guidelines below:

  1. Log in to your Webflow website and go to the settings of the needed website.
  2. Click the Custom Code section, paste the widget’s installation code you’ve copied before to Head Code and click Save Changes.
  3. Click Publish and then press the button Publish to Selected Domains.
  4. The widget has been successfully added to all pages of your Webflow website!

Sometimes, the option to add HTML code to the site might be missing. On this occasion, you are welcome to apply the Google Tag Manager if you want the Music widget to appear on the pages of your Webflow website. 

How to add Online Player to website with GTM

There are quite a few CMS or website builders that prohibit adding custom HTML in order to install some widgets. But if you are not self-certain of your coding skills, Google has created a tool referred to as Google Tag Manager or GTM that can help you to add the Music Player to your website without a lot of effort. All you need to do to start demonstrating the Audio Player on your website is to make a tag for your site and add dynamic content. 

These are the steps you need to follow in case you want to integrate Audio Player to your website through the use of GTM: 

  1. Log in or sign up to your Google Tag Manager account. 
  2. Create a new tag, select ‘Custom HTML’. 
  3. Put the first line of the Online music widget’s installation code to the created tag. 
  4. Add a trigger and the tag to your Webflow website. 
  5. Save your tag and publish the changes. 
  6. Done! The Online Player will soon be available to your website’s audience. 

That’s it! Now you know how to apply GTM in order to get your website empowered with an Audio Player. 


No doubt, your online audio player will look awesome on your Facebook Page website. Applying all the offered options granted by the wonderful Elfsight team, you’ll manage to create a player that will complement your website through the spectacle of style and features. But you shouldn’t avoid some additional actions you need to take if you want the new opportunity on your Facebook Page website to get spotted. 

Supposing you are an owner of a social media account, as relatively every company these days does, you should definitely update your subscribers about the new options on your site. This can be a small announcement or series of posts – it’s up to you to decide how you will promote your website’s new enhancement. It’s a very meaningful step as it helps you gently inform your audience about quite a disputable feature that may not be admired by everyone. 

Eventually, what you definitely don’t have to make a big deal about is that the new audio widget is performing properly. Choosing a widget by Elfsight, you may rest assured that it will work correctly on any device type – from smartphone to tablet and will definitely not affect the work of your website in any way. So shape your new widget and don’t forget to share it on social media!