Tip: triggering a bot from a wordpress menu

Hi all - just figured out how to do this and thought you might find it useful.

There are good instructions for triggering a chatbot from a link or button here: https://help.collect.chat/article/show/69233-how-to-trigger-chatbot-from-a-link-or-a-button by using the “onclick” property of buttons or links.

Unfortunately, that doesn’t work for getting the bot to trigger from a wordpress menu (for example, a “contact me” menu item) because you can’t add those properties to the menu link in wordpress.

However, you can use a bit of javascript to do it as follows:

First, follow step 1 as per the instructions on the help page to disable the default launcher. And put the embed script for the bot onto the relevant pages as per usual.

Next, set the link in wordpress for the menu item to be # so it doesn’t go to a new page when clicked.

Next, you need to find the unique id for the menu item by looking a the page source or using the Inspect tool in Chrome or Firefox or whatever tool you’re using. The id will be of the form menu-item-nnnn. Note down what the actual id is.

Next add the following javascript to every page where you want to bot to activate if the menu item is clicked (I use Tracking Code Manager from IntellyWP for this)

<script>jQuery.noConflict();
jQuery(document).ready(function(){
var menuID = jQuery('#menu-item-nnnn');

findA = menuID.find('a');

findA.click(function(event){
// Your Javascript Code Here
collectchat.open();
});
});
</script>

But obviously replace menu-item-nnnn with your actual menu item id.

And that’s it. The script will open the collect chat bot for that page when the menu item is clicked.

You can see it in action on my page at www.ianbrodie.com on the Contact Me menu item. Although please don’t clog up my email by submitting lots of questions via the bot!

Hope that’s helpful - Ian

2 Likes

This is a killer tip Ian :fire: Thank you for sharing this with our community :raised_hands:

In fact, we introduced a new feature today to make this easier.

Try adding <a href="#collectchat">Open Chat</a> to your HTML which it will open/close chatbot.

In WordPress you can add #collectchat as the link for the menu item and Boom, it should work like magic!

Let me know your thoughts.

-Shyjal

Great work guys - that makes it even easier - no need for the fancy javascript!

2 Likes