Install Napster Agent on WordPress

WordPress has many ways to add code to a site, and the right one depends on your theme and plugins. This guide covers the two most reliable methods for each type of embed.

Before you start

• In the product, open your agent, go to Preview & Publish, choose an option, and click Copy code. See Install Napster Agent on your website for help choosing.
• You need an Administrator account.
• If your site is on WordPress.com, installing plugins needs a paid plan, and custom code is only available on the Business plan and above. Check your plan first.
• Take a backup, or work on a staging copy, before editing theme files.

Method 1: iframe (Agent only, Agent with cards, Inline block)

Inline block: one page or section

1. Edit the page where you want the agent to appear.
2. Click + to add a block and search for Custom HTML.
3. Paste your Inline block code into the block.
4. Click Update or Publish, clear your caches, then open the live page to test.

Agent only or Agent with cards: every 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.

1. Install and activate a header and footer plugin such as WPCode.
2. In WPCode, go to Code Snippets, then Header & Footer. (Other plugins name this screen differently.)
3. Paste your code into the Footer box.
4. Save, clear your caches (the site, host and CDN caches, not just your browser), and test.

Alternatively, a developer can add the code to your theme's footer template just before </body>. Use a child theme so a theme update doesn't remove it. 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.

Method 2: JavaScript (Overlay agent)

The Overlay agent is a single <script> tag. Use the same footer method as above.

1. Click Copy code under Overlay agent. Choose the button position and theme first if you want to change them.
2. In your footer plugin, paste the code into the Footer box.
3. Save, clear your caches (the site, host and CDN caches, not just your browser), and test.

Test it

1. 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.
2. Start a conversation and allow microphone access when asked.
3. 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:

1. Your cache or optimization plugin (for example WP Rocket, LiteSpeed Cache or WP Super Cache): use its clear or purge cache button.
2. Your host's cache: many hosts have their own. Look for a cache option in your hosting dashboard.
3. A CDN or proxy such as Cloudflare: purge its cache from its dashboard.
4. 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.

1. Delay JavaScript or defer settings (WP Rocket, LiteSpeed Cache and similar). These plugins can rewrite or hold back the Overlay agent's script so it never loads for visitors, even though it can work when you are logged in as an administrator. In the plugin's JavaScript exclusion list, add the script's file name (napster-embed.js in the code you copied). In LiteSpeed Cache, add it under both "JS Excludes" and "JS Deferred / Delayed Excludes" (we confirmed the agent loads for visitors with it in both lists). In WP Rocket, look for its JavaScript exclusion box (the label depends on the version, for example "Excluded JavaScript Files"). Then clear your caches and test in a private window.
2. 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.
3. 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 or broken-page 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 domains in your copied code for both scripts and frames.
4. 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.
5. 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.
6. 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.
7. Script blocked. If the Overlay agent doesn't appear after pasting it into a post or page, your user role or a security plugin may be removing <script> and <iframe> tags. WordPress only keeps them for Administrators and Editors on a single site, and for Super Admins on a multisite network. Use the footer plugin method instead.

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?

Click Get help in the product, or contact our support team with your page URL, browser details, embed code and a console screenshot.