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.
8 Comments
Saúl · June 10, 2020 at 3:16 am
Hello Simon!! I have a question, how can I run BP in production mode? I usually use CMD (I’m on Win10) and go into the Botpress12.9.2 folder that contains the binaries and the bot itself, to start the Botpress server I usually do “yarn start” and it starts but I can’t get it to start in production mode since I’ve already finished my bot. I tried using something like “yarn start -p” but it doesn’t work, also i found a post saying I should use “NODE_ENV=production yarn start” but it doesn’t work the console says: ‘NODE_ENV’ is not recognized as an internal or external command,
operable program or batch file.
Simon · June 10, 2020 at 10:10 am
@Saul I have a very short tutorial on this issue. Please have a look here
Saúl · June 10, 2020 at 10:42 am
I ran the commands (the installation was OK) but when I run this one “pm2 start ‘./bp start -p'” it says: [PM2][ERROR] Script not found: C:\Users\me\botpress-12.9.2\’.\bp
That folder (botpress-12.9.2) is where my binaries are, the same folder where I go using cd and then start botpress using “yarn start”, was I supposed to run it there?
Simon · June 10, 2020 at 12:21 pm
@Saul This tutorial shows how we can use PM2 tool to run Botpress binary. Please navigate to the directory where
bpfile is present and then runpm2 start './bp start -p'Saúl · June 11, 2020 at 12:32 am
I did that in the same directory where bp.exe is and told me this:
[PM2] Spawning PM2 daemon with pm2_home=C:\Users\darks\.pm2
[PM2] PM2 Successfully daemonized
[PM2][ERROR] Script not found: C:\Users\darks\OneDrive\Escritorio\BotPress\’.\bp
But there’s my question/doubt, In another post you told me to use the “bp.exe” to run in production mode and to use the source as development and I did, i finished my bot already using the source version of botpress 12.9.2, and I have the same version of the binaries (12.9.2) but when I run that command where bp.exe is it just says that :/ I pasted the “data” folder from the source folder into the binaries folder and still happened…
Simon · June 11, 2020 at 12:25 pm
Do not move whole data folder, instead copy your custom module and actions if any and also export and import your bot to Botpress binary.
Vipul Singh · July 26, 2020 at 9:19 pm
Hey. I want to integrate botpress chatbot with a website based on vuejs but i’m not able to do it. can you please help me for the same. Thanks in advance.
Simon · August 1, 2020 at 12:23 pm
@Vipul When you build your vuejs application for deployment, it would create a index.html. You should add the embed script in this file and it should work.
Henry · August 4, 2021 at 1:19 am
Hi,
I cannot get the bot to work. Is the port for the localhost?
Rishabh · October 8, 2021 at 1:46 pm
I am having the AWS instance where I have installed the botpress and trained it now I want to add the IP and want to access my bot from anywhere on website.SO instead of localhost i want to use IP of my instance to be paste in script src .I tried using ngrok and paste the URL in my Index file but bot is not showing there. Please help.