Embed an AI Chatbot in Webflow, Squarespace and Wix: Step-by-Step

Website builders such as Webflow, Squarespace and Wix make it easy to run a site without writing code, but they handle third-party scripts in slightly different ways. Adding an AI chatbot means pasting one snippet into the right box, and the right box is named differently on each platform. This guide gives the exact steps for each of the three, tells you which plan you need where it matters and lists the problems people hit most often.

If you are still choosing a product, read what an AI website assistant does. If you have your snippet already, pick your platform below. The general preparation, meaning content, testing and honesty about AI, is covered in our complete guide to adding a chatbot.

What you are pasting and why it works on any builder

A chatbot widget is loaded from the vendor's server by a short piece of code. You paste that code into a place on your site that runs on every page, and the builder outputs it in your pages. Your builder does not need to know anything about chatbots. The same snippet works everywhere; only the place you paste it changes. Copy your snippet from your chatbot dashboard (in Crescelo: Overview, then Add to website) and keep it exactly as it is.

Webflow: add the chat with custom code

Webflow lets you add code site-wide or on a single page. Custom code in site settings requires a paid Site plan, which most live sites already have; you can test on the free staging domain with the site-level code.

Site-wide installation

1. Open your project and go to Site settings.
2. Choose the Custom code tab.
3. Scroll to the box named 'Footer code' (before the closing body tag).
4. Paste the snippet and click Save changes.
5. Publish the site to your domain. The change does not appear until you publish.

A single page only

1. Open the page in the Designer and go to Page settings (the gear icon in the Pages panel).
2. Scroll to 'Custom code' and paste the snippet in the 'Before </body> tag' box.
3. Save and publish.

Tip: Webflow does not run custom code in the Designer preview. Test on the published site, not in the editor.

Squarespace: code injection

Squarespace uses 'Code Injection'. On many plans (Business and above, and current Commerce plans) custom code is available; check your plan if you do not see the option, as availability has changed between plan versions.

1. From the site dashboard open Website, then Pages, then Custom code (some versions: Settings, Advanced, Code Injection).
2. Find the 'Footer' box.
3. Paste the snippet.
4. Click Save. Visit the live site in a private window.

For a single page, open the page's settings, choose Advanced, and paste the snippet into 'Page Header Code Injection'. Squarespace 7.0 and 7.1 differ slightly in menu names, so look for words like 'Code Injection' or 'Advanced' if your menu differs.

Squarespace does not show injected code while you are logged in and editing. Log out or use a private window to see the chat.

Wix: custom code in settings

Wix has a 'Custom Code' tool in the site settings. It requires a Premium plan with a connected domain for some code types; check your plan if the option is unavailable.

1. From your Wix dashboard, open Settings.
2. Under Advanced, choose Custom Code.
3. Click 'Add Custom Code' at the top right.
4. Paste the snippet into the code box.
5. Give it a name such as 'Chatbot'.
6. Under 'Add Code to Pages' choose 'All pages' (or select specific pages).
7. Under 'Place Code in', select 'Body - end'.
8. Click Apply, then publish the site.

On the Wix Editor you can also add an 'Embed a site' or 'HTML iframe' element, but the Custom Code method is better for a floating chat bubble because it appears on every page without adding an element to each.

Which pages should show the chat?

A chat that appears everywhere is not always the best design. Think about what each page is for.

Page-level installation on each builder is described above. A simpler route is to install everywhere and use the widget's settings to hide it on chosen addresses, if your product supports that.

Testing after you publish

1. Open your live domain in a private or incognito window. Builders often hide custom code in edit mode.
2. Wait a few seconds for the chat bubble to appear.
3. Open the chat and ask two questions. Ask one that is not in your content and check the assistant says it does not know.
4. Run a test booking and lead and confirm that the emails and your dashboard show them.
5. Open the site on a phone and check the chat fits the screen.
6. Test on a slow connection if you can; the chat should not delay the page. See our piece on the performance of embedded chat widgets.

Risoluzione dei problemi

Colours, name and greeting

Set the widget to match your brand before you publish: colour, name, avatar and a specific greeting. Builders let you choose your own fonts and colours, so a widget that clashes is noticeable. A short greeting that states the job ('Ask about our services or book a time') works better than a generic one. Refine over time using what visitors actually type.

Keep the content in step with your site

Builders make it easy to change a price on a page and forget the chatbot. Whenever you edit prices, hours or policies, update the assistant's knowledge as well. If your chatbot reads your website address, re-index after edits. Review conversations weekly, as described in reviewing your chatbot's conversations.

Custom domains, HTTPS and mixed content

The chat script should always load over a secure connection. Modern builders serve your site over HTTPS by default, and reputable chatbot vendors serve their scripts the same way, so no action is needed. If you see a warning about mixed content, the snippet probably contains an address starting with http instead of https. Copy a fresh snippet from your dashboard rather than retyping it.

Using Google Tag Manager on a site builder

All three builders support Google Tag Manager. If you already use it, you can add the chatbot there as a Custom HTML tag with an 'All Pages' trigger. This gives you one place to add and remove scripts, and lets you connect the chat to your consent tool. If you do not use Tag Manager today, the platform's custom-code box is simpler and just as reliable.

Cookie consent and analytics on builders

Each builder has its own cookie banner tool. Widget storage and analytics scripts may need consent in some regions. Configure the banner to list the chatbot under the right category, and ask your vendor what is stored in the browser. Our GDPR checklist for website chatbots covers the questions to ask.

Shopify, Framer, Carrd and others

The same idea applies everywhere: find the site-wide footer code area and paste the snippet. In Shopify, edit the theme's main layout file and add it before the closing body tag. In Framer, use the site settings' custom code area for the end of the body. In Carrd, use an Embed element set to 'Code' with the placement at the end of the body. If a platform has no code area at all, it may not support third-party widgets; check before you choose a chatbot.

A five-minute go-live checklist for builders

1. Snippet copied fresh from the dashboard.
2. Pasted in the footer or 'end of body' box, once.
3. Site published, not just saved.
4. Live site opened in a private window, chat visible.
5. One real question, one unanswerable question, one booking, one handover tested.
6. Phone view checked.
7. Cookie and privacy notices updated to mention the chat.

If you would like to try the assistant before touching your site, the playground lets you upload documents and chat with no account. The help centre has product-specific guides.

Frequently asked questions

You can rehearse everything first in the Crescelo playground with no sign-up, then start a free trial to put the assistant on your site. The website widget page lists what you can customise.

Further reading

• Google Search Central: creating helpful, people-first content: What Google looks for in useful pages.