I’m having trouble figuring out how to properly link between different HTML pages in my Spotify app. Most tutorials I see only show single-page applications.
My project has these files:
main.html
musician.html
Right now I’m using a basic <a href="musician.html">Click here</a> link in my main.html file. This does work for navigation, but it doesn’t create proper browser history entries.
I’ve been reading about using Spotify URI format like spotify:app:$APPNAME:parameter for navigation, but I can’t get this syntax to work when trying to go from one HTML file to another. Since most examples I find are single-page apps, I’m starting to wonder if multi-page Spotify apps are even supposed to work this way, or if developers just show/hide different sections of one HTML file instead of using separate files.
Spotify’s URI syntax doesn’t work like you’d think for page navigation. When I built my first multi-page Spotify app, I learned that spotify:app:$APPNAME:parameter isn’t for linking HTML files directly - it’s for routing inside Spotify’s framework. Regular anchor tags break history because they skip Spotify’s navigation completely. Here’s what worked for me: keep your separate HTML files but load them dynamically with XMLHttpRequest or fetch into a container div on your main page. You get organized code across multiple files while staying inside Spotify’s single-page setup. The trick is catching link clicks with JavaScript and loading content programmatically instead of using browser navigation.
You’re spot on - most developers stick to single HTML files for Spotify apps. I ran into the exact same navigation mess when building a music discovery app with separate HTML files. That browser history issue is a nightmare because Spotify’s framework wants to control navigation itself. I ended up scrapping the multi-file approach and went with one HTML file plus JavaScript to swap content sections. Used CSS classes to show/hide views and tracked navigation with JS objects. Way more natural in Spotify’s ecosystem and killed those history problems completely. The refactor sucked, but it’s so much more stable than wrestling with multi-page quirks.
Multi-page Spotify apps can definitely work, but it seems you’re encountering a common challenge with navigation. Standard anchor tags won’t interact with Spotify’s routing system, which is likely the core of your issue.
Instead of typical links, consider using the sp.require('sp://import/scripts/api/models').application.openURI() method. In your main.html, remove the anchor tag and implement a JavaScript function with sp.core.getApplicationWindow().openURI('spotify:app:yourappname:musician'), replacing ‘yourappname’ with your actual app ID. This approach ensures proper browser history functionality and aligns with Spotify’s navigation protocols. I faced a similar issue in my own multi-page app, and switching to URI-based navigation resolved my back button problems.
sounds like you’re overthinking this tbh. try using window.location.href in javascript instead of anchor tags - worked for my app when regular links were acting weird with spotify’s routing system.
actually, check your manifest.json setup first - it might not be configured right for multi-page apps. the issue usually isn’t the linking but how spotify loads your pages. get your routing sorted there before diving into complex uri stuff.