Squarespace lets you add Napster Agent to every page with Code Injection, or to one page section with a Code block.
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.
- Code Injection and Code blocks need a paid Squarespace plan that includes custom code. On a free trial you can add the code and see it in Preview, but Squarespace asks you to upgrade before you can publish the site with it.
- Save and publish your changes before testing. Test on the live site.
Add the code to Squarespace
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.
- Click Pages, scroll to the bottom, and click Website Tools → Code Injection.
- Paste your code into the Footer box. Don't use Header, Order Confirmation Page or Order Status Page.
- Click Save, then publish your site.
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.
- Open the page, click Edit, click the section where you want the agent, then click Add Block and search for Code.
- Choose Code (not Markdown).
- Replace the sample text with your code. Make sure Display Source Code is turned off and the mode is HTML, so the code runs instead of showing as text.
- Resize the block to fit the agent. The Inline block keeps a 16:9 shape at the block's width.
- Click Save in the top-left corner of the editor.
The same Code block 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 block instead, use the every-page steps above.
Test it
- Open your live site in a private window.
- Start a conversation and allow microphone access when asked.
- Check that you can hear a reply.
Troubleshooting
- The code shows as text: turn off Display Source Code in the Code block.
- Nothing appears: save your changes, publish the site, then check it in a private window. The agent can take about 10 seconds to show.
- Squarespace asks you to upgrade: your plan doesn't include custom code. Upgrade your plan, then publish the site.
- 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.