How to add the ElevenLabs Conversational AI widget to Your Squarespace website

Looking to boost engagement and provide next-level customer support on your Squarespace website? ElevenLabs’ Conversational AI can help. 

This guide will walk you through the steps to add the widget to your Squarespace site, whether you want it on a specific page or across your entire website. It will also explain common issues you might encounter and provide you with troubleshooting tips to resolve these hurdles. 

Before you get started

Before starting, ensure you have the following:

1. Squarespace account: Access to a Business or Commerce plan, as these plans allow you to use Code Blocks and Code Injection.
2. ElevenLabs account: Configure your Conversational AI agent in ElevenLabs and copy the embed code (containing both < script > and < div > snippets).
3. Familiarity with Squarespace: Basic knowledge of adding blocks or navigating the Code Injection settings.

Step-by-step guide

Step 1: Prepare your ElevenLabs widget

1. Log in to your ElevenLabs account.
2. Go to the Conversational AI section and configure your AI agent.
3. Copy the embed code provided, which consists of:
4. • A < script > snippet to load the widget's functionality.
   • A < div > snippet to specify where the widget will appear.

Step 2: Add the widget using a code block

If you want the widget on a specific page or blog post, use a code block.

1. Navigate to the Squarespace page or post where you want the widget to appear.
2. Click the + symbol to add a block.
3. Select Code from the menu.
4. Paste the < div > snippet from the ElevenLabs embed code into the Code Block.
5. Save the block and ensure it is positioned correctly on the page.

Step 3: Add the script using Code Injection

To ensure the widget functions correctly, you need to include the < script > snippet using Code Injection.

1. From your Squarespace dashboard, go to Settings > Advanced > Code Injection.
2. Paste the < script > snippet into the Footer section.
3. Save your changes.

Note: The Footer section ensures the script is loaded across all pages, enabling the functionality of widgets added via Code Blocks.

Step 4: Publish and Test

1. Publish the page or post where the widget has been added.
2. Open your live website to verify the widget appears and functions correctly.Important: Custom code often doesn’t display in Squarespace’s editor preview—publish the page to test the integration.

Common issues and troubleshooting

If you’re struggling to get the integration working properly, don’t worry—these tips should help. 

Issue 1: Widget not displaying

• Cause: Missing or incorrectly placed < script > or < div > snippets.
• Solution: Ensure the < script > snippet is in the Footer Code Injection section and the
  snippet is correctly added to a Code Block.

Issue 2: Widget only partially visible

• Cause: Code Block size or layout conflicts.
• Solution: Adjust the block’s size and alignment. Use custom CSS if needed for precise placement.

Issue 3: Script errors

• Cause: Conflicting scripts or browser restrictions.
• Solution: Use the browser console (e.g., Chrome DevTools) to identify errors. Resolve script conflicts or check for CORS issues.

Advanced tips

Looking for more advanced customization options? Check out the tips below. 

• Customizing the widget: Use custom CSS in the Squarespace Design > Custom CSS section to style the widget. Adjust colors, fonts, or placement to align with your site’s design.
• Testing across devices: Test your site on different devices (desktop, tablet, and mobile) to ensure the widget scales and functions correctly on all screen sizes.
• Adding widgets to multiple pages: To include the widget on several pages, repeat the Code Block process for each page and ensure the script is active in the Code Injection Footer.

Final thoughts

Adding the ElevenLabs Conversational AI widget to your Squarespace website is a simple way to enhance interactivity and engagement. Whether you’re embedding it on a single page or across your entire site, Squarespace’s Code Blocks and Code Injection features make integration seamless. 

Follow this guide step-by-step, test your setup thoroughly, and enjoy the benefits of conversational AI on your website. For further assistance, reach out to ElevenLabs support. 

Or, if you haven’t already, sign up for Conversational AI today.