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.
2. Select and copy the script you want to use on your site.
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.
- If you choose to embed via GTM, start by following the steps 1-2 above the find the script from your Leadoo platform.
- On Google Tag Manager create a “Custom HTML” tag and set it to fire on All page views.
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 -> Dynamic Embedding
To create your first bot slot, click on + Add new bot slot. Once you click save the slots will automatically sort into alphabetical order to help you find them easier.
Naming bot slots
Use URLs to name the bot to make it easy to find and understand where the slot is used.
If you use bot slots on multiple pages, use the same naming logic as in chatbots (wildcards / ie. *leadoo.com/*)
Another way of naming slots is like in the picture above ie. “Front-page-header” etc.
Note! If you rename the slot, you will need to update the script on your website too. Because of this, we don’t recommend renaming them after they have been embedded on your website. 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 bots slots, you can assign which bot will appear in each bot slot. For example, find the bot created for blog posts, go to settings then triggers, and select the correct clot e.g. Blog-post-slot. Save, and repeat for each InpageBot and VisualBot as needed.
Note! You can only insert one bot into each slot unless you are running an A/B test.
*If you don’t see the bot slot dropdown on the Triggers page, make sure you’ve selected Dynamic Embedding as the embedding method
Embedding slots on your website
Now you can copy the slots from the 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.
If you are a developer or advanced user, you can also click “Show the full list of code” to see all possible options available.
Step1: Copy the code
Click the “copy” icon to get the code to your clipboard.
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.
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.
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.
Add a little bit of space between the text and the bot code. Copy-paste the Bot to where you want it to show.
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
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
