After creating and setting up your Assistant, you can either follow our instructions in the "Guide for Squarespace" found under the "Customization" tab of your AI Assistant settings, or you can follow these steps to add a Chat snippet to your Squarespace site:
Add Your Chat Bubble to Squarespace
Method 1: Add Your Chat Bubble to the Header or Footer in the Code Injection settings
Step 1: Copy the Code Snippet for the Chat Bubble
Log in to https://app.noform.ai/sign-in.
Click on your Assistant to open its settings
Go to the "Customization" tab
Open the "Installation" tab
Select "Bubble chat" and click "Copy code" to copy your Assistant's chat code snippet.
📝 A snippet is a JavaScript <script> element that will load and display the chat bubble on your website.
Step 2: Access Your Squarespace Dashboard and Go to Website Settings
Log in to your Squarespace dashboard.
Hover over your website, click three dots, and open "Settings".
Step 3: Paste chat bubble code to the Header or Footer
Open the Code Injection panel.
Add copied chat bubble code into the appropriate Code Injection fields for the header or footer.
📝 If you add the chat code to the Header, it will be added into the <head> tag on every page on your site.
If you add the chat code to the Footer, it will be added before the closing </body> tag on every page of your site.
Step 5: Save Changes and Make NoForm Chat Visible on Your Site
Click on "Save" to save the changes.
Step 6: Check Your Website
Check your website or page to ensure the chat snippet displays correctly. Double-check the code for errors and ensure it is placed correctly. If there are any issues, ensure it is placed in the correct location defined in Step 3 or contact us for support.
Method 2: Add Chat Bubble to Squarespace as a New Block by Editing Footer
Step 1: Copy the Code Snippet for the Chat Bubble
Log in to https://app.noform.ai/sign-in.
Click on your Assistant to open its settings
Go to the "Customization" tab
Open the "Installation" tab
Select "Bubble chat" and click "Copy code" to copy your Assistant's chat code snippet.
📝 A snippet is a JavaScript <script> element that will load and display the chat bubble on your website.
Step 2: Access Your Squarespace Dashboard and Go to Website Settings
Log in to your Squarespace dashboard.
In the top left corner, click the "EDIT" button in the "WEBSITE" or "Pages" section.
Scroll down to the "FOOTER" section. Hover over it and click "EDIT SITE FOOTER" button.
Click "+ ADD BLOCK" button.
Drag and drop a block to place it on the page.
Click "Edit" button.
Open the "Code snippet" tab and click "Embed data".
Step 4: Paste the Copied Bubble Chat Code to the Embed Data Block
Paste the chat snippet you copied from your Assistant into the HTML block on the page.
Step 5: Save Changes and Make NoForm Chat Visible on Your Site
Click "Save" button to save your changes.
Step 6: Check Your Website
Check your website or page to ensure the chat snippet displays correctly. Double-check the code for errors and ensure it is placed correctly. If there are any issues, ensure it is placed in the correct location defined in Step 3 or contact us for support.
How to Add Embedded Chat to Squarespace
Step 1: Copy the Code Snippet for the Embedded Chat
Log in to https://app.noform.ai/sign-in.
Click on your Assistant to open its settings
Go to the "Customization" tab
Open the "Installation" tab
Select "Embedded chat" and click "Copy code" to copy your Assistant's chat code snippet.
📝 A snippet is a JavaScript <script> element that will load and display the chat bubble on your website.
Step 2: Access your Squarespace Dashboard
Log in to your Squarespace dashboard.
Step 3: Add a New Block to Your Website by Editing Body
In the top left corner, click the "EDIT" button in the "WEBSITE" or "Pages" section where you want to add embedded chat.
Click the "+ ADD BLOCK" button.
Click the "</> Code" button.
Drag and drop a block to place it on the page.
Click "Edit" (pen) button.
Remove the default code
<p>Hello, World!</p>added by Squarespace.
Step 4: Paste the Copied Chat Code to the Embed Data Block
Paste the chat snippet you copied from your Assistant into the HTML block on the page.
Step 5: Save Changes and Make NoForm Chat Visible on Your Site
Click "Save" button to save your changes.
📝 As a security measure, sometimes your code won't appear when logged in, even if visitors can see it. If you can't see the code you added to a code block, click Preview in Safe Mode to view the embedded item.
Step 6: Check Your Website
Check your website or page to ensure the chat snippet displays correctly. Double-check the code for errors and ensure it is placed correctly. If there are any issues, ensure it is placed in the correct location defined in Step 3 or contact us for support.
These steps will help ensure your chat feature is correctly installed on your Squarespace site.
If you have any questions, please get in touch with our Support Team via live chat or email.