Adding AI live chat to a Squarespace site with Code Injection

Add AI live chat to a Squarespace site with Code Injection

This guide shows how to add AI live chat to a Squarespace site using Code Injection (Business plan or higher). It covers the embed snippet, testing content answers, and handing conversations to humans. An embed by itself does not grant access to private store orders.

Before you start — checklist

• You have a Squarespace site on Business plan or higher.
• You can access Code Injection in your Squarespace site settings.
• You have access to your public help articles and product pages for training the bot.
• You know whether you need cookie consent on your site (GDPR, CCPA, etc.).

SuperBot supports the Code Injection install and provides cited answers from business content, a shared team inbox, lead capture, booking through Calendly or Cal.com, and analytics. Private order lookups require a separately connected, read-only store integration; check the available connection for your site before promising order answers.

1. Pick an AI chat provider and prepare your content

• List the exact tasks you want the chat to do: answer FAQs, capture leads, book appointments, or hand off to an agent. Add order lookup only after confirming a supported store connection.
• Gather the content you want the AI to train on: product descriptions, help-centre articles, shipping and returns policy, and public order lookup instructions.
• Confirm provider capabilities: the languages you need, citations, and human handoff with full transcripts. Check store access separately if you need order answers.

If you use appointment booking, check that the bot integrates with Calendly or Cal.com. Also confirm analytics available (resolution rate, CSAT, sentiment, knowledge gaps).

2. Create and configure the bot

• Sign up with the chosen provider and create a new bot for your site.
• Upload or point the bot to your help articles and product pages so it can train on your actual content. Aim for clear, canonical pages (product pages, support docs).
• Set conversational flows for common requests: greetings, shipping, returns, product availability, and order lookup. Keep flows short and specific.
• Configure handoff rules: when a conversation should go to a human agent (e.g., negative sentiment, repeated unanswered questions, manual request).
• If a supported order connection is configured, require the order number and matching customer email before revealing limited details. A matching email alone is not strong identity verification.

Keep answers concise and include citations to your own help pages where the bot can link back to the source.

3. Get the embed snippet

• In the bot provider dashboard, find the site-specific embed snippet or script tag. It typically looks like a short JavaScript snippet you drop into your site.
• Note whether the provider instructs you to place the snippet in the header or footer, and use its exact instructions.
• Copy the snippet.

4. Install on Squarespace using Code Injection

• In Squarespace site settings, open Code Injection (the menu location can vary by site version).
• Paste the snippet into the Footer or Header field specified by the provider.
• Save changes.

If you need the chat on selected pages, check the provider's page-level installation instructions before adding a second copy of the script.

5. Configure widget appearance and behavior

• Most providers let you tweak position (bottom-right vs bottom-left), welcome message, and colors in their dashboard. Match your brand colors and tone.
• Set mobile behavior: test the widget on phones and tablets, ensure it doesn’t cover essential buttons or the checkout CTA.
• If the widget offers a compact icon vs. full preview, choose the compact icon for smaller screens.

If you need custom styling, some providers let you add CSS overrides inside their dashboard or via additional CSS in Squarespace.

6. Privacy and legal checks

• If the bot logs user messages or personal data, you may need cookie consent. Connect the bot’s cookie to your consent manager or show a brief notice before collecting personal data.
• If you connect private order data, confirm the connection is read-only and requires an order number plus matching email before showing limited details.
• Update your privacy policy to mention the chat bot and what data it collects (transcripts, email lookups, analytics).

7. Test thoroughly

• Test in incognito and while logged out to simulate a real visitor.
• Test order lookup only if a supported store connection is active. Use test orders with correct and incorrect email matches.
• Test handoff flows: escalate to a human, check the shared team inbox for the full transcript and that agents can reply.
• Test on multiple devices, multiple browsers, and on a slow connection.
• Test the Calendly/Cal.com booking flow if you use appointments.

Also test for script blockers and ad blockers. If the widget fails to load, it’s often due to third-party blockers or incorrect snippet placement.

8. Set up your team and reporting

• If you use SuperBot, its plans include unlimited team members; add the people who will handle chat handoffs.
• Train your human agents to use the shared inbox, pick up handoffs, and edit bot responses where gaps appear.
• Monitor analytics: track resolution rate, CSAT, sentiment, and knowledge gaps. Use knowledge gap reports to add missing support articles or improve bot answers.

Make a short feedback loop: reviews from agents and analytics should feed back into bot training weekly.

9. Troubleshooting tips

• Widget doesn’t appear: clear cache, disable script blockers, confirm snippet is in Footer Code Injection and saved.
• Bot answers are wrong: add more supporting pages to the training set or create an explicit canned response in the dashboard.
• Order lookup failing: confirm a supported read-only store connection is active and test the order-number and email match.

Deployment notes for stores

• The chat should never write to your store (no changes to inventory or orders). Confirm the provider’s access is read-only.
• For order privacy, require the order number and matching email before showing limited status fields.
• Keep support flows separate from checkout flows to avoid disrupting conversions.

What to do this week

• Create the bot account and upload your support articles and product pages for training.
• Copy the provider’s embed snippet and add it to Squarespace Settings > Advanced > Code Injection (Footer).
• Test cited answers and human handoff on desktop and mobile. Test order lookup only if your store connection is active.
• Add at least one team member to the shared inbox and review the first 10 conversations to spot knowledge gaps.