Launcher buttons

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.

Integrating

Integration works in a similar way to the player, but with simpler configuration. First you need to link the script 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" />

You can then integrate the button in your page by inserting the following element wherever you need to place the button:

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

Styles

This will give a default button that loads the player for the station with the given rpId.

default button

The default button style has square corners, but there are two other styles that you can use:

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

rounded button

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

rounded button

You can also generate a smaller variant by passing a size property:

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

small button

You can change the colour of the button from the default Radioplayer Red by setting the theme and customColour properties:

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

light button

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

dark button

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

custom button

Logos

You can include the station logo in the button by setting showLogo to true:

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

logo button

The logo is set in Radioplayer Cloud, and is the same one displayed in the player. If you change the logo in the station settings, the buttons will automatically update with the correct logo. The image is cropped and resized to 100 x 45 pixels to fit large buttons, or 100 x 40 pixels to fit small buttons. You can override the default station logo by passing in an overrideLogo property:

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

logo button

Text

The default text is "Listen Now", but this can be changed by passing in the labelText property:

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

custom text button

Console URL and size

The URL of the launched console is retrieved from the Radioplayer API, but it is a good idea to provide a fallback to be used in case the API is unreachable for any reason. This is passed in the fallbackUrl property.

By default the opened console is 960 pixels wide, but you can change this by passing in a consoleWidth property:

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

Localisation

You should check whether you are required to pass in a mapi property in your territory, to set the API endpoint.

Radioplayer Integration Guide