Table of Contents

Landbot in Webflow

Pau Sanchez Updated by Pau Sanchez

Prefer watching than reading? No problem, we've got you covered 👇

All that you need to know to add a Landbot to your Webflow site

Landbot Share section and types of embed styles for you Webflow

Share section

To embed a Landbot in your Webflow 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 "Edit page settings"
  4. Scroll down until you reach the section "Before </body> tag"

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

  1. Press "Save" to make the changes are stored correctly

Bear in mind that the bot/widget won't be previewed in the Webflow Editor

  1. Finally Publish your changes

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

Embed Livechat or Pop Up in the whole site

  1. Go to "Project Settings" section
  2. Once there, select the "Custom Code" tab:
  3. Scroll down until you see the Footer Code:

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

  1. Press Save Changes
  2. Scroll up, and press PUBLISH:

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. Select Add Elements
  4. Scroll down and pick "EMBED"

  1. The block will place at the bottom and show you a space to add the bot snippet

  1. Past the snippet to add the code:

  1. Press "Save & Close"

  1. Now select the Element, and move it to the desired place in the page editor:

Bear in mind that the bot won't display in the editor, only once is published

  1. Press Publish

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 Add a new page, the icon on the right side:
  3. Set a name and press Create:

  1. A blank page will be created. Please now go to the settings of this new created page:
  2. Scroll down until you see the "Before </body> tag":
  3. 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 "Before </body> tag" section:
  1. Press Save:
  2. Press Publish:

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, here is how you can do it:

  1. Select the button that you want to use as a trigger
  2. On the right side of the screen, select "Element Settings":
  3. Now we will add a specific "ID" to this button, for this example will be "bot_button"
  4. We will follow the instruction here to add the snippet for the livechat or pop up type of embed
  5. To that snippet we will add the code below:
<script>
        myLandbot.onLoad(function() {
             var bot_button = document.getElementById('bot_button')
             bot_button.addEventListener('click', (event) => {
                  event.preventDefault();
                  myLandbot.open()
              });
         }) 
</script>

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