Integrations
Protocol Demos
Working examples of parachord:// protocol links, embeddable buttons, and the JavaScript API. Copy any snippet to add Parachord integration to your site.
Protocol Links
The simplest integration: standard <a> tags with parachord:// URLs. When a user with Parachord installed clicks one, the app handles it directly. For users without Parachord, the link is a no-op.
Live Preview
<!-- Play a track -->
<a href="parachord://play?artist=Big%20Thief&title=Vampire%20Empire">
Play "Vampire Empire" by Big Thief
</a>
<!-- Open an artist page -->
<a href="parachord://artist/Radiohead">Open Radiohead</a>
<!-- Open an album -->
<a href="parachord://album/Geese/Getting%20Killed">Open "Getting Killed" by Geese</a>
<!-- Add to queue -->
<a href="parachord://queue/add?artist=Bjork&title=Hyperballad">
Add "Hyperballad" by Bjork to Queue
</a>
<!-- Search -->
<a href="parachord://search?q=shoegaze">Search "shoegaze"</a>Inline Review Links
Protocol links work naturally inside running text. A music blog can make every track and artist mention clickable without disrupting the reading experience.
Live Preview
The album's centerpiece is Vampire Empire, a sprawling seven-minute track that builds from whispered acoustic guitar to a full-band crescendo. If you're new to Big Thief, start here. Fans of the band's earlier work will hear echoes of Not and Masterpiece in the dynamic shifts.
<p>
The album's centerpiece is
<a href="parachord://play?artist=Big%20Thief&title=Vampire%20Empire">
Vampire Empire</a>,
a sprawling seven-minute track that builds from whispered acoustic
guitar to a full-band crescendo. If you're new to
<a href="parachord://artist/Big%20Thief">Big Thief</a>,
start here.
</p>Action Buttons
Recommendation sites can offer direct actions for each track: play immediately, add to queue for later, or explore the artist's full catalog in Parachord.
Live Preview
<button onclick="location.href='parachord://play?artist=Quarantine%20Angst&title=Deliberate'">
Play Now
</button>
<button onclick="location.href='parachord://queue/add?artist=Quarantine%20Angst&title=Deliberate'">
Add to Queue
</button>
<button onclick="location.href='parachord://artist/Quarantine%20Angst'">
Explore Artist
</button>Playback Controls
Protocol URLs cover the full playback surface: pause, resume, skip, previous, shuffle, and volume. These can be used from web dashboards, Stream Deck integrations, or automation tools.
Transport Controls
Live Preview
<a href="parachord://control/previous">Previous</a>
<a href="parachord://control/pause">Pause</a>
<a href="parachord://control/resume">Play</a>
<a href="parachord://control/skip">Skip</a>
<a href="parachord://shuffle/on">Shuffle On</a>
<a href="parachord://shuffle/off">Shuffle Off</a>AI Chat Prompts
Open Parachord's AI DJ with a pre-filled prompt. A review site could place a "Discover More Like This" button at the end of every review. The user sees a confirmation dialog before any prompt is sent.
Live Preview
<!-- Open AI DJ chat panel -->
<a href="parachord://chat">Open AI DJ</a>
<!-- Pre-filled prompts (user sees confirmation before sending) -->
<a href="parachord://chat?prompt=play%20something%20chill">
Play something chill
</a>
<a href="parachord://chat?prompt=recommend%20albums%20like%20OK%20Computer">
Recommend albums like OK Computer
</a>prompt parameter is provided, Parachord shows a confirmation dialog before sending the message to the AI. This prevents external sources from silently injecting prompts. Max 500 characters.
Embeddable "Send to Parachord" Button
The drop-in widget for sending playlists to Parachord. Include one script tag, add a div with data attributes, and the button handles everything: detecting Parachord, sending via WebSocket if running, or falling back to a parachord://import protocol URL.
Inline Tracks (Data Attributes)
Define the playlist directly in HTML using the data-tracks attribute with a JSON array of track objects.
Live Preview
<script src="https://go.parachord.com/button.js"></script>
<div class="parachord-button"
data-title="The Fall of Fort Equinox (2025)"
data-creator="J Herskowitz"
data-tracks='[
{"title":"Separate Houses","artist":"Press Club"},
{"title":"Los Angeles","artist":"Big Thief"},
{"title":"Just Be Simple","artist":"MJ Lenderman"},
{"title":"Cobra","artist":"Geese"},
{"title":"Spill the Juice","artist":"Slothrust"}
]'>
</div>Hosted XSPF URL
Point to a hosted XSPF playlist file instead of inline track data. Parachord fetches and imports the playlist.
Live Preview
<script src="https://go.parachord.com/button.js"></script>
<div class="parachord-button"
data-xspf-url="https://go.parachord.com/1582a6b6.xspf">
</div>JavaScript API
For sites that need programmatic control, button.js exposes a global Parachord object with methods for sending playlists, creating buttons dynamically, and checking connection status.
Send a Playlist
Send a playlist directly to Parachord from JavaScript. The method handles WebSocket detection and protocol URL fallback automatically.
// Send a playlist directly
Parachord.sendPlaylist({
title: "The Fall of Fort Equinox (2025)",
creator: "J Herskowitz",
tracks: [
{ title: "Separate Houses", artist: "Press Club" },
{ title: "Los Angeles", artist: "Big Thief" },
{ title: "Just Be Simple", artist: "MJ Lenderman" }
]
});Send a Hosted XSPF URL
// Send a hosted XSPF playlist URL
Parachord.sendXspfUrl("https://go.parachord.com/1582a6b6.xspf");Create a Button Programmatically
Dynamically create and insert a styled button element. Useful for recommendation engines that generate playlists on the fly.
// Create a button and insert it into the DOM
const btn = Parachord.createButton({
title: "My Playlist",
tracks: [
{ title: "Song Name", artist: "Artist Name" }
]
}, { label: "Open in Parachord" });
document.getElementById('my-container').appendChild(btn);Check Connection Status
// Check if Parachord is running locally
if (Parachord.isConnected) {
console.log("Parachord is running!");
}Smartlink Embed
Smartlinks are universal, shareable URLs that represent a song, album, or playlist independent of any streaming service. They can be embedded as iframes in blogs, newsletters, and social posts.
Live Preview
<iframe
src="https://go.parachord.com/37a49d9e/embed?size=large" width="600" height="500" frameborder="0" style="border-radius: 8px;""
width="400"
height="152"
frameborder="0"
style="border-radius: 8px;"
allow="encrypted-media"></iframe>These demos cover the most common integration patterns. The full protocol supports navigation, history, playlists, library, friend views, and more.
Full Protocol Schema