SoundStack provides a few embeddable players meticulously crafted to seamlessly integrate into your existing website or blog.
With a simple implementation process and user-friendly interface, you can effortlessly share your podcast episodes and shows with your audience. Whether you're a seasoned podcaster or just starting your audio journey, our players offer a hassle-free solution that amplifies your reach and enhances the overall listening experience.
In this article, we are going to cover:
- How to access the Show player
- How to access the Episode players
- How do I embed my Podcaster player to my website?
How to access the Show player
Access the Content menu from the left side of Podcaster. Then, select a specific show and navigate to the Share tab:
Adjust the widget settings according to your liking as indicated in the highlighted sections of the screenshot provided. You can choose from two preset themes, and you have the option to personalize them further with different colors for text and backgrounds (1). The widget will automatically update and provide you with a preview of how it will look on your web page. You can configure different themes (2) and save them as presets for later use. Lastly, you can limit your widget to display a certain number of episodes (3). Once all the changes are made, press the Save Configuration button.
After configuring the widget, you can click the Player URL to access it in your web browser. You can also use the Copy to clipboard button to embed the IFrame Embed Source Code into your website, which will be covered in further detail at the end of this article.
How to access the Episode players
Access the Content menu from the left side of Podcaster. Then, select a specific show, navigate to the Episodes tab, and click on Edit episode on the episode you would like to work with.
Next, click on the Share tab, and on the right side of the screen you will find the Quick Links panel.
1) The direct audio mp3 link to the episode so you can hear it with your favorite web browser
2) The Player URL functionality enhances the sharing experience of your podcast by providing a user-friendly player interface. This interface simplifies the process of distributing your episode's audio, enabling downloads, incorporating detailed episode descriptions, and adding social media links, all presented in a modern UI design for your audience. Moreover, new features include the ability to skip forward or backward by 10-second intervals and an option for listeners to subscribe to the podcast.
3) Using Horizontal Player Embed, you can integrate the player directly into your website, featuring a sleek horizontal player that has the ability to fast forward or backward in 10-second increments.
By clicking on Looking for the legacy player? (5) and adding the code to your website, will display a legacy, basic viewer perspective of the player.
4) The final website player option we provide is the Vertical Player Embed. This player also has the ability to fast forward or backward in 10-second increments.
How do I embed my Podcaster player to my website?
Embedding is the process of adding the Podcaster player widget to your website, making it readily available to your website visitors. On most website-building platforms, placing this widget on your site can be as simple as copying and pasting the codes that we provide.
The iframe embed code is the most universally compatible embed code that can be used on any kind of web page or web application that supports HTML. SoundStack provides iframe embeddable codes that are readily available within the Podcaster Dashboard under the Share tab.
The following steps will guide you through the process of embedding your Podcast widget into a WordPress website. We picked WordPress for the tutorial as it is currently one of the most utilized Content Management Systems (CMS). If you are using a different website builder or you are directly editing your website's code, the process will be similar.
1) You can copy the codes from various places. For shows, access the Share tab and copy the IFrame Embed Source Code. For episodes, you have the option to copy the Horizontal Player Embed, Legacy Horizontal Player Embed, or Vertical Player Embed.
2) Next, in your website editor (we are using WordPress in this example), you need to access your site and log in to the Administrator control panel. This can usually be done by adding /wp-admin at the end of your site URL.
3) Once in the Administrator control panel of WordPress, navigate to Pages then click on the page where you wish to add the widget to.
4) The WordPress page editor will open up. Click the "+" button from the top left corner in order to add a new block. Select Custom HTML as a block type.
5) Paste (CTRL+V or right-click then "Paste") the code inside the freshly created Custom HTML block. Once pasted, you may choose to preview the result or directly publish the page from the top right corner of the editor.
Depending on the <iframe> code used, your Podcaster widget should now display on your website.
This concludes our introductory guide on using Podcaster players, and we eagerly anticipate seeing how you apply this to enhance your listeners' experiences.