How to embed Leadoo bots

Leadoo Help Center


How to embed Leadoo bots

June 13, 2022

How to add Leadoo Chatbots / CTA bots to your website?

Implementing Leadoo is extremely easy. Simply add the Leadoo bot script to your website header or the pages of your choice. You can also implement the chatbots to your website by using Google Tag Manager.

Adding script through a CMS (e.g. WordPress)

1. Open Leadoo admin panel and open the chatbot or CTAbot section. Click the blue “Add to site” button.

Näyttökuva 2022 4 14 kello 13.17.23 How to embed Leadoo bots

2.  Select and copy the script you want to use on your site.

Näyttökuva 2022 4 14 kello 13.18.08 How to embed Leadoo bots

3. Go to your CMS and add the script to the place of your choosing.

We recommend placing the script within the <head> tags of you websites global header. This allows the triggering of the chat to be managed fully through your Leadoo platform and you never have to add any other Chat / CTA scripts. <head> tags can usually be found from the site’s “Theme editor” (within header.php file).

Alternatively, you can copy paste the script within <body> tag of each page you want the bot to appear in.  The content of <body> is often accessible through the pages’ html (text) editor.

Adding script via Google Tag Manager

We advice you not to embed any Leadoo scripts through Google Tag Manager

  • 30% – 50% of internet users in US and Europe use ad blockers. Ad blockers block all scripts loading from GTM
    (Source: https://www.statista.com/statistics/351862/adblocking-usage/)
  •  If you embed scripts through GTM, Leadoo bots won’t be visible to those who use ad blockers. That means that third, or even half, of your visitors can’t have conversations with bots. And that of course means less conversions and smaller ROI.

  1. If you choose to embed via GTM, start by following the steps 1-2 above the find the script from your Leadoo platform.
  2. On Google Tag Manager create a “Custom HTML” tag and set it to fire on All page views.

Näyttökuva 2022 4 14 kello 13.29.16 How to embed Leadoo bots

3. Name & publish the tag

How to embed Leadoo InpageBot and VisualBot

When you are embedding an InpageBot / VisualBot, you have multiple options to choose from to find the way to embed, that fits you best. 

Both bot types are embedded similarly.

We recommend using the Dynamic Embedding method when embedding InpageBots and VisualBots. That way you can manage the bots on your website directly from Leadoo’s platform and you don’t need to access you CMS anymore every time you want to change the bots on your website. 

How Dynamic Embedding works? 

Basically you create slots on your website (eg. Blog-post-slot & Front-page-slot-footer) and then you decide on Leadoo platform, which bot goes in to which slot. Now when you want to update all your blog post bots, you don’t have to change all those manually, but instead you just select different bot to be shown on that specific slot. 

How to create Bot Slots

Go to Conversation Kit -> General Bot Settings -> Bot Slots
After that create your slots. After creating slots that you want to use on your website, save the slots. After saving, slots will be shown in alphabetical order to help you find them easier.

Näyttökuva 2022 6 13 kello 10.56.51 How to embed Leadoo bots

Naming bot slots

Use URL:s to name the bot to make it easy to find and understand where the slot is used.
If you use bot slots in multiple pages, use same naming logic as in chatbots (wilcards / ie. *leadoo.com/*)

Other way of naming slots is like in the picture above ie. “Front-page-header” etc.

Note! IF you rename the slot, it will change the slot as well. So don’t rename the slots after embedding them.

  • If you do rename them, you can always rename them back to what they were to fix this issue.

Adding bots to your Bot Slots

After creating your bots and bots slots, you’re now able to select which bot goes in to which bot slot. Open ie. the bot you’ve created for you blog posts. Go to triggers page and there select that this bot is used in Blog-post-slot. Use only one bot for each slot. After that save the bot settings and your bot will be shown on all the pages you’ve embedded blog-post-slot. 

Näyttökuva 2022 6 13 kello 11.57.13 How to embed Leadoo bots

*If you don’t see the bot slot dropdown on Triggers page, make sure you’ve selected Dynamic Embedding as the embedding method

Näyttökuva 2022 6 13 kello 11.57.31 How to embed Leadoo bots

Embedding slots to your website

Now you can copy the slots from Leadoo platform and add them to your CMS. (If you haven’t selected any bots to be seen on those slots yet, nothing will go live, so you can do this even before making the bots.)
Remember to add the Leadoo dynamic bot script (found in individual bot settings -> code) to your website header. This enables bot slots to work on your site.

Näyttökuva 2022 6 13 kello 12.49.56 How to embed Leadoo bots
Screenshot 2021 01 18 at 13.59.48 How to embed Leadoo bots

If you are a developer or advanced user, you can also click “Show the full list of code” to see all possible options available. 

Screenshot 2021 01 18 at 14.00.57 How to embed Leadoo bots

Step1: Copy the code

Click the “copy” icon to get the code to your clipboard.

Näyttökuva 2022 6 13 kello 12.54.44 How to embed Leadoo bots

Alternatively, you can paint the code and copy it with your keyboard. You can always find the user instruction at the end of the code generator. 

Screenshot 2021 01 18 at 14.02.10 How to embed Leadoo bots

Step 2: Open your website management tool.

Once you have the code copied, you can go to your website management. If you are using WordPress, the easiest way to embed the bot is to go to your editor. In this example we are embedding with Elementor. But this logic works for any other website management system.

Step 3: Embed the code.

Choose the section where you want to embed the bot. Click on it to open it.

Screenshot 2021 01 18 at 14.03.34 How to embed Leadoo bots

In the Text Editor you can see the visual editor and the text editor. What you want to do, is to work in the Text Editor because this is a HTML site of the website and this is where the bot will go. Switch to the text site and go to the place where you want to put the Bot.

Screenshot 2021-01-18 at 14.04.20
Add a little bit of space between the text and the bot code. Copy-paste the Bot to where you want it to show.
Näyttökuva 2022 6 13 kello 12.58.07 How to embed Leadoo bots

Update the page to see the end result.

Embedding with Simple script

If you want to embed your Visualbots or Inpagebot using simple script, you can follow the same steps as you would with dynamic embedding. Only difference would be picking a different code. You also don’t have to create bot slots.

Click the “copy” icon to get the code to your clipboard. After this you can move on to Step 2

Screenshot 2021 01 18 at 14.01.36 How to embed Leadoo bots

Using Page Performance tools on your page

Leadoo bots are much smaller than many other embedded tools you may be using on your site. We take extra steps to ensure that the bots themselves are small (transfer-size wise) and don’t impact page load performance. We also ensure that our caching rules are flexible enough to allow for caching on the browser-side so that subsequent navigations through your site don’t incur extra transfer costs in downloading our bot(s) more than once.

Leadoo uses a CDN (Content Distribution Network) to store cached copies of our bots close to all of our potential users.

Due to these features, Leadoo strongly recommends against attempting to improve page performance by including third party tools or custom tweaks to improve the performance of our bots. Doing so will, in most cases, result in a less efficient setup or our bots simply failing to run.

More information can be found on https://docs.leadoo.io/docs/config-page-performance

Did you find this article helpful?
3 out of 4 found this helpful

Related Stories