Adding Napster Agent to your website takes three steps: choose how it should appear, copy your code from the product, and paste it into your website platform. This page helps you with the first step and sends you to the right guide for the rest.
Step 1: Choose how your agent appears
In Napster Agent, open your agent and go to Preview & Publish (it shows as Preview & Update once your agent is published). Under Put your agent live, pick one option. Your code, or your link, appears right under your choice.
You can also click the â‹® menu on your agent and choose Copy Embed Code. This opens Add your agent to your website with the same four embed options.
| Option | Type | How it appears | Where you paste it |
|---|---|---|---|
| Agent only | iframe | A compact agent in the corner of every page. Conversation only, no product or content cards. Best for support, FAQs and simple Q&A sites. | Just before </body>, so it shows on every page |
| Agent with cards | iframe | A corner agent that shows product, video, contact or booking cards above it when relevant. Best for small shops and service businesses. | Just before </body>, so it shows on every page |
| Overlay agent | JavaScript | A floating agent that can lay cards over the page itself, not confined to a corner box. You choose the button position and theme. Best for sites where cards come up often. | Just before </body>, so it shows on every page |
| Inline block | iframe | A full agent experience inside one section of a page. It sits exactly where you paste it. Best for a dedicated agent page or a hero section. | In the page, where you want the agent to appear |
| Standalone URL | No code | Your agent on its own page, in its full scene. Share the link in a social bio, email or QR code, or use it if you don't have a website. | Nothing to install. Copy the link from Preview & Publish, or choose Copy Shareable URL in the â‹® menu. |
Not sure which to pick? Start with Agent only for a compact agent that stays out of the way. Choose Agent with cards if your agent should sometimes show products or booking links. Choose Overlay agent if cards are a big part of the conversation. Choose Inline block to give the agent its own place on a page.
Installed before October 2026? Code that names Embeddable Module, Agent Only or a spaces.napster.ai address keeps working. You don't need to replace it.
Step 2: Copy your code
Click Copy code under the option you chose. For the Overlay agent, choose the button position and theme first. Paste the code exactly as it is. It contains your agent's unique ID, so please don't retype it or edit it unless our support team asks you to.
Under the code you'll find three shortcuts: Install instructions (links to the guides below), Send to my developer (emails the code and instructions to whoever manages your site) and Get help (opens a support request).
The Overlay agent doesn't start inside website editors or previews that show your site in a frame. Check it on your live site.
Step 3: Choose your platform
Each guide shows where to paste the code for every option: the corner options and the Overlay agent (once, on every page) and the Inline block (inside one page section).
- Install Napster Agent on WordPress
- Install Napster Agent on Shopify
- Install Napster Agent on Wix
- Install Napster Agent on Squarespace
- Install Napster Agent on Webflow
- Install Napster Agent on a custom HTML website
Using a different platform? Follow the custom HTML guide: any platform that lets you add an HTML or custom code block will work the same way.
Looking for the Shopify store connection? That's a different feature. It lets your agent show and sell your products. See How Napster Agent connects to your Shopify store.
What every platform needs
-
Microphone and camera access. The iframe code includes an
allowsetting that lets the agent use the visitor's microphone and camera. Don't remove it. - A page that allows custom code. Some platforms only allow custom code on paid plans. Each guide lists what to expect.
- A published site. Preview modes in some site builders don't run embedded code. Publish your changes, then test on the live page.
Test it
- Open your live page in Chrome, Edge or Safari, in a private window.
- Start a conversation with the agent.
- Confirm that the browser asks for microphone permission, and allow it.
- Say something and check that you hear a reply.
If the agent appears but never starts, or stays on "Taking longer…", see Embedding Napster Agent on Your Website (iFrame Best Practices) for microphone permissions, cookie-consent tools, lazy-loading plugins and caching. If the agent has disappeared from your site, check that Pause the agent on your site is turned off in Preview & Publish.
Need help?
Open a support request and include the page URL, your browser and operating system, your embed code, and a screenshot of the browser console if you see errors.