Table of Contents

Landbot in your web with Google Tag Manager

Pau Sanchez Updated by Pau Sanchez

All that you need to know to add a Landbot to your site with Google Tag Manager

Landbot Share section and types of embed styles for you site with Google Tag Manager

Share section

To embed a Landbot in your site with Google Tag Manager, 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

  1. Make sure Google Tag Manager is installed in your site correctly.

  1. Now select Tags:

  1. Press NEW:

  1. Name the the Tag:

  1. Select to Edit the Tag Configuration and select Custom HTML:
  2. Now, in Landbot go to the Share section and select the type of embed and press COPY
  1. Paste the code snippet in the Tag Configuration:
  2. In the snippet that you just pasted, search for this part: "SameSite="None; Secure"
  3. Now delete it, so it will look like this:
  4. Now, select to edit the Triggering:
  5. In this case we will use the All page default trigger. Feel free to set up the trigger as you need

  1. Now that Tag Configuration and Tag Triggering are set you can press SAVE
  2. Now your new tag is ready to be Submitted:

  1. Press Submit and Publish:

Follow to confirm the publication, and Landbot will be ready to be displayed in your site:

Embed Container in a single Page

This type of embed allows you to specify with a simple <div> tag with a specific ID where fo you want to display the bot. It can be empty if you prefer, and load the script through GTM. To do that:

  1. Go to the snippet from the Share section
  2. From this snippet we will take only the div that we want to add directly in our site:
  3. Add such div to your site:

  1. Make sure Google Tag Manager is installed in your site correctly.

  1. Now select Tags:

  1. Press NEW:

  1. Name the the Tag:

  1. Select to Edit the Tag Configuration and select Custom HTML:
  2. Now, in Landbot go to the Share section and select the type of embed and press COPY
  1. Paste the code snippet in the Tag Configuration:
  2. In the snippet that you just pasted, search for this part: "SameSite="None; Secure"
  3. Delete it, and now look for the div we used earlier and delete it too, os the snippet would look like this:
  4. Now, select to edit the Triggering:
  5. In this case we will use the All page default trigger. Feel free to set up the trigger as you need

  1. Now that Tag Configuration and Tag Triggering are set you can press SAVE
  2. Now your new tag is ready to be Submitted:

  1. Press Submit and Publish:

Follow to confirm the publication, and Landbot will be ready to be displayed in your site:

Embed Full Page

  1. Make sure Google Tag Manager is installed in your site correctly.

  1. Now select Tags:

  1. Press NEW:

  1. Name the the Tag:

  1. Select to Edit the Tag Configuration and select Custom HTML:
  2. Now, in Landbot go to the Share section and select the highlighted script part only

<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-755911-4I87V73IPEZVFNMC/index.json',
      });
    </script>

  1. Paste the code snippet in the Tag Configuration:
  2. In the snippet that you just pasted, search for this part: "SameSite="None; Secure"
  3. Now delete it, so it will look like this:
  4. Now, select to edit the Triggering:
  5. In this case we will use one that load for a specific URL

  1. Now that Tag Configuration and Tag Triggering are set you can press SAVE
  2. Now your new tag is ready to be Submitted:

  1. Press Submit and Publish:

How did we do?

Landbot in Wix

Landbot in Webflow

Contact