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

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

• 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

• 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

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

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.