Install Napster Agent on WordPress – Napster Help

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

WordPress has many ways to add code to a site, and the right one depends on your theme and plugins. This guide covers the most reliable ways: a header and footer plugin or your theme's footer template for an agent on every page, and a Custom HTML block for an Inline block on one page.

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.
You need an Administrator account.
If your site is on WordPress.com, installing plugins needs a paid plan (Personal, Premium, Business or Commerce). Free WordPress.com sites can't install plugins. Check your plan first.
Take a backup, or work on a staging copy, before editing theme files.

Add the code to WordPress

Agent only, Agent with cards or Overlay agent: every page

Agent only and Agent with cards float in the corner of the browser window. The Overlay agent places a button in the corner you chose and can lay cards over the page.

These options go just before </body> so they show on every page. The easiest and safest way is a code snippet plugin, because it survives theme updates.

In your WordPress admin, go to Plugins → Add New Plugin, search for WPCode, click Install Now on WPCode – Insert Headers and Footers + Custom Code Snippets, then click Activate.
In the admin sidebar, go to Code Snippets → Header & Footer. You'll see three fields: Header, Body and Footer. (Other plugins name this screen differently.)
Paste your code into the Footer field. WPCode adds it just above </body> on every page.
Click Save Changes. The button is at the top right of the page, next to the title, not at the bottom.
Clear your caches (the site, host and CDN caches, not just your browser), then test.

Alternatively, a developer can add the code to your theme's footer template: in the WordPress admin, go to Appearance → Theme File Editor, open footer.php, paste the code just before </body>, and click Update File. The editor doesn't keep a backup, and updating the theme removes your change, so use a child theme. This only works with classic themes. Block themes, such as Twenty Twenty-Three, have no footer.php file to edit, so use the plugin method instead.

Don't paste these into a post or page. The Overlay agent and Agent with cards both include a <script> tag, and the WordPress editor or a security plugin may strip scripts from posts. Use the footer plugin method.

Inline block: inside a page section

The Inline block is different: it sits exactly where you paste it, inside one section of one page, like a video. Use it for a dedicated agent page or a hero section.

Open the page in the WordPress editor.
Click + (the block inserter) where you want the agent and add a Custom HTML block, or type /html on a new line and press Enter. In a page builder, use its HTML widget instead (for example the HTML widget in Elementor or the HTML module in Beaver Builder).
Paste your Inline block code into the block.
Click Update (or Publish), clear your caches, and test.

WordPress only keeps <iframe> code in posts and pages for Administrators and Editors on a single site, and for Super Admins on a multisite network. If the block is empty after saving, ask an Administrator to add it.

Test it

Clear your caches first (how to), then open your live site in a private window, while logged out of WordPress. Some optimization plugins, such as LiteSpeed Cache, skip logged-in administrators, so a page can look fine to you and still fail for visitors.
Start a conversation and allow microphone access when asked.
Check that you can hear a reply.

Clear your caches

WordPress sites usually keep a saved copy of each page so it loads quickly. After you add or change the Napster code, visitors can keep getting the old copy until that saved copy is cleared. This is more than your browser's cache, so clear each layer that applies:

Your cache or optimization plugin (for example WP Rocket, LiteSpeed Cache or WP Super Cache): use its clear or purge cache button.
Your host's cache: many hosts have their own. Look for a cache option in your hosting dashboard.
A CDN or proxy such as Cloudflare: purge its cache from its dashboard.
Your browser: or skip this one by testing in a private window.

Then open your site in a private window while logged out of WordPress to test.

Troubleshooting

WordPress sites often run optimization, caching, security and cookie-consent plugins that can interfere with embeds. If the agent doesn't appear, appears but never starts, or stays on "Taking longer…", check these causes in this order. They are the most common.

Lazy-loading plugins (such as Smush). They can replace the iframe's real address with a blank placeholder, so the agent never loads. Add the domain from your copied iframe code (the part of the src address between https:// and the next /) to the plugin's lazy-load exclusions. In Smush this is "Exclude keywords" under Lazy Load.
Script optimization (such as Rocket Loader, Delay JavaScript or Combine JavaScript). These can hold back or rewrite the Overlay agent script. Exclude the Napster script (search for napster-embed.js) from the setting.
Security headers or a Content-Security-Policy. If your host, CDN or a security plugin sends a Content-Security-Policy, the browser can block the agent. You may see an empty box where the agent should be, or nothing at all, and an error mentioning "Content Security Policy" in the browser console (press F12 to open it). A Permissions-Policy header that turns off the microphone (for example microphone=()) also stops the agent from hearing visitors. Ask your host or developer to allow the addresses in your copied code. The custom HTML guide lists them.
Caching. Your site, host or CDN can keep serving the old page after you add or change the code. See Clear your caches for each layer to clear.
Cookie-consent plugins. Some hold back third-party scripts and frames until a visitor accepts cookies. If the agent only appears after you accept, add Napster to the plugin's allowed or trusted services.
Plugin conflicts. If none of the above fits, turn plugins off temporarily (ideally on a staging copy), then turn them back on one at a time to find the cause.
Code removed. If the agent doesn't appear after pasting it into a post or page, your user role or a security plugin may be removing <iframe> or <script> tags. Use the footer plugin method for the corner options and the Overlay agent.
The agent disappeared from every page: in Napster Agent, open Preview & Publish and check that Pause the agent on your site is turned off. Pausing hides the agent everywhere without removing your code.

Tip: always test in a private window while logged out. Many plugins skip optimization for administrators, so the agent can look fine to you and still be missing for visitors.

Full steps for each of these are in Embedding Napster Agent on Your Website (iFrame Best Practices).

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.