Embeddable Player
You can embed an episode into your website of choice. We have three options to embed:
- Single episode, including the feed's image.
- A slim player with no text or image.
- A full-feed player of all episodes in the feed.
All players include play/pause and speed controls.
Powerhouse users are able to set a custom color for the feed which appears in players as shown below. The magenta-ish color is the custom color of this example feed. You can read about setting a custom branding color here in our help doc.
1. A single episode, with image:
2. A slim player with no text or image:
3. A full-feed player with all episodes:
Copying the Embed Code
Head to the episode you'd like to embed and click "Share Episode". Chose between the regular or slim player. Click "Copy Embed Code" for the one you choose. (1 or 2 in the image below.)
If you'd like to use the full-feed player, head to the feed's page, click "Feed Details" then copy the embed code there.
Embedding the Player
Most website builders and course platforms allow for custom HTML codes to be added to the page. Usually, it's indicated with a "code" icon that appears like < > or </>. Click those buttons, or add a Code block and paste what you copied from Hello Audio.
This is an example from MemberVault:
And here's the FunnelGorgeous page builder:
Paste in the code and save/publish the page. Done!
Here are the above examples as published.
Centering the Player
To center the player, you can wrap the embed code with <center> </center> as follows.
Not centered:
<iframe src="https://beta.helloaudio.fm/player?episodeId=8effe8ea-2fd6-55a89dd3e55&code=WnkbRGA3Be" width="400" height="100"></iframe>
Centered:
<centered><iframe src="https://beta.helloaudio.fm/player?episodeId=8effe8ea-2fd6-55a8dd3e655&code=WnkRGA3Be" width="400" height="100"></iframe></centered>
You can copy/paste the following, then paste your embed code between the "center" parts as shown above.
<center> </center>
Revert to old version of the player
If you'd prefer the old version of our slim player, you can append &version=1
in the embed code as follows:
<iframe src="https://podcasts.helloaudio.fm/player?episodeId=5560960f-b5f3-44cb-a365-2590f9923c65&code=7taX9rRoOg&simple=true&version=1" height="35" scrolling="no" frameBorder="0" style="width: 100%; max-width: 900px; height: 35px; border: 0; overflow: hidden;"></iframe>
This will show the legacy design of the player: