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; */
}
How to add Botpress Chat Widget to your website?
How to add Botpress Chat Widget to your website?

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


Simon

I am a Fullstack developer and Consultant with an experience of 9+ years in the industry. I mainly work on Java, React, Javascript, NodeJs, Elasticsearch and Botpress.

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 […]

Leave a Reply

Your email address will not be published. Required fields are marked *