EngagerBot

WordPress Chatbot Embed: No Code Tutorial | Landbot

There are four different ways to embed your bot in WordPress.

First:

We’ll discuss how to display embed option works using the custom HTML widget from WordPress.

Second:

We’ll discuss how you can have a full-page bot in one of your pages fixing the small issue that the HTML widget from WordPress has on the full-page display option.

Third:

We will discuss how easy it is to display a pop-up and live chatbot.

Fourth:

We’ll discuss you how you can have a live chat that is present on all the pages of your website.

First part: the embed option. Let’s just finished your bot and it’s finally ready to be published, go to share and copy the embed code, go to WordPress and check where you want the bot to be on your site. As you can see, this site is far from amazing, but it will do to show you how it works. Let’s say I want it here inside this red container now select the custom HTML widget and drag it inside paste, the code we copied earlier, and let’s preview. Let’s say I want the bot a bit higher, you can edit the code, so let’s change the height to 700 pixels, instead publish and great awesome. I like it up next, a full-page bot.

Second part: A full-page bot can be used as your landing page or as a complement to your site, but to do it properly, can be a bit tricky. You could do it like. We just did with the embed by grabbing the custom, HTML widget and pasting the full-page code there, but that has an issue first, it will display the theme that you have on that page and right after the full-page land button. It’s very quick, but it’s noticeable, as you can see when you refresh the site, pause, you’ll, see the page and right after the loading of the bot. We can agree that not very cool, so to avoid that what we can do is create a page template with a full-page code inside it may sound difficult, but it’s not installing a plugin inside WordPress called wp file manager once installed, go to templates and Create a new PHP file once created click on edit. What we need to do now is copy the text in landbot’s help section and paste the text in the PHP file, what you need to do now is change the configuration URL to the correct one, go to lambot and copy that same part of your embed, full-page code and just replace it with the one that is already there save the file. Now you will have a page template that will load the full page bot instantly without delay to link into one of your pages go to the settings menu on your page and in the page, attribute select the file we just created, let’s publish, and there you have it Next up a popup and live chat.

Third & Fourth part: We group them together since there is zero difference in embedding one or the other, so I’ll copy the pop-up code with the pop-up and live chat. It’s very easy! You just need to grab the custom. HTML widget put it wherever you want on the page and paste the code there, but we want things organized so I recommend having the HTML widget down at the bottom of the page and there you have it. Let’s move into having a live chat that is spreading. For all the pages of your website, I’ll do it with the live chat code, but it’s the same with the pop-up so copy. The code in landbot go back to WordPress and install a plugin called simple custom CSS and JavaScript once installed select, add custom HTML, give it a name like landbot live chat.

Now just delete the comment and paste the code, let’s publish and there you have it now. Your live chatbot will be ready on your whole site.

Read More: Chatbots in Microsoft Teams | Build with Power Virtual Agents

Leave a Comment

Your email address will not be published. Required fields are marked *