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.
9 Comments
Charles · March 18, 2021 at 10:12 pm
Good afternoon, how can I leave the text “how can I help?” above the chatbot icon.
Being able to put it inside the icon, but not outside.
can you guide me as I do in CSS style?
Simon · March 19, 2021 at 12:30 pm
@Charles: Good Afternoon. It is a combination of both CSS and web changes. If you want I will provide the details in my next tutorial.
Amiya · July 15, 2021 at 5:08 pm
sir I have done all the methods you have written here….but still my chatbot is not showing in my page.
Please help me sir….I have to submit my project…
Simon · July 15, 2021 at 9:32 pm
@Amiya: Are you getting errors in the chrome debug console of your website?
Tashi · July 23, 2021 at 6:12 pm
I am getting the same problem
Tashi · July 23, 2021 at 5:15 pm
Hi!
Is it necessary that the chatbot needs to be deployed at Heroku or any other platforms inorder to embed to our website?
Tashi · July 23, 2021 at 6:10 pm
Hi,
Is it necessary to deploy my chatbot to Heroku or any other platform,before embedding it to my website?
SH · March 20, 2023 at 1:41 am
Hello. How did you get the conversation to reload/reset? Thanks!
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 […]