Table of Contents

Landbot in Squarespace

Pau Sanchez Updated by Pau Sanchez

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

Here is how to embed in for this style of embed

Pop up style

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.

Here is how to embed for this style of embed

Embed (container) style

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.

Here is how to embed for this style of embed

In case you want to embed Landbot as an iframe, here is how you can do it

Full page style

This style of embed is meant to use to cover the whole site

Here is how to embed for this style of embed

Embed Livechat or Pop Up

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
  1. Copy the snippet from the Share section
  2. Go to the desired page where you want to display the bot
  3. Hover and select the page Settings (wheel)
  4. The Page Settings screen will display select "Advanced"

  1. At the bottom will be a section to add code

  1. Paste the Snippet from Landbot Share Section in the block editor

  1. 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

  1. Go to "Settings" section
  2. Once there, select the "Advanced":
  3. And in now select "Code Injection":

  1. Scroll down until you see the Footer section:

  1. Now you can paste here the code for the bot that you want to display in the whole site:

  1. Press Save

Now you will be able to see the bot in all your pages:

Embed Container in a single Page

  1. Copy the snippet from the Share section
  2. Go to the desired page editor where you want to display the bot
  3. Press EDIT
  4. Now, hover until you see the marker to add a Content Block in the desired location

  1. Press de "rounded" mark to open the Content Block editor:
  2. The Content Block editor will open, scroll down to select CODE

  1. An editor will open to add the snippet, where we need to add the code, delete the sample code that is there:

  1. Past the snippet to add the code:

  1. Press "Apply"

  1. Now the area will be in the editor:

  1. 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

  1. First we need to create a new blank page, from the page section:
  2. Now select to Blank Page:
  3. Set a name for the new blank page

  1. Open the Settings of the page by pressing on the wheel next to the name:
  2. Once settings are open, select Advanced
  3. In this window we will see a section to add the code to embed:
  4. Now, let's go the Share section in Landbot , and select Full page:

  1. 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>

  1. Paste your code in the code section:
  1. Now we will add this snippet too, to hide the header that SquareSpace adds by default:
<style>.header {display:none!important;}</style>

  1. 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:

  1. We need to open the page where the button is located

  1. Select the button that you want to use as a trigger and press right click, and select "Inspect"
  2. A screen on the will display with HTML code,
  3. In blue will be highlighted the code of that element (the button)

  4. From here we need to copy and store the class that element:
    We just need, the first one "sqs-block-button-element--large"
  5. We will follow the instruction here to add the snippet for the livechat or pop up type of embed
  6. To that snippet we will add the code below:
<script>
        myLandbot.onLoad(function() {
             var bot_button = document.getElementsByClassName('XXXX')[0]
             bot_button.addEventListener('click', (event) => {
                  event.preventDefault();
                  myLandbot.open()
              });
         }) 
</script>

You will need to change the XXXX for the name of the class (sqs-block-button-element--large) we found earlier

So it will look like this:

That's it, now the user will be able to open the livechat or pop up bot, as soon as they click the button.

In case you want to "hide" the Widget/bubble, please check here

Open livechat as soon as page loads

In case you want to trigger a livechat or pop up as soon as the page is loaded, without user interaction, please check here

Customise widget/bubble look and feel

Finally, many design customisation can be done, please check them in this article

How did we do?

Contact