Table of Contents

Landbot in Wordpress

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 Wordpress site

Landbot Share section and types of embed styles for you Wordpress

Share section

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 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/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

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 customise the size by changing the snippet style sizes:

Embed Full Page

Creating a Page Template
  1. Install and activate the File Manager plugin
  2. To do that, you simply need to reach the "templates" folder of your current active theme:
  1. Then create a new php file:

Here is the sample code:

<?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. Change the configUrl to match the one in your embed snippet in the Share section of the bot.After, create a new page in your Wordpress, and select the "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 in 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?

Contact