Install Napster Agent on a Custom HTML Website – Napster Help

If you manage your own HTML, or your platform lets you add custom HTML or code, adding Napster Agent takes one paste.

Before you start

In Napster Spaces, open your Space and go to Preview & Publish (it shows as Preview & Update once the Space is published).
Under How it appears, choose Embeddable Module or Agent Only. The code appears in the Embed Code box under your choice.
Click Copy. You can also open the ⋮ menu on your Space card and choose Copy Embed Code.

Make sure your Space is published so visitors can see it. See Install Napster Agent on your website for help choosing a platform.

Choose how it appears

Agent Only: a compact agent (450 px wide) in the bottom-right corner of the page. Best for corners and sidebars.
Embeddable Module: your agent with its background scene and cards (1280 px wide, 16:9) in the bottom-right corner of the window. It is a much larger panel than Agent Only.
Full Web Page: no code needed. It gives you a shareable link to your Space that you can add to any button or menu on your site.

Both embed options use an iframe that is fixed to the bottom-right of the browser window, so the agent stays in view as visitors scroll.

Add the code to your page

Paste the code just before the closing </body> tag of every page where the agent should appear. If your site uses a shared layout or footer template, paste it there once.

Keep the iframe's allow setting as it is. It lets the agent use the visitor's microphone and camera:

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

To hide or show cards in the conversation, use the Cards Display toggle in Settings on the same screen.

Show it on one page only

To show the agent on just one page, paste the code into that page's HTML instead of your shared layout or footer. The agent still floats in the bottom-right corner of the window, wherever in the page you paste it.

If the agent appears inside a box instead of floating, something around the code, such as a container with a CSS transform, is holding it in place. Move the code to just before </body>.

Example

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    ...your page content...

    <!-- Paste your Napster Agent code here -->

  </body>
</html>

If your site uses a shared footer template, paste the code at the end of that template, after your footer content:

<footer>
  ...your footer content...
</footer>

<!-- Paste your Napster Agent code here -->

</body>
</html>

If your site uses security headers

Some sites set a Content-Security-Policy or Permissions-Policy header. If the agent doesn't appear or can't use the microphone, ask your web admin to allow Napster's addresses:

Allow the address in your embed code's src in frame-src. Agent Only uses https://spaces-embed.napster.ai. Embeddable Module uses https://spaces.napster.ai.
Allow microphone and camera for the same address in the Permissions-Policy header.

Always check the address against the src in your own embed code. See Embedding Napster Agent on Your Website (iFrame Best Practices) for the header examples.

Test it

Open your page in Chrome, Edge or Safari.
Check that the agent appears in the bottom-right corner with a Start button.
Start a conversation and allow microphone access when asked.
Check that you can hear a reply. If something fails, open the browser console and look for a "Permissions policy violation" message.

Need help?

Contact our support team with your page URL, browser details, embed code and a console screenshot.