New Audio Element: Rapidly Display Podcast Episodes on Your Website!

You've recorded your latest podcast episode, spent hours editing it and now finally it's online for everyone to hear... 

But how can you get a maximum of exposure on your site to your latest episode?

Adding it to a blog post is a good start (and you can do that with Thrive Architect and the new audio element) but that's just the beginning!

In this post, you'll discover 2 innovative ways to show your latest episode to as many visitors as possible, combining the new audio element with Thrive Leads.

More...

1. Display the Podcast Episode on a Ribbon Using Thrive Leads

A podcast episode displayed on a blog post on a top Ribbon

Originally, in Thrive Leads, the Ribbon and all of the other forms were designed to help you capture leads and allow your visitors to subscribe to your email list.

However, our intuitive drag & drop editor makes it very easy to transform these opt-in forms and turn them into something completely different, such as a place where you can display your latest podcast episode.

Displaying a podcast episode on a ribbon is a great way to direct the attention of your visitor towards your podcast and grow their curiosity in a cool and subtle way, with our new Audio element.

"How Can I Use the Audio Element?"​​​​

Each and every one of the Thrive Themes products that use our visual drag & drop editor will have a new Audio element that you can use. This means that you can find the element in Thrive Architect, Thrive Leads, Thrive Apprentice, Thrive Quiz Builder and Thrive Ultimatum.


The element allows you to display any type of audio files (.mp3, .wav, m4a, etc.) from platforms such as Soundcloud or Spotify, but also audio files from other platforms, using custom URLs. 


To learn more about the technical details of how the Audio element works, check out this tutorial article.

We’ll choose a ribbon template from our Thrive Leads library - The template I chose is called Fading Image.

Customizing the Ribbon for the Podcast Episode

Next, you need to make a little room for the podcast audio file on the ribbon. To do this, start by adjusting the column spacing:

Make room for the audio file by adjusting the column spacing on the ribbon

Write a tagline and a simple description that will get your visitor to click on the podcast play button on the ribbon:

Change the text to let your visitor know what the podcast episode is about

Displaying the Audio Element

Look for the “Audio” element on the sidebar editor and place it on the right side of the ribbon:

Drag and drop the Audio element on the right side of the ribbon

Then you simply have to choose the platform where you uploaded the file:

The audio sources you can use for the Audio element: Soundcloud, Spotify, as well as custom links from various platforms

If your podcast is uploaded on a different platform than Soundcloud and Spotify, choose the “Custom” option.

This will allow you to display audio files from ANY platform.

