Install Napster Agent on Webflow

In Webflow you can add Napster Agent to every page with Custom code in your site settings, or to one page section with a Code Embed element.

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.
• Custom code goes live only when you publish your site. Webflow can show it in Preview, but visitors see it only after you publish. To test first, publish to your free webflow.io address.
• Custom code and Code Embed need a Webflow Workspace on a paid plan (Core, Growth, Agency or Freelancer) or a site with an active Site plan.

Add the code to Webflow

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.

1. In your Webflow dashboard, click ⋯ on your site and choose Settings (or open Site settings from the Designer), then click Custom code.
2. Paste your code into the Footer code section. Webflow adds it just before the closing </body> tag.
3. Click Save changes.
4. Click Publish, choose where to publish, and click Publish to selected domains. Your webflow.io address is enough for a test.

The Overlay agent doesn't start inside website editors or previews that show your site in a frame. Check it on your live site.

Inline block (or a corner agent on one page only)

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.

1. In the Webflow Designer, open the page where you want the agent.
2. Open the Add panel, search for Code Embed, and drag it into the section where the agent should appear.
3. Paste your code into the code editor window that opens.
4. Save and close the code editor. A Code Embed can hold up to 50,000 characters, which is plenty for Napster code.
5. Click Publish, choose where to publish, and click Publish to selected domains.

The same Code Embed works for Agent only or Agent with cards on one page: the agent still floats in the corner of the window. If it appears inside the element instead, use the every-page steps above.

Test it

1. Open your published site in a private window. Your webflow.io address works for a test.
2. Start a conversation and allow microphone access when asked.
3. Check that you can hear a reply.

Troubleshooting

• Nothing appears in the Designer: Webflow may show only a placeholder, or nothing, on the canvas, and it doesn't run custom code in expand canvas view. Use Preview, or publish and check the live site.
• Custom code or Code Embed is locked: these need a Webflow Workspace on a paid plan (Core, Growth, Agency or Freelancer) or a site with an active Site plan. Add a plan, then publish.
• Old version shows after publishing: clear your browser cache or test in a private window.
• 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.
• Appears but never starts: see Embedding Napster Agent on Your Website (iFrame Best Practices) for microphone permissions and cookie banners.

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.