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
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 -> 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.
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.
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.
*If you don’t see the bot slot dropdown on Triggers page, make sure you’ve selected Dynamic Embedding as the embedding method
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.
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.
Update the page to see the end result.