You are ready with your chatbot, now is the time to place your chatbot in your million dollar website and start engaging customers. In this post we will see how to add Botpress Chat Widget to your website using a JavaScript code snippet. This code snippet has to be placed inside your main page eg: index.html. There is a Bonus content added at the end of this post.
Note: For added security please enable HTTPS also run Botpress as a background process using a process manager tool like pm2 as the Botpress process frequently goes down.
Use your preferred text editor to open your main page. Then add below script tag inside <head></head> tag, replace host port where Botpress is running.
<script src="http://host:port/assets/modules/channel-web/inject.js"></script>
Add a script tag later inside <body></body> tag add any custom style sheet under extraStylesheet.
<script>
window.botpressWebChat.init({
host: 'http://host:port',
botId: 'aabingunz'
},
extraStylesheet: 'http://host:port/assets/modules/channel-web/assets/custom-style.css'
})
</script>
Bonus Content let us change the Chatbot’s icon
In order to change the Chatbot’s icon we need at least 64x64px image for your brand or any other logo. Then add below CSS in your extraStyleSheet.
/*blob icon*/
.bpw-widget-btn {
background-image: url("./images/botAvatar.png");
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
width: 64px;
height: 64px;
}
.bpw-widget-btn>* {
display: none;
}
.bpw-floating-button {
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
/* border: 1px solid #3C4858; */
}
That’s it. Once you have deployed your website with above changes. Access your website using your URL, it will show a small button at the bottom right corner of your website. Click on it and your chat window should open.
Reference: https://botpress.io/docs/channels/web/#embedding
1 Comment
Botpress: How to act Proactively? – Abhishek Simon · December 20, 2019 at 12:03 am
[…] you open your bot from your website (check How to embed bot in your site? guide) you need to send an […]