Embedding Napster Agent on Your Website (iFrame Best Practices)

Bringing your Napster Agent 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 Agent 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.

• Napster 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:

<iframe 

            src="https://spaces.napster.ai/view/[experience ID]" 

            style="width: 1280px; position: fixed; bottom: 0; right: 20px; aspect-ratio: 16/9; background: transparent; z-index: 999999999;"

            frameborder="0"

            allow="microphone; camera; autoplay; clipboard-write; encrypted-media; display-capture; picture-in-picture"

            allowtransparency="true"

            allowfullscreen

            referrerpolicy="strict-origin-when-cross-origin"

            title="Napster Spaces Experience"

        ></iframe>

2. Letting Your Napster 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; display-capture; picture-in-picture"

Permissions Policy Header

If your site uses security headers, confirm they include Napster Agent as an approved origin:

Permissions-Policy:
  microphone=(self "https://spaces.napster.ai" "https://spaces-embed.napster.ai"),
  camera=(self "https://spaces.napster.ai" "https://spaces-embed.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 Napster Agents 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. Lazy-Loading and Optimization Plugins (WordPress)

Many WordPress sites run performance plugins that "lazy-load" images and embeds, holding content back until a visitor scrolls near it. That helps for images, but it can break the Napster Agent iframe. The plugin swaps the iframe's real address for a tiny placeholder and loads the Napster address with a script after the page has finished loading. When that happens, the browser may not grant microphone access, so the agent appears but never starts a conversation.

Example:
On a WordPress website, the agent appeared but stayed on "Taking longer…" and the session never started. The browser console showed a Permissions policy violation for the microphone. A lazy-load feature in the site's optimization plugin was rewriting the iframe.

How to check

1. Right-click the agent on your page and choose Inspect.
2. Find the Napster Agent <iframe> and look at its src.
3. It should start with the Napster Agent address from your embed code (a web address containing napster.ai). If it starts with data:image instead, and your real address sits in a data-src attribute, a plugin is rewriting your embed.

How to fix: Exclude the Napster iframe from lazy-loading. The setting varies by plugin, so look for lazy-load options that mention iframes, embeds or third-party content. For example, in Smush:

1. Go to Smush → Lazy Load.
2. Either turn off the iframe media type, or find Exclude content from Lazy Load and add a keyword from your Napster iframe code (for example napster.ai), one entry per line.
3. Save, then clear all caches (see section 5).

Tip: If you don't know which plugin is responsible, turn plugins off temporarily to isolate it, ideally on a staging copy of your site. Turn them all off and test. If the agent works, turn them back on one at a time until it stops. Then use that plugin's exclusion setting, or update it, rather than leaving it off.

5. Caching: Clear Every Layer After a Change

If you change your embed or a plugin setting and nothing improves, an old cached copy of the page may still be served. Managed WordPress hosts often run several caches at once, and clearing only one may not be enough. Check each layer:

• Page builder cache: In Beaver Builder, go to Settings → Beaver Builder → Tools → Clear Cache.
• Hosting cache: On GoDaddy Managed WordPress, open GoDaddy Quick Links → Flush Cache in the admin bar. Alternatively, in your GoDaddy account, go to the site's Settings → Tools → Flush Now.
• Object cache and other cache plugins: Check your hosting plugin's settings (on GoDaddy, the GD cORe plugin) and any caching plugin you've added.
• Security firewall or CDN: In Sucuri, use the Firewall tab in the plugin or the Sucuri dashboard (Performance → Clear Cache). If the plugin isn't connected to a Sucuri account, there may be nothing to clear here.
• Your browser: Test in a private window.

Order can matter. Start with your site's own plugin caches, then your host's cache, then any CDN or firewall cache, and finish with a private-window test.

6. 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 Napster Agent 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 Napster Agent 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.

7. Test Before You Go Live

It only takes a few minutes to confirm that everything is working correctly:

1. Embed the code from the Napster Agent UI.
2. Open your page in Chrome, Edge or Safari.
3. When you start the conversation, check that the microphone permission prompt appears.
4. Watch for any console messages like Permissions policy violation — these usually mean a header or cookie policy needs to be adjusted.
5. Try a short conversation to confirm that both audio input and output are working.
6. If you’ve added the email parameter, verify that analytics events appear under the correct user.
     

8. 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 Agent

9. 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 Napster Agents
• 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 Agent 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.