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 the product, open your agent and go to Preview & Publish. Under Put your agent live, pick one option. The code or link appears right under your choice.
| 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. | Just before </body>, so it shows on every page |
| Agent with cards | iframe | A corner agent that can show product, video, contact or booking cards above it. | Just before </body>, so it shows on every page |
| Overlay agent | JavaScript | A floating agent that can lay cards over the page itself, not just in a corner box. | Just before </body>, so it shows on every page |
| Inline block | iframe | A full agent experience inside one section of a page you choose. | Exactly where you want it on the page |
| Standalone URL | No code | Your agent on its own page. Share the link in a bio, email or QR code. | Nothing to install |
Not sure which to pick? Start with Agent only for support or FAQ sites. Choose Agent with cards or Overlay agent if you want products, videos or booking cards to appear during the conversation. Choose Inline block for a dedicated agent page or a landing-page section.
Step 2: Copy your code
Click Copy code under the option you chose. Paste it exactly as it is. The code contains your agent's unique ID, so please don't retype it or edit it unless our support team asks you to.
Step 3: Choose your platform
Each guide covers both methods: the iframe options (Agent only, Agent with cards, Inline block) and the JavaScript option (Overlay agent).
- 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 options include 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.
- 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.
Need help?
In the product, click Get help next to your code to open a support request. Please include the page URL, your browser and operating system, your embed code, and a screenshot of the browser console if you see errors.