Table of Contents

Landbot in Wordpress

Ana Updated by Ana

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

To embed a Landbot in your Wordpress 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 are all the types of bots you can 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.

Option A: Embed Livechat or Pop Up in a single page/post
  1. Copy the snippet from the Share section
  2. Go to the desired page or post editor where you want to display the bot
  3. Select to Add a block
  4. Select the widget "Custom HTML"

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

  1. Update changes in your page/post, publish, and your bot will be ready

Option B: Embed Livechat or Pop Up in the whole site

  1. Install and activate "Simple Custom CSS and JS" plugin 
  2. Once is installed and active, you should select "Add Custom Html":
  1. Give it a name, delete all the default comments, and paste the embed code, from the Share > Embed section of the bot:

  1. Now the livechat bot will be ready in your whole site

Embed Container in Page/Post

  1. Copy the snippet from the Share section
  2. Go to the desired page or post editor where you want to display the bot
  3. Select to Add a block
  4. Select the widget "Custom HTML"

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

  1. Update changes in your page/post, publish, and your bot will be ready

As you can see, this type embed is located in the area where you added the block:

Note that you can customize the size by changing the snippet style sizes:

Embed Full Page

Creating a Page Template
  1. Install and activate the File Manager plugin
  2. Once installed, go to the "templates" folder of your current active theme and create a new php file:
  1. Then copy and paste the code below in the php file. Change the configUrl value to match the one in your embed snippet in the Share section of the bot:

<?php
/**
 * Template Name: Landbot Template
 * Template Post Type: page
 *
 */
?>

<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-744976-GT83E5XDO9O4COWN/index.json',
});
</script>

  1. After, create a new page in your Wordpress, and in Page Attributes select the file you created: "Landbot Template": 
  1. Then, change the url-slug as you wish:
  1. After that, type anything in your site, to make sure Wordpress allows you to Save the Draft and Publish it to View the new page with a Full Page Landbot and a custom URL.
Creating an HTML file

  1. First off all, once you have a saved Landbot, go to the “SHARE” section in the builder, click on the “EMBED INTO YOUR WEBSITE”, and select the FULL PAGE option.

  1. Install and activate the File Manager plugin
  2. Back to the Main dashboard, select WP File Manager, and click on WP File Manager, and a screen will display all your Wordpress files. Make sure you are in the public_html folder

  1. Now, click on New File icon

 

 

  1. Once the file is created, rename it, it’s important to know that this file will be part of the URL and it has to have an “.html” file extension, as you can see in the pictures below.
  1. An option to edit the file will display, otherwise, choose the icon to Edit the file

An editor will pop up, and is here where the code from Landbot will be pasted.

  1. So we will come back to Landbot, copy the source code for the Full Page option

Come back to Wordpress and paste code in editor, where we will paste the code, press Save & Close. You can come back after to edit it, if needed.

  1. To test that everything is ok, just edit the URL, adding the name of the file to the main domain and that’s it.

Now you will have a Full Page hosted with your WordPress Site and sharing the same base URL.

Useful plugins to install Landbot

WP File Manager: To access and edit files in your Wordpress (free and pro)

This plugin will allow you to easily browse your Wordpress files, more information here

Simple Custom CSS and JS: To add snippets in your whole site (free and pro)

This plugin will allow you to easily add custom scripts in your site, more information here

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. Create Custom Button
  2. Select Settings advanced
  3. Select Additional CSS Class and "bot_button"
  4. Now in the same HTML block where you added the bot snippet, right below add the following code
<script>
        myLandbot.onLoad(function() {
             var bot_button = document.getElementsByClassName('bot_button')[0]
             bot_button.addEventListener('click', (event) => {
                  event.preventDefault();
                  myLandbot.open()
              });
         }) 
</script>

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?

Embedding Landbot in Carrd

Landbot in Squarespace

Contact