How to Add a Chatbot to Squarespace, Wix, and Webflow

You picked a chatbot, you've got the embed snippet, and now there's one step between you and a live chat widget: getting a line of code onto your site. If you built your site on Squarespace, Wix, or Webflow, the good news is that none of this requires a developer. Each platform has a spot designed exactly for this, and the whole job takes a few minutes once you know where to click.

The catch is that each platform hides that spot in a slightly different place, and each has one gotcha that trips people up. Here's the clear path for all three, plus how to make sure it actually works before you announce it.

What all three have in common

Every modern chatbot worth using installs the same way: a small JavaScript snippet you paste once, usually into a global code area that loads on every page. In SpideyChat, for example, you create your bot, and it hands you a single line to copy. That one line pulls in the widget, so you never touch it again, and any changes you make to the bot update automatically.

A good snippet loads asynchronously. That's the technical way of saying it loads after your page content, so your site appears at normal speed and the chat bubble shows up a beat later. You don't have to understand the code to trust it, but knowing it won't drag your page down is worth something.

One heads-up before you start: custom code often lives behind a paid tier. Squarespace and Webflow both gate code injection to paid plans, and Wix requires a Premium plan with a connected domain. Confirm your plan first so you're not stuck halfway.

Adding it to Squarespace

Squarespace keeps this in Code Injection, which applies your snippet site-wide. The footer slot is the right place for a chat widget.

1. Copy your chatbot's embed snippet.
2. In Squarespace, go to Settings, then Advanced, then Code Injection.
3. Paste the snippet into the Footer box (not the Header, so it doesn't compete with page loading).
4. Click Save.
5. Open your live site in a new tab and look for the chat bubble in the corner.

If you're on Squarespace 7.1 and want the widget on a single page rather than the whole site, you can drop a Code block on that page instead. For most people, site-wide from the footer is what you want.

Adding it to Wix

Wix gives you two routes. The cleaner one is the Custom Code panel, which behaves like Squarespace's injection and loads across your site.

1. Copy the embed snippet.
2. In your Wix dashboard, go to Settings, then Custom Code (under Advanced).
3. Click Add Custom Code, paste your snippet, and give it a name you'll recognize later.
4. Set it to load on All Pages, and place it in the Body - end position.
5. Set it to load once per visit, then click Apply.

Remember that Wix custom code needs a Premium plan with a connected domain. On a free Wix site the panel won't publish your code, which is the single most common reason people think the widget is broken when it simply never went live.

Adding it to Webflow

Webflow is a favorite of designers, and its custom code area is straightforward. You can add the snippet globally or to one page.

1. Copy the embed snippet.
2. In Webflow, open Project Settings, then Custom Code.
3. Paste the snippet into the Footer Code box, which places it before the closing body tag.
4. Save changes.
5. Republish your site (this is the step people forget), then check the live URL.

That republish matters. Webflow doesn't push custom code to your live site until you publish, so an unpublished project will keep looking empty no matter how correct your snippet is. If you'd rather load the widget on just one page, use the page-level custom code settings instead of the project-wide box.

One more Webflow note: if you use a staging domain and a custom domain, the snippet loads on both once published, so you can test on the staging URL without touching the live site. That's handy for confirming everything works before real visitors see it. Just remember which URL you're looking at, since a change that's live on staging isn't necessarily pushed to your main domain until you publish there too.

Test it before you tell anyone

Pasting the code is the easy part. The mistake is assuming it works because it saved. Run a quick check on the live site, not the editor preview, because previews sometimes strip custom code.

Here's a short pre-launch checklist:

• The chat bubble appears on the live URL, not just the editor
• It shows up on more than one page (confirms it's site-wide, if that's the goal)
• Open the chat and ask a real question, confirm the bot answers from your content
• Check it on your phone, the bubble shouldn't cover a menu or a checkout button
• Try one question you know it should escalate, and confirm the handoff works

Take Willow Lane Studio, a small photography business on Squarespace. The owner pasted her snippet into the Header box by mistake, saved, and saw the bubble appear, so she assumed she was done. A week later she noticed the widget was loading before her page and adding a visible flicker on slow connections. Moving the same snippet to the Footer box fixed it in thirty seconds. The lesson: the box you choose matters as much as the code itself.

Common snags and quick fixes

Most installation problems come down to a handful of repeat offenders. If the bubble isn't showing, run through these before assuming the code is bad:

Nine times out of ten, the culprit is one of these, not a genuine bug. The republish step and the paid-plan requirement account for most of the "it's not working" panic.

Once the bubble is live and answering, you're done with the hard part, and it stays done. Because the widget loads from a hosted snippet, you edit the bot from your dashboard and the changes appear on your site without touching the code again. Pick your platform, follow the five steps, run the checklist on your live URL, and you'll have a working chat assistant on your site before your coffee gets cold.