Integration Guide
Widget Deployment for Squarespace
This guide is for Squarespace sites on a Core plan or higher, with an active LastBot ONE account and a configured bot. Code Injection requires a Core plan or above, it is not available on the Basic plan.
Before you begin
- •An active LastBot ONE account with a published bot
- •A Squarespace site on a Core plan or higher
- •Access to your Squarespace site settings and page editor
How the widget works on Squarespace
- Code Injection runs on every page of your site and is used for the popup widget.
- A Code Block added inside a page runs on that page only and is used for the embedded widget.
- Popup widget: a floating chat bubble visitors click to open.
- Embedded widget: placed inside a specific section of your page, always visible with no open or close button.
Part 1: Popup widget
The popup widget appears as a floating chat button in the corner of your page. Visitors click it to open and close the chat.
1
Get your embed code from LastBot Hub
- Log in to your LastBot Hub and open your bot.
- Click Publish in the top-right corner.
- The "Let's go live!" dialog opens. Select Popup widget.
2
Configure the widget
Under Step 1: Configure Widget Settings in the Hub.
- Auto Open: toggle on to open the chat automatically when a visitor loads the page.
- Full Screen: toggle on to expand the chat to the full browser window.
- The embed code updates automatically as you change these settings.
3
Copy the code
- Under Step 2: Copy and Paste the Generated Code, click Copy.
4
Add the widget to all pages
Recommended option for the popup widget.
- Go to your Squarespace site and click Edit Pages from the site overview.
- In the left panel, scroll down to Custom Code and click Code Injection.
- Scroll to the Footer section and paste your copied code into the Footer field.
- Click Save.
5
Hide the popup on one specific page (advanced)
Use this when one page already has an embedded widget and should not show the popup.
- Find the URL slug of the page to exclude, for example /services-store.
- In LastBot Hub, open the popup widget code and note the base-url and widget-id values.
- Use the snippet below, replacing the three placeholders with your slug, base-url, and widget-id.
- Paste the completed code into Code Injection, Footer, and click Save.
<script>
if (window.location.pathname !== "<PATH-TO-EXCLUDE>") {
var s = document.createElement("script");
s.defer = true;
s.src = "https://assets.lastbot.com/lastbot-chat.js";
document.body.appendChild(s);
var w = document.createElement("div");
w.setAttribute("data-lastbot", "");
w.setAttribute("data-base-url", "<YOUR-BASE-URL>");
w.setAttribute("data-widget-id", "<YOUR-WIDGET-ID>");
document.body.appendChild(w);
}
</script>Use the same script URL that appears in your own Hub embed code. The popup widget will then appear on every page except the one you specified.
6
Verify
- Squarespace saves and publishes automatically, there is no separate publish step.
- Open your live website URL in a private browser window.
- The chat button should appear in the bottom corner of the page.
- Click it and send a test message to confirm the bot responds.
The widget will not appear while you are logged in and viewing your own site. Always verify on the live URL in a private window.
Part 2: Embedded widget
The embedded widget is placed inside a specific section of your page. It has no open or close button and is always visible within the area you choose.
1
Get your embed code from LastBot Hub
- Log in to your LastBot Hub and open your bot.
- Click Publish in the top-right corner.
- Select Embedded widget in the dialog.
2
Configure the widget
- Maximum height: the maximum height the widget grows to before scrolling internally. Default is 600px.
- Avatar and welcome message: choose Normal, Small, or Hidden.
- Hide avatar and welcome message after the first message: tick this to give more space to the conversation.
3
Copy the code
- Under Step 2: Copy and Paste the Generated Code, click Copy.
4
Add the widget to your page
- In the Pages panel under Main Navigation, click the page where you want the widget.
- Click Edit to open the page editor.
- Scroll to the section where the widget should sit and click Add Block.
- In the block picker, scroll to the Code section and click Code.
- Place and resize the block, then make sure Mode is set to HTML.
- Paste your copied embed code into the editor, click Apply, then click Save in the top bar.
The block shows "Script Disabled" while editing. This is normal, the widget only runs on the live page.
5
Verify
- Open the live page URL in a private browser window.
- The chat widget should appear inside the section where you placed the code block.
- Send a test message to confirm the bot responds correctly.
Troubleshooting: popup widget
- Open the live URL in a private browser window to avoid cached versions.
- Verify your Squarespace plan is Core or higher. The widget will not load on the Basic plan.
- Confirm the code is in Code Injection, Footer, not the Header field.
- Temporarily disable ad blockers or privacy extensions and reload.
Troubleshooting: embedded widget
- Open the live URL in a private browser window. The widget does not display while you are logged in and editing.
- Verify your Squarespace plan is Core or higher.
- Confirm the code editor Mode is set to HTML, otherwise the code will not execute.
- Check that the section containing the code block has enough height. If the area appears blank, try resizing the block.
- Temporarily disable ad blockers or privacy extensions and reload.
Limitations
- •Basic plan users: Code Injection is not available. Upgrade to Core or higher before adding any widget.
- •The widget only loads on the live published site, it will not appear while you are logged in and editing.
- •Some ad blockers and privacy extensions block chat widgets from loading.
Need help?
Contact your LastBot account manager or reach out to our support team.