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.
1. Display the Podcast Episode on a Ribbon Using Thrive Leads
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.
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:
Write a tagline and a simple description that will get your visitor to click on the podcast play button on the ribbon:
Displaying the Audio Element
Look for the “Audio” element on the sidebar editor and place it on the right side of the ribbon:
Then you simply have to choose the platform where you uploaded the file:
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
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:
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:
To customize the sticky state of the Slide-in form, in editing mode, you need to click on the “+” icon and choose “State 1”:
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:
Paste it in the URL field in the Thrive Leads sidebar 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:
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!
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!