How to Add Asyntai AI Chatbot to Squarespace

Step-by-step guide for Squarespace websites

Platform:

Step 1: Get Your Embed Code

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Note: The code above is just an example. You must copy your own unique embed code from your Dashboard as it contains your personal widget ID.

Step 2: Add Code Using Code Injection

If your site is on a Squarespace Core, Plus or Advanced plan (or an older Business or Commerce plan), you can add the chatbot to all pages at once using Code Injection:

Log in to your Squarespace account and open your site
Click Pages in the left panel
Click Custom Code at the bottom of the panel
Click Code Injection
Scroll down to the Footer section
Paste your Asyntai embed code in the Footer text box
Click "Save"

Note: On Squarespace 7.0, Code Injection is under Pages → Website Tools.

Tip: Adding the code to the Footer section places it just before the closing </body> tag, which is the recommended placement for chat widgets and won't slow down your page loading.

Alternative: Using Code Blocks

To add the chatbot to specific pages only, you can use Code Blocks. A Code Block runs JavaScript only on a Core, Plus or Advanced plan (or an older Business or Commerce plan).

Open your site in the Squarespace Editor
Navigate to the page where you want to add the chatbot
Click "Edit" on the page
Hover over a section and click "+ Add Block"
Scroll down and select "Code"
Click the pencil icon to edit the code block
Paste your Asyntai embed code
Make sure the Mode menu of the block is set to HTML
Click outside the block to close the editor
Click "Save"

Important: When using Code Blocks, you'll need to add the code to each page where you want the chatbot to appear. For site-wide installation, use the Code Injection method above.

Step 3: Verify Installation

After saving your changes, open your website in a new browser tab or incognito window. You should see the chat widget button in the bottom right corner. Click it to make sure it opens and works correctly.

Not seeing the widget? Make sure you've saved and published your changes. Try clearing your browser cache or viewing your site in an incognito window. Squarespace may take a few minutes to apply code changes. Code sometimes does not run while you are logged in to Squarespace, so check the site in a private window.

Adding the AI Search Bar

The AI Search Bar is a separate widget with its own code. Add it as well as the chat widget, or on its own. It needs the Standard plan or higher: on a lower plan the bar appears but never returns results.

Add the data-replace attribute to the script tag and the bar takes the place of the one your theme already has. Add it under Pages, Custom Code, Code Injection, Footer, the same place as the chat code. Squarespace only offers Code Injection on a Core, Plus or Advanced plan (or an older Business or Commerce plan), so you need one to install this.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>