All that you need to know to add a Landbot to your Squarespace site
Landbot Share section and types of embed styles for you Squarespace
Share section
To embed a Landbot in your Squarespace site, first you need to go the Share Section of your bot and then select which type of bot style would you like to embed. Below is all the types of bots you can embed:
Livechat style
This style, is the most common and is meant to cover a small area (unless is mobile) on the right side of the screen once the user triggers it
The pop style is recommended when you want to display the bot based on a trigger (click on the widget/bubble) by the user, like the livechat embed, but covering most of the screen.
This style is recommended when you want the bot displayed in a specific part of the bot and being displayed only when the user scrolls to a specific area. Like for example a Hero section. It allows you to set up custom width and sizes.
There are two possible approaches to embed a livechat or pop up type, one that will be in a single page/post or another way to embed it for the whole site:
Embed Livechat or Pop Up in a single page
Copy the snippet from the Share section
Go to the desired page where you want to display the bot
Hover and select the page Settings (wheel)
The Page Settings screen will display select "Advanced"
At the bottom will be a section to add code
Paste the Snippet from Landbot Share Section in the block editor
Press "Save" to make sure the changes are stored correctly
Now you will be able to see the bot in your page:
Embed Livechat or Pop Up in the whole site
Go to "Settings" section
Once there, select the "Advanced":
And in now select "Code Injection":
Scroll down until you see the Footer section:
Now you can paste here the code for the bot that you want to display in the whole site:
Press Save
Now you will be able to see the bot in all your pages:
Embed Container in a single Page
Copy the snippet from the Share section
Go to the desired page editor where you want to display the bot
Press EDIT
Now, hover until you see the marker to add a Content Block in the desired location
Press de "rounded" mark to open the Content Block editor:
The Content Block editor will open, scroll down to select CODE
An editor will open to add the snippet, where we need to add the code, delete the sample code that is there:
Past the snippet to add the code:
Press "Apply"
Now the area will be in the editor:
Press DONE and Save
Now you will be able to see the bot in you page:
Note that you can customise the size by changing the snippet style sizes:
Embed Full Page
First we need to create a new blank page, from the page section:
Now select to Blank Page:
Set a name for the new blank page
Open the Settings of the page by pressing on the wheel next to the name:
Once settings are open, select Advanced
In this window we will see a section to add the code to embed:
Now, let's go the Share section in Landbot , and select Full page:
Out of all the code, we will only copy the scripts part:
Like this example:
<script SameSite="None; Secure" src="https://static.landbot.io/landbot-3/landbot-3.0.0.js"></script> <script> var myLandbot = new Landbot.Fullpage({ configUrl: 'https://chats.landbot.io/v3/H-750182-BQC0WY5BZTEOWHG6/index.json', }); </script>
Paste your code in the code section:
Now we will add this snippet too, to hide the header that SquareSpace adds by default:
<style>.header {display:none!important;}</style>
Press Save:
Now you will have a full page Landbot in this specific page:
Add extra customisations and behaviours:
Open livechat/pop up with click on a button
In a case that you want the user to be able to trigger a bot with the click of a custom built button. To make this happen, we need to set up a unique button, and find out it's class name, to do so:
We need to open the page where the button is located
Select the button that you want to use as a trigger and press right click, and select "Inspect"
A screen on the will display with HTML code,
In blue will be highlighted the code of that element (the button)
From here we need to copy and store the class that element: We just need, the first one "sqs-block-button-element--large"
We will follow the instruction here to add the snippet for the livechat or pop up type of embed