Usage
tl;dr
<html>
<body>
<div class="example">
<div>
<div id="playlist-image"></div>
<h2 id="playlist-title"></h2>
<div id="playlist-description"></div>
</div>
<div id="playlist-items"></div>
</div>
<!-- insert link to SDK here -->
<script>
new AtmosphereExpose("13d4mk4mg", "6Sxzpa25eDfjehdpX4H2wp", {
image: "playlist-image",
title: "playlist-title",
description: "playlist-description",
items: "playlist-items",
}).load();
</script>
</body>
</html>Make sure you include the SDK before the script shown in the example above
AtmosphereExpose
After including the SDK you'll have access to the AtmosphereExpose factory which takes the following arguments.
You are required to specify your Atmosphere organisationId as well as Spotify's playlistId of the playlist that you wish to show. The third and final argument is a config object, through which you can specify the following.
Config
The Atmosphere exposé SDK gives you access to four different components: the playlist's image, title, description and its items. You're free to choose which of these components to use and which to disregard. You also maintain complete control over how you wish to structure (HTML) and present (CSS) these components.
Create the DOM layout that suites your needs. Add IDs to the DOM elements where you wish to render a component. Then pass the IDs of your DOM elements to AtmosphereExpose, by assigning their value to the corresponding keys of each component as part of the config object.
As you can see above you can also specify the volume by passing in a floating point value between 0 and 1. And lastly, you can specify a custom itemRenderer. This is optional and only required for more advanced use-cases. It enables you to specify the HTML of each individual playlist item. It expects a function that takes two arguments artist and title. The itemRenderer shown above shows the default structure of an item. The .expose-item-time class is used to display an item's duration when playing.
Fetch & render components
After providing AtmosphereExpose with the necessary configuration you'll need to call .load() on the AtmosphereExpose instance that it returns. When you do, the necessary data will be fetched and the specified components rendered.
Note that the specified DOM elements should be part of your DOM tree the moment you call .load()
Last updated
Was this helpful?