Bringing your Napster Spaces agent to your own website should be simple and seamless.
This guide walks you through everything you need to make your embedded experience work perfectly - including microphone access, cookie settings, and optional email tracking - so your visitors can interact naturally without friction.
1. Getting the Right Embed Code
Every website setup is different, which is why Napster Spaces gives you two easy options for embedding.
When you open the Embed Options panel in the product, you’ll see:
- Embeddable Module – the full experience with background and cards (if enabled), ideal for placing inside a webpage as a section.
-
Agent Only – a minimal version focused solely on the video agent, perfect for corners, sidebars, or smaller layouts.
Once you choose the format that fits your site, simply click Copy to get your personalized <iframe> code.
Paste it into your site’s HTML where you’d like the experience to appear — and you’re done.
(There’s no need to edit the code manually unless advised by our support team.)
Sample code:
2. Letting Your Agent Speak and Listen
To enable voice and video features, your website must allow the iframe to access the visitor’s microphone and camera. (The camera is only used in cases when face tracking is enabled for better noise suppression in a loud environment; the video is processed locally on the device and is not sent anywhere).
iFrame Attributes
Make sure your iframe includes:
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"Permissions Policy Header
If your site uses security headers, confirm they include Napster Spaces as an approved origin:
Permissions-Policy:
microphone=(self "https://spaces.napster.ai"),
camera=(self "https://spaces.napster.ai")If these permissions are missing, browsers will quietly block mic access - and your visitors won’t know why the agent does not start.
3. Cookie and Consent Tools
If your website uses a consent or cookie management plug-in, it might block third-party content until the user gives permission. That’s easy to fix — just tell the plug-in that Napster is a trusted source.
Example:
A client embedding Spaces into a WordPress site discovered that their Borlabs Cookie plug-in was blocking third-party content by default. After adding napster.ai as a trusted domain, the iframe and microphone access worked perfectly.
If you’re unsure how to whitelist Napster, your web admin or plug-in documentation can help you locate the “Trusted Domains” or “Script Blocking” settings.
4. Passing User Email to Analytics (Optional)
If your parent website already knows the visitor’s email — for example, after a login or membership check — you can pass that information to Spaces by adding it as a parameter in the iframe URL.
Example:
src="https://spaces.napster.ai/e/{EXPERIENCE_ID}?email={USER_EMAIL}"When the email is provided this way, it’s stored in Spaces analytics to help you measure engagement and identify returning users.
This parameter is entirely optional, but can make your analytics more meaningful.
Please ensure your organization’s privacy policy allows this data sharing before enabling it.
5. Test Before You Go Live
It only takes a few minutes to confirm that everything is working correctly:
- Embed the code from the Napster Spaces UI.
- Open your page in Chrome, Edge or Safari.
- When you start the conversation, check that the microphone permission prompt appears.
- Watch for any console messages like Permissions policy violation — these usually mean a header or cookie policy needs to be adjusted.
- Try a short conversation to confirm that both audio input and output are working.
- If you’ve added the email parameter, verify that analytics events appear under the correct user.
6. Network and Firewall Settings
Some hosting environments or corporate networks restrict the ports required for real-time voice and video. For details, please refer to Network Requirements for Running Napster Spaces
7. When to Reach Out
If you still run into issues — for example, the iframe doesn’t appear, or audio isn’t working — our support team is ready to help.
Please include:
- The page URL where you embedded Spaces
- Browser and operating system details
- The embed code
- A screenshot of your browser console (if errors appear)
With that information, we can usually pinpoint the cause right away.
Final Thought
Embedding Napster Spaces should feel effortless.
Once your iframe is set up and permissions are in place, your visitors will be able to see, hear, and talk with your AI agent as naturally as they would on any Napster-hosted page — and you’ll get the insights you need to keep improving their experience.