Step 5: Linking to Radioplayer


When you've heard from us that you're live on the platform - congratulations! There's one final thing Radioplayer requires all stations to do.

By joining Radioplayer, you have become part of a family of over 500 stations. We'd like you to participate in the community and the most important way is to link to your web console from your homepage. We believe it's so important, we ask all stations to do this, as part of our community rules.

Radioplayer launcher buttons allow you to easily add buttons to your site that launch the web player in the correct sized window, and ensure that the player URL is always correct. The buttons can be easily customised to match your branding, and can automatically load station logos.


Your web player should open at 960 pixels wide by 700 pixels high.


Integrating the launcher button


First, you need to link the player scripts and style sheet in the <head> of your page:


<script
    type="module"
    src="https://assets.player.radio/latest/buttons.js"
></script>
<script
    nomodule
    defer
    src="https://assets.player.radio/latest/buttons.legacy.js"
></script>
<link rel="stylesheet" href="https://assets.player.radio/latest/buttons.css" />

Styles


Make sure you replace the RPID with your station's own RPID. Your station's RPID is the RPUID, which begins 826 for UK stations, minus the UK country code (826) which you will see in my.radioplayer.org. In the following example, the RPUID is 8261 and therefore the RPID to be used below is 1.



You can select which style of button you want to display by adjusting the shape, size and theme.


<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1"
        }
    </script>
</div>

<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1",
            "shape": "ROUNDED"
        }
    </script>
</div>



<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1",
            "shape": "ROUNDED",
            "size": "SMALL"
        }
    </script>
</div>

<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1",
            "shape": "ROUNDED",
            "size": "SMALL"
        }
    </script>
</div>


<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1",
            "theme": "LIGHT"
        }
    </script>
</div>


<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1",
            "theme": "DARK"
        }
    </script>
</div>



<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1",
            "theme": "DARK",
            "customColour": "#832E82"
        }
    </script>
</div>


Logos


You can include your station logo in the button as well. The logo you have set in the station list manager is the logo that will be displayed in the player and the button. The button will automatically update with the correct logo if you change your logo in the station settings.


<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1",
            "theme": "LIGHT",
            "showLogo": true
        }
    </script>
</div>

And you can also choose to override the default station logo and add a custom image to the button. 



<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1",
            "shape": "ROUNDED",
            "theme": "DARK",
            "showLogo": true,
            "overrideLogo": "//placekitten.com/100/45"
        }
    </script>
</div>

Text


The default text is "Listen Now", but this can be changed to display a custom message.



<div data-radioplayer-button>
    <script type="application/json">
        {
            "rpId": "1",
            "labelText": "Listen Live"
        }
    </script>
</div>

Have your web developer paste the selected code into the navigation of your site or somewhere prominent elsewhere on the homepage.


Other resources

Radioplayer isn't just available in smartphone apps and on the web. We also have a presence in cars, on the Kindle Fire, and on some other home hardware devices. It can sometimes take a few weeks to appear in all our locations but availability on the web and in mobile apps is always the priority. To ensure your station is available as widely as possible, we recommend ensuring that your station profile is up-to-date and as complete as you can make it.


If you're using Myriad, you can now link it to Radioplayer and have it push live real-time Now Playing information to us. Aiir has a similar capability.


Do you have podcasts, catch-up or other listen-again content? So long as you've got the rights to distribute it, you can put it on Radioplayer. We need a podcast-compatible RSS feed and that's it. Find out more here.