How to Generate a Radioplayer Launcher Button

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 stylesheet 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" />

RPUID versus RPID

You will need to use your station's RPID below which is derived from the RPUID. For UK stations, the RPUID starts with 826. So if the RPUID of your station was 826999 then the RPID would be 999.

Styles

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>

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 change be changed to display a custom message.

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

Adding a Radioplayer Launcher Button Print