The only condition is that the link needs to point directly to the audio file. (e.g. https://websitename.com/audiofile.mp3)

Notice that .mp3 at the end of that link? You need to look for that when using custom links. Either .mp3, .m4a, .wav, or any sort of audio file.

Display the Episode on Relevant Blog Posts

In order to make the ribbon podcast even more effective, you need to display it o on the blog posts or pages of your website that are HIGHLY relevant to the topic of your podcast episode or of your podcast in general.


To do that, in Thrive Leads, you can customize the Display Settings of your ribbon, and display it wherever you see fit, on your WordPress website.

2. Display the Podcast Episode on a Thrive Leads Slide-in

The Slide-in form I used in the video to allow the visitor to listen to the podcast episode

Another way to direct the attention of your visitor towards your latest podcast episode is by using a Thrive Leads “Slide-in” opt-in form.

Customizing the Slide-in for the Podcast Episode

Firstly, you need to deal with the text and replace it with something about the podcast episode.

Then, tweak the button a bit so that it also points to the podcast episode - What I’ve done is add an icon on the right side of the button (using the sidebar “add Icon” option for the button) while also changing the text, making the “Slide-in” look like this:

How the Slide-in should look after customizing the text and the button

Setting Up the “Sticky” State

In Thrive Leads, you can also use something that we call a “Sticky Slide-in”.

This means that if your visitor closes the Slide-in, it won’t go away completely. Instead, a smaller, “stickier” version of it will remain on the screen:

The Sticky Slide-in - Even if the visitor closes it, a smaller, “stickier” version of it will remain on the screen

To customize the sticky state of the Slide-in form, in editing mode, you need to click on the “+” icon and choose “State 1”:

The default states of the Slide-in form that you need to customize in order to display the podcast episode

Are the Slide-in States Linked Between Each Other?

Yes. This means that you don’t need to worry about linking the button on the Slide-in to the Lightbox where you will place the podcast episode - It’s already linked.


But… Any additional elements that you add on these forms will need to be manually linked. 


So, the Play icon that we placed on the sticky Slide-in needs to be linked to the lightbox where we will place the podcast file.


To do that, you simply have to select the Play icon, go to Animation & Action > Custom Integrations > Lightbox State.


Now, if your visitor will click on the Play icon from the sticky Slide-in, the lightbox containing the podcast episode will open up. 

Setting Up the “Lightbox” State

Now it’s time to set up the lightbox where you’ll place the podcast audio file.

Notice how the states open instantaneously, without having to reload the page and cause unnecessary loading time that your visitors can find frustrating.

This is an aspect that we concentrated on when developing Thrive Leads, in order to keep the visitor invested and not lose their patience when seeing what they clicked on is taking way too much time to load.

Getting back to the Lightbox state...

Add the Audio element in the lightbox first, and you can worry about design later.

Let's choose the Soundcloud option - This is much easier to set up than the Custom option I’ve shown you before. 

To display the podcast audio file, access the Soundcloud page of that episode and copy the URL of the page that shows up in your browser field:

Just copy the Soundcloud URL from the search field of your browser

Paste it in the URL field in the Thrive Leads sidebar for the Audio element:

Paste the Soundcloud link in the URL link for the Audio element

To wrap things up, here’s what you need to do on the lightbox:

  • Remove the rest of the remaining elements
  • Replace the heading with something related to your podcast
  • Set the bottom margin for the heading to “0”.
  • Decrease the width of the audio file
  • Select the bottom right corner of the audio file and make it round, in order to match the design of the lightbox.

After making these changes, your lightbox should look like this:

This is how the lightbox where the podcast audio file is placed should look like in the end

There is something else you could also add on the lightbox…

Shane did a video on how to create beautifully designed “Subscribe” buttons for your podcast, built entirely with Thrive Architect!

Check it out and display your own “Subscribe” buttons on the podcast lightbox! 

Also, with the "Content Block" element from our editor, you can display pre-made podcast buttons that you can use straight away, without having to build them from scratch!

Select the "Podcast" Category from the Content Block element and display your favorite podcast elements

Your Turn!

Do you have any ideas on how you would display podcast episodes on your website? And not just podcast episodes, maybe other kinds of audio files, too!

Leave a comment below and let’s have a chat!

Author: David Gavrilut

David is a video content creator and writer at Thrive Themes. When not at his working desk, he enjoys driving like an enthusiast, visiting the beautiful cities of Transylvania for the 100th time. Either that or he could end up watching an entire season of Friends in one day.

  • Michael D says:

    David, thanks again!

    I was excited when you typed “check out our latest podcast.”

    I actually need the latest one to show up in a ribbon, but I get that you would have to actually update this manually with each new episode.

    Do you know if there is a way for a ribbon to actually display a latest episode automatically?

    • Jean-Christoph v says:

      Michael,

      this little plugin generates a redirect to the latest podcast episode: https://wordpress.org/plugins/eth-redirect-to-latest-post/

      So the ribbon could e.g. contain a button with yoursite.com/latest and you are done

    • Jeff B says:

      I agree. I am a podcaster myself and I suspect most podcasters would find that this is far too manual a process. We all have RSS feeds with the title, author, description, etc., so the idea of having to re-type and re-design a slide in every week (twice a week for me) is too manual for the benefit here. Integration with the RSS feed would be necessary, I think, for most podcasters to find this useful.

      David, I see Thrive doesn’t have a podcast so I would be happy to show you some behind the scenes of how podcasters publish, which might be helpful if you’re thinking about this audience.

      • The Smart Podcast Player includes the features we have been talking about. It would be really advantageous if Thrive Architect could include them as well. This way, we would have all the same benefits with one less plugin to deal with.

        You can check it out in the following link, in case you are interested https://smartpodcastplayer.com/

        Thank you,

        Luis.

      • David Gavrilut says:

        Hey, guys!

        It’s true that it would be nice to have a feature that would automatically update the Ribbon with the latest episode, but that takes some serious development work and testing and I don’t think that will happen soon.

        However…

        I personally think it’s a perfectly valid option to update it manually:

        You only need to update the link of the episode with the latest one, change one line of text, and that’s it. You could literally do this in 5 minutes. Seriously, the visual editor makes it really easy to do this. You could put this on your “podcast publishing checklist”.

        And, we do have a podcast – the ActiveGrowth Podcast, hosted by Shane Melaugh and Hanne Vervaek.

  • Kevin says:

    Great feature. It would be really great if you could add a Soundcloud playlist, which you could place on your webpage.

    • David Gavrilut says:

      Hey, Kevin!

      Great news: YOU CAN!

      I personally don’t use Soundcloud that often and didn’t show this in the video, but I tested this now and it works perfectly. Just make sure you copy the correct link for the playlist (e.g. https://soundcloud.com/playlist/sets/met-gala)

  • Juan Z says:

    I am thinking of using audio on my page about me to give a personal and emotional touch to the visitor.

    • David Gavrilut says:

      That’s an interesting approach, Juan! Maybe you could even crank it up a notch and use a video of yourself on the About Me page, that could have an even greater impact :)

  • Jason M says:

    Any way to use an MP3 hosted on Dropbox?

    • David Gavrilut says:

      Pretty much any link, no matter where it’s hosted, should work as long as it has an audio extension at the end (mp3, m4a, wav, etc)

  • Robin R says:

    Great feature. I’d like to know how to best list a large library of audio files so that users can easily navigate between recent posts and look up older ones.

  • Can you use a Libsyn url to link the audio file to the player?

    • David Gavrilut says:

      Hey, Robert. For the moment, only if you use the “Custom” option and paste in a .mp3 style link from Libsyn

  • Philip R says:

    Any chance to see a playlist feature (with categories if possible)? I’m desperately waiting for something like this. Your audio element is a great starting point though.

    There’s one plugin called HTML5 audio player which is great in terms of usability but it just looks awful. You would do it better, I’m sure ;-)

    • David Gavrilut says:

      You can use Soundcloud playlists with the Audio element. Not sure about Spotify, because stuff gets a bit complicated there, the platform itself has some limitations if you’re not logged in, etc.

    • Andy says:

      Hey Philip, I thought I was alone out here trying to dial in my audio needs. Do you have a host for your audio or is it held on WordPress? I would also love to find a really good player that looks great. Perhaps I just haven’t searched enough. I am trying Cincopa but haven’t settle on it yet. I can’t seem to get it to load to my site, but my next session with my tech guy – I hope to clear it that up.

  • Love this new feature. Thank you! As someone else already mentioned, it would be great if it could connect to the podcast RSS feed so it would automatically update with each new episode.

    Also wondering how effective using the slide-in will prove to be. I’m pretty sure I watched a Thrive video that pretty much said don’t use them. Will be interesting to test.

    Thanks for the video instructions and the feature!

    • David Gavrilut says:

      For the moment, I don’t know if the development team have the resources to work on such integrations. As I mentioned in another comment, it’s really really easy to add the podcast manually.

      And yes, the best way to find out how effective it is, is to test it against the ribbon or another Thrive Leads form :)

  • Kat Sturtz says:

    This is neat. I’d love a way to add a custom shortcode for accessing podcasts (and my videos using video content) from plugins I already use on my websites.

    • David Gavrilut says:

      Unfortunately, for the moment you can only use the standard features of the Audio element and add your latest podcasts manually on the form.

  • Andy says:

    David,
    Great video, thanks.
    I am a musician and want to provide specific songs on a page. But they need to be secure – no direct downloading by the person who comes to the page. The track should be secure until they enter an email address to receive the the free or paid version of the song (delivered maybe by SendOwl). Using your audio player and inserting my audio file shows the 3 dots on the right side allows for download. Can we get rid of this function? Free downloads without a lead gen – not good. However, I would love to use your audio function. It would be great to spruce up the player a tad. No bells and whistles – just a player with some style maybe.

    • David Gavrilut says:

      I replied to your other comment, Andy :)

  • Andy says:

    David – you really do make great videos and I as a newbie really appreciate the basics and details. Thanks so much!

    • David Gavrilut says:

      That’s great, Andy! Thanks a lot for the comment!

      • Andy says:

        David, I am a musician and want to display my tunes on my page and posts – but – I don’t use Soundcloud because there are too many options on the player for the listener to click away from my page and end up on SoundCloud.
        Spotify is even worse in that they only play a “sample” and 5 seconds into the play, a pop-up appears on the player to go to Spotify to listen to the whole tune. Again not good if our goal is to keep people on our website.
        Thirdly, your default player has a 3 dot option on the right side of the player that when clicked the option is to download the track. This is tremendously not good. Yes, I do want to give some of our tracks away – but only as a lead gen or within a membership. A straight-up download option from your player is a big issue. That function should be removed from your player. There should never be an option to download an audio track totally free and unencumbered. Also the player is really plain. I would love to see a more classy kind of metallic looking player. It should be noticeable and stylish but not gaudy and sticking out. Maybe player skin options??? I know that might be a bit to much to ask for.
        My page/site is still in the building stage (with a tech (Thrive Themes friendly) helper) and dialing in the right audio player and audio hosting is an issue I am struggling to resolve. I would love to hear from your membership about their audio hosting and player preferences.
        Thanks,

      • David Gavrilut says:

        I was just about to answer your other comment about this :)

        So, if I understand this correctly, you basically want to create an entire platform, where people can come to listen to music, and if they want to download it they should leave their email address.

        The changes you suggested we make to our player are pretty complicated, especially making it 100% secure, and I’m not sure the development team can work on this at the moment.

        What you could do with the current player is display a sample of your song, and then in order to get the full song, people would need to drop in their email address. And you could create a cool “Call-to-Action” around this, etc.

        For me, this would make sense, especially if the song it’s free, the sample would be a great way to make me curious about the whole song.

      • Andy Duinker says:

        Thanks David – great idea!

  • Mark says:

    Great post. Two thoughts:

    1) A “Subscibe To The Podcast” button would make a great call to action.

    2) It would be great if you also supported Lybsin as standard.

    • Mark Burke says:

      I agree with Mark. I have all my episodes hosted with Lybsyn.

    • David Gavrilut says:

      Thanks for the comment, Mark. Will take it into consideration.

  • Thomas says:

    This is amazing, thank you guys!
    So.. I can get rid of the “smart passive podcast player” plugin that cost me 90$ per year now?

    That would be awesome!

    • David Gavrilut says:

      Thanks for the comment, Thomas!

      I’d love to say yes to that, but I don’t know what that particular plugin can do that our audio element can’t (since we have just added it in Thrive Architect).

      I say test them both out and see if that plugin is still worth the money :)

      • Thomas Bröker says:

        It doesn’t have the same functionality.. some other guys wrote up in the comments about it.

        But.. it would be AWESOME if the Thrive Team would add functions to the audio element over time.

        Guess there are a lot of podcasters out there who would absolutely love it.

  • Hello, David.

    Thank you so much for this new feature, there´s a ton of ways to use it for audience engagement and content marketing.

    I watched your tutorial, but I do have some questions:

    1- Is there an option to automatically publish as a ribbon or slider the latest episode of my podcast on the home page, for instance?

    With this option, I would basically set it one time and “forget” about it. The latest Podcast episode would always be displayed.

    2- Is there an option to add a particular podcast episode within a blog post content, not just as a ribbon or slider?

    3- Since you were using Thrive Leads for the examples, is there a way to display the latest episode (as described by question 1) or any other episode and also have the ability to add an opt-in form to it?

    This way, after a certain amount of time of listening to the episode, an opt-in form could be displayed, converting the podcast episode into a lead magnet as well.

    I´m sure there are many other ways of using this new feature, but for right now these are the ones that come to my mind.

    Thank you in advance for your response.

    Luis.

    • Andy says:

      Luis, great questions. Thanks for bring these up. I look forward to seeing Davids reply. Cheers!

    • David Gavrilut says:

      Thanks a lot for the comment, Luis!

      1. Unfortunately not. For the moment, my solution would be to manually update the ribbon with the latest podcast episode by changing the URL and maybe one or two lines of text on the ribbon – Easy peasy. To not forget about it, I would make a checklist, whenever I’m publishing a new episode I would NEED to update the ribbon as well.

      2. Absolutely. You can display the Audio element wherever you want on your website – Whether that is a blog post, a landing page, a Thrive Leads form, a Quiz Builder quiz, you name. It can go anywhere.

      3. It depends, you can go in a couple of different ways here.

      >> You could display your podcast episode on a page (whether that is a blog post or any other kind of page), and then you can set up an opt-in lightbox in Thrive Leads and make it show up on the page after X amount of time.

      >> A different solution would be to display the podcast episode itself on a lightbox (like I showed in the Slide-in example), and then below the podcast episode you can also display a Call-to-Action button or a Lead Generation form and they could drop in their email address.

  • Marc V says:

    Very nice. But my ribbon doesn’t show on the post I choose. I already have a ribbon with my navigation menu on my blog. Is this the reason why I don’t see the ribbon with my podcast episode?

    • David Gavrilut says:

      Hello, Marc.

      It should work, I tested this thoroughly in the video. Maybe you could send this to our support guys? They would gladly have a look on your site and help you out :)

  • coachingbysasha says:

    Love this – will I be able to use zoom meeting recordings?

    • David Gavrilut says:

      Only if you can get a hold of a .mp3 link of the recording and use the “Custom” option of the Audio element.

  • Stephane says:

    I didn’t find how to have an RSS audio feed into a specific page.
    The one I have mix my videos and my podcasts :(
    So into my Homepage it’s RSS YouTube feed and into my Podcast page, I add each time manually the new Soundcloud Podcast.
    Do you know how to manage that ? Thank You David.

    • David Gavrilut says:

      I personally don’t have any experience with RSS feeds and for the moment the development team doesn’t have the resources to invest in an RSS integration for the audio element.

  • David says:

    I am so happy to get this post. This is a nice post. I read your post. This is great,Thanks for published this post.

  • tableau says:

    It was really a nice post and I was really impressed by reading this keep updating
    Nice work

  • molly says:

    I have a request. Would it be possible to offer an audio element that allows velocity control, rewind and fast forward options?

    • Hanne says:

      Hi Molly,
      TBH that’s not something we’re planning on doing.

      • molly says:

        I understand. Something really weird is that when you use the player on an iPad it automatically shows 15-second rewind and fast forward buttons.

        https://www.dropbox.com/s/w527mz2i02orskb/ffrwipad.jpeg?dl=0

        Also, I really appreciate the new audio element and sticky behavior feature. It has allowed me to do this:

        https://gph.is/g/ZrBXXzl

        Which makes my audio Spanish lessons so much better! Thank you!

      • Hanne says:

        Nice! Great to see you’re using the sticky feature!

  • Lee Whistler says:

    Does this integrate with Blubrry?

    • Hanne says:

      I don’t believe it does.

  • >