How to Add the HotFM Radio Widget in 3 Steps

How to Add the HotFM Radio Widget in 3 StepsEmbedding a radio widget on your website is one of the fastest ways to bring live streaming audio, brand personality, and audience engagement to your pages. This guide shows you, step-by-step, how to add the HotFM radio widget to any website in just three clear steps: choose the widget type and settings, generate the embed code, and place the code on your site. Along the way you’ll learn practical tips for responsive design, autoplay considerations, and basic troubleshooting.

Why add a radio widget?

Adding a radio widget benefits site owners, bloggers, and businesses by:

• Increasing time-on-page and returning visitors through live content.
• Providing easy access to your station without needing a separate app.
• Enhancing cross-promotion between your website and HotFM’s live programming.

What you’ll need before starting

• Access to your website’s HTML editor or CMS (WordPress, Wix, Squarespace, etc.).
• A HotFM account or access to the HotFM widget generator (if required).
• Basic familiarity with copying and pasting code snippets.

Step 1 — Choose widget type and customize settings

Most radio widget providers (including HotFM) offer a few common types of widgets:

• Compact player: small controls with play/pause and volume.
• Full player: larger UI, track info, and maybe schedule or chat.
• Floating/miniplayer: stays visible while users scroll.

Decide which fits your page layout and audience. Then customize these typical settings:

• Size (width/height) — match your site’s content area or make it responsive.
• Theme/skin — light or dark to match your design.
• Autoplay — note many browsers block autoplay with sound; consider muted autoplay or user-initiated play.
• Start-up volume and default state (playing vs paused).
• Show/hide metadata (song title, DJ name) and social links.

Example choices:

• Blog sidebar = Compact player (300×100 or responsive).
• Homepage hero = Full player (100% width, 300–400px height).
• Mobile = Floating miniplayer.

Step 2 — Generate or obtain the embed code

HotFM typically provides an embed code (HTML iframe or script) from its widget builder. If you have access to the HotFM dashboard or widget page, do the following:

1. Open HotFM’s widget/embedded player section.
2. Select the widget type and apply your custom settings.
3. Click “Generate Embed Code” or “Get Code”.
4. Copy the code to your clipboard.

Common embed formats:

• iframe example:

  
  <iframe src="https://hotfm.example.com/widget?station=hotfm&theme=dark"     width="100%" height="120" frameborder="0" scrolling="no"></iframe> 

• JavaScript embed example:

  
  <script src="https://hotfm.example.com/widgets/player.js"></script> <div class="hotfm-player" data-station="hotfm" data-theme="dark" data-autoplay="false"></div> 

If you don’t see a widget generator, contact HotFM support or check their developer/docs page for player URLs and parameters. Some stations also offer direct stream URLs (HTTP stream) which can be used with third-party players like MediaElement.js or HTML5 audio.

Step 3 — Place the code on your website and test

Where to paste the code depends on your platform:

• WordPress (Classic Editor): Paste the code in the Text/HTML view of the post or widget area (Appearance → Widgets → Custom HTML).
• WordPress (Block Editor/Gutenberg): Add a Custom HTML block and paste the embed code.
• Wix: Use the Embed > HTML iframe element and paste the iframe or code.
• Squarespace: Use the Code Block or Embed Block.
• Raw HTML site: Paste the code where you want the player to appear within your page markup.

After pasting:

1. Save and publish the page.
2. Test playback on desktop and mobile.
3. Check responsiveness: resize the browser or view on different devices.
4. Confirm controls (play/pause/volume) work and metadata updates correctly.

Troubleshooting tips:

• If nothing plays, verify the src or stream URL is correct and publicly accessible.
• If blocked in browsers, try removing autoplay or using user initiation to start playback.
• If layout breaks, wrap the iframe in a responsive container:

<style> .player-wrap { position: relative; width: 100%; padding-top: 40px; } .player-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style> <div class="player-wrap">   <iframe src="https://hotfm.example.com/widget?station=hotfm" height="120"></iframe> </div> 

Additional tips and best practices

• Accessibility: Ensure keyboard focus and ARIA labels are available if using a custom player. Provide a visible label like “HotFM live stream” and include skip links where relevant.
• Legal/compliance: Confirm you have rights to rebroadcast HotFM content on your site and comply with licensing.
• Analytics: Track interactions by firing an event when the player is played (Google Analytics, GA4 events).
• Mobile data: Inform users that streaming consumes mobile data or provide a lower-bitrate option.
• SEO: The widget’s content won’t replace textual SEO content; include a textual summary or schedule for crawlers.

Example: Quick checklist

• Chosen widget type and theme — done
• Copied embed code from HotFM — done
• Pasted into site and verified display — done
• Tested playback on multiple devices — done
• Confirmed licenses and analytics — done

Embedding HotFM’s radio widget is a quick win for adding live audio to your site. With the three steps above — pick and customize, grab the code, and add + test — you’ll have live radio playing on your pages in minutes.