Prerequisites
Make sure you site contains the Audiorista Javascript code at the bottom of the <body> tag on all your pages. The code can be found in your Project's _Settings_ and looks something like this:
<script id="audiorista-sdk" src="https://storage.googleapis.com/strillo-staging/media/project/sdk/{UNIQUE_ID}.js"></script>
While in the Settings, make sure that the position of your Persistent player is set to "Docked" or "Floating bottom".
Example
Open the link below to get an idea of what we will be creating. The example page uses an extremely simple Bootstrap layout for demonstration purposes. There are two buttons on the page, labeled "Play me" and "Add to queue".
Clicking on the "Play me" button launches the docked player and immediately starts playing a Playlist specified in the embed-code. Once the button has been clicked, it is disabled automatically.
Clicking on the "Add to queue" button adds a specific Track to the queue. If the docked player is already running, it continues playing the current Track. If it is not, it immediately starts playing the queued Track. This action can be repeated an unlimited number of times.
Generating the code
If you've peeked at the source code of the example page, you can see that the tags needed to insert customized buttons are fairly concise:
<div class="audiorista_button" data-type="playlist" data-content="48" data-mode="play" data-classes="btn btn-primary"></div>
This creates a HTML <button> element that has the CSS class-names specified by the data-classes attribute. Below is a list of the possible data-* attributes and what they do.
Attribute | Values | Description |
data-type | "track" or "playlist" | The type of content you embedding |
data-content | Positive integer | The ID of the content you are embedding |
data-mode | "play" or "queue" | Whether clicking the button should play immediately or queue |
data-classes | String | The CSS classes that will be applied to the button, to be styled by you. Don't forget to style the disabled state. |
data-label | Optional string | Text to use instead of the default "Play" or "Add to queue" |
data-index | Optional positive integer | When used with a Playlist, which Track to start with (0 = first, 1 = second etc.) |