How to embed and test a Botpress bot on any website?

#botpress #hack #tampermonkey #chatbot

You have created your Botpress bot and now you want to visualize it on your production website, but without exposing it to your customers. How can we achieve this? In this post we will see how to embed and test a Botpress bot on any website.

We will use a similar script which we discussed in one of my previous posts, but this time we will use it along with Tampermonkey, a tool to manage your user scripts and run scripts on the active website.

I will use Google Chrome Tampermonkey extension to store my embed script. Please follow the below steps

Install the Tampermonkey Google Chrome extension using your chrome browser
Once installed it should appear on your chrome toolbar

Tampermonkey icon on Google Chrome toolbar

Open any desired website, click on the tampermonkey icon and then "Create a new script..." from the dropdown menu.

It should open a new tab where we will write our Botpress embed script. Please ensure that @match points to the website on which you want to embed your bot. In my example I am using https://aabingunz.com

Tampermonkey user script template for the active website

Replace your bot id and bots host port details in below snippet and paste this snippet below "//Your code here...". Note: Your bot must be served over HTTPs. Please check How to enable HTTPS in Botpress? tutorial for enabling HTTPs on your Botpress bot.

const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://<host>:<port>/assets/modules/channel-web/inject.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    script.onload = function() {
        window.botpressWebChat.init({
            host: 'https://<host>:<port>',
            botId: '<botid>',
            extraStylesheet: 'https://<host>:<port>/assets/modules/channel-web/custom-style.css'
        });
    }

Save your script and enable your script by toggeling "Enabled" switch in Tampermonkey

Tampermonkey saved scripts — My saved scripts in Tampermonkey

Now open https://aabingunz.com or whatever website you configured. You should be able to see and test your bot.

Ensure that you see a 1 notification on Tampermonkey icon

That's it. This is how we embed and test a Botpress bot on any website. Let me know in comments what other cool things you can accomplish using Tampermonkey.

This article was first posted on https://www.aabingunz.com. Click me to read from the author’s blog and find more Botpress tips and tricks on my blog.