Embed Player: Listen to Your Podcast on Your Website
What if a visitor to your site could easily listen to the elevator pitch? Or perhaps hear the freshest customer case study or feature announcement?
Using our customizable embed player, it takes just 30 seconds to add your new podcast to your existing website. The player auto-updates with your latest episodes, can be customized to match your brand's colors, and is response on both mobile and desktop devices.
How to Get Started
It takes just a few minutes to get it all set up! And don't worry if the code looks scary – getting set up is super simple.
- Go to Your Podcast: Navigate to your podcast on Jellypod.
- Click the "Embeddable Player": Locate and click on the "Embeddable Player" button. It looks like a gray website icon.
- Select a theme and copy the code: There will be some html code in a text box you'll need to copy to add your player into your website.
- Embed on Your Site: Paste the copied iframe code into your website's HTML.
By default, the player shows the most recent episode published on your podcast. As you publish more episodes, your player will automatically update.
If you have any trouble embedding your new podcast player in your website, please reach out! We are happy to guide you through the process end to end.
Displaying a Specific Episode
If you'd like to show a specific episode, then simply add "?episode=<episodeid>" to the end of the URL inside of the iframe code. For example, if the embed code looks like https://my-podcast.jellypod.ai/embed you'd change it to, https://my-podcast.jellypod.ai/embed?episode=<episode_id>, replacing <episode_id> with your episode's unique id.
The episode's ID is a long string that can be found as the last part in the url when playing your episode from your podcast website. It will look something like this: 22cf4e5b-0baa-4b74-a8b2-ae61566082b3.
Customizing the Theme
We provide 8 default themes that can be selected when copying your embed player code. These themes can be used to style your embed player to match your website's colors.
If you want more flexibility in the specific colors, you can provide hex colors (e.g. #efaefa) in the query parameters in the embed code. The four colors you can specify are:
- primary_color
- secondary_color
- tertiary_color
- background_color
You should specify a color for all four values for best results. If one of the above color values is not provided, we will fall back to the default.
Here is an example:
https://ai-podcast-mastery.jellypod.ai/embed?theme=dark&primary_color=FF6B9D&secondary_color=00D4FF&tertiary_color=FFE66D&background_color=1A1A2E
Don't have an existing site for your podcast? No worries! A unique podcast website is automatically created for you for free on Jellypod, which you can customize with a custom domain.
