Table of Contents

Landbot Livechat & Pop Up Widget in Wordpress

Pau Sanchez Updated by Pau Sanchez

METHOD 1: Simple embed

 If you are interested to add a Landbot widget in every page of your Wordpress Site. Here we will show how in 5 easy steps, without any hard coding, you can easily do it yourself.

  1. Wordpress Admin dashboard

Now, come back to your Wordpress Admin Dashboard, select “Plugins” and click on “Add New”

  1. Install the "Simple Custom CSS and JS" plugin

We will use a Plugin, that helps to add in a more easy and convenient way the code. Is called "Simple Custom CSS and JS" https://wordpress.org/plugins/custom-css-js/

Install it and active it

  1. Add Custom HTML

Once is installed and active, you should select "Add Custom Html":

  1. Edit Custom HTML

Give it a name, delete all the default comments, and paste the embed code, from the Share > Embed section of the bot:

  1. Save and Update, and check your site

Now the livechat bot will be ready in your site

Method 2: Editing Wordpress Theme Files

  1. Open your Wordpress Admin Dashboard, select “Plugins” and click on “Add New”:

  1. We will install a plugin called File Manager, which will give you access to the stored files.

 

Once is installed, activate it.

  1. Go back to the Main dashboard, select WP File Manager, and click on WP File Manager option of the dropdown menu. This action will display all your Wordpress files.

  1. Select the wp-content folder

 

  1. Select the themes folder and open the folder that contains your current theme:

  1. Go to header.php file

  1. Open the header.php file with the Edit icon (An option to edit the file will display, otherwise, choose the icon to Edit)

  1. An editor will pop up. It will be used later on to paste the bot's widget code.

  1. Find the end of the head section (were the closing tag is located).

  1. Go to Landbot and copy the Live chat code.

  1. Return to Wordpress and paste the code

Now back to the Wordpress editor, we will paste the code right after the </head> tag, and press Save & Close. You can come back after to edit it, if needed.

  1. Click Save & Close

  1. All set 🙌 Your brand new widget should be displayed like in the example bellow:

Troubleshooting

If you are using any caching plugin (like “W3 Total Cache” or “WP Fastest Cache”), then don’t forget to delete the cache before seing the code printed on the website.

Make sure the code is in Published state (not Draft or in Trash).

Check if the wp-content/uploads/custom-css-js folder exists and is writable

How did we do?

Export flow on canvas as PNG

Embed in Sharetribe

Contact