Embedding Soundslice in native apps

The Soundslice embed works nicely in native apps — on smartphones, tablets or desktop computers. The specific operating system (Android, iOS, Windows, MacOS) doesn’t matter, as long as you have a way of embedding web pages (“webviews”).

There are two special considerations for native app integration: offline support and domain allowlists.

Offline support

Making Soundslice work offline is completely optional. For simplicity, you may opt to require an Internet connection in order for your app to use Soundslice. But if you want to do it, follow the instructions in our separate help page.

Domain allowlists

Our domain allowlist is a security precaution that prevents your embeds from being hijacked by other websites/apps (and hence costing you money). Our player checks the HTTP referrer to make sure the parent website (the website embedding our player) is on the allowlist.

But in a native app, there’s no HTTP referrer! So how do you deal with this?

Method 1: Send a referrer manually

Some native-app platforms allow you to send an HTTP referrer in a webview. The instructions vary based on platform — but the main idea is to set the referrer header to a domain that’s on your allowlist.

Method 2: Use a “proxy” web page

If you can’t get Method 1 to work, you can create a “proxy” web page, on your own domain, which simply includes only the Soundslice <iframe>. Then, in your native app’s webview, embed your site’s URL, passing the appropriate Soundslice slice ID.

Here is a full example, assuming the domain example.com:

First, create a page on your site that accepts a slice ID as a URL parameter (example.com/soundslice/?id=wHYfc). This page should do the following:

• Do some user authorization, to verify that the page is only being accessed by your native app. (This is technically optional, but we recommend doing it to keep your content secure.)
• Produce a simple HTML page that contains only a Soundslice <iframe> with whatever slice ID was provided in the URL parameter.
• Make sure this web page has no margin or padding. The Soundslice <iframe> is literally the only content in the page.

Once you have that, then change your native app’s webview to embed example.com/soundslice with the appropriate ?id= URL parameter. That’s it!

Extra considerations for iOS

If you’re developing an iOS app, make sure to set the allowsInlineMediaPlayback property. Without this, video playback within the Soundslice player might go full-screen, blocking the rest of the Soundslice interface.