Install Napster Agent on a Custom HTML Website – Napster Help

📢 Name update: Napster Agent was formerly known as Napster Spaces. This change took effect August 2026.

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 Agent, open your agent and go to Preview & Publish (it shows as Preview & Update once your agent is published). You can also click the ⋮ menu on your agent and choose Copy Embed Code.
Under Put your agent live, choose Agent only or Agent with cards (in the corner, iframe), Overlay agent (over your site, JavaScript) or Inline block (inside a page section, iframe). For the Overlay agent, pick the button position and theme first. See Install Napster Agent on Your Website: Choose Your Platform for help choosing.
Click Copy code and paste it exactly as it is. It contains your agent's unique ID.
Make sure your agent is published so visitors can see it.

Choose how it appears

Agent only (iframe): a compact agent fixed in the bottom-right corner of the window. Conversation only, no cards.
Agent with cards (iframe): a corner agent that shows product, video, contact or booking cards above it when relevant. Its code includes a short script that resizes the panel when cards appear.
Overlay agent (JavaScript): a single <script> tag. A floating agent that can lay cards over the page itself. You choose the button position (bottom right or bottom left) and theme (dark or light).
Inline block (iframe): a full agent experience that fills the width of the element you paste it into, at 16:9. It sits exactly where you paste it.
Standalone URL (no code): a shareable link to your agent on its own page. Add it to any button or menu on your site.

To hide or show cards in the conversation, use the Cards Display toggle under Settings in Preview & Publish.

Add the code to your page

Agent only, Agent with cards or Overlay agent: every 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 change the Overlay agent's button position or theme later, choose new settings in Napster Agent and copy the code again, or edit the data-position and data-theme attributes in the script tag.

Show a corner agent on one page only

Paste the code into that page's HTML instead of your shared layout or footer. The agent still floats in the 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>.

Inline block: inside a page section

Paste the Inline block code where the agent should appear, inside the element that sets its width. The agent fills that width at a 16:9 shape.

Example

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

<section class="talk-to-us">
  <!-- Inline block: paste it here, where the agent should appear -->
</section>

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

<!-- Agent only, Agent with cards or Overlay agent: paste it 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. Always check them against the src in your own code:

Agent only and Agent with cards: allow https://agent-embed.napster.ai in frame-src. Agent with cards also includes a short inline script that resizes the panel. If your policy blocks inline scripts, the agent still works at a fixed height.
Inline block: allow https://agent.napster.ai in frame-src.
Overlay agent: allow the address in the script's src in script-src, and https://agent.napster.ai in frame-src.
Older code (installed before October 2026): Agent Only used https://spaces-embed.napster.ai and Embeddable Module used https://spaces.napster.ai.
Microphone and camera: allow them for the same addresses in the Permissions-Policy header, for example microphone=(self "https://agent-embed.napster.ai" "https://agent.napster.ai").

If the agent is still blocked, open the browser console (F12). A "Refused to load", "Refused to connect" or "Refused to frame" message names the blocked address and the setting to add it to. See Embedding Napster Agent on Your Website (iFrame Best Practices) for more header examples.

Test it

Open your page in Chrome, Edge or Safari.
Check that the agent appears in the corner (or in its section, for an Inline block).
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.

If the agent has disappeared from every page, check that Pause the agent on your site is turned off in Preview & Publish.

Need help?

Contact our support team with your page URL, browser details, embed code and a console screenshot. You can also use Get help in the Put your agent live panel, or Send to my developer to email the code and these instructions to whoever manages your site.