Creating a chatbot for your website PT 3: Deploying your Rasa chatbot on Heroku using Docker

6 min readJun 14, 2021

Welcome to the last part of my 3-part series, you can find the other 2 parts here and here. In this post, I will be walking you through how you can deploy your local chatbot on Heroku, and how to communicate with this chatbot through your personal or business website.

Up until this point your chatbot is running locally on your system which means you are the only one who can communicate with it. To allow external users to communicate with it, you need to host your chatbot on a live server. The server of choice in this post is Heroku, you can also host your chatbot using Docker and AWS by following the steps in this article.

Prerequisite:

Install Docker from here. Make sure your Docker is up and running. To confirm, you can run the code below to check the version.

Docker --version

Install Git from here.
Install Heroku CLI following the instructions here.

Deploying Chatbot on Heroku using Docker

Once all those applications have been installed, follow the steps below:

Create a file called Dockerfile in your rasa project directory (no extensions). Paste the code below in it.

FROM rasa/rasa:latestADD . /app/USER root
RUN chmod -R 777 /app
USER 1001RUN rasa train nluENTRYPOINT ["/app/server.sh"]

2. Create a file called server.sh and paste the code below:

#!/bin/shif [ -z "$PORT"]
then
  PORT=5005
firasa run --model models --enable-api --cors "*" --debug --port $PORT

3. Open anaconda prompt or any other command line app and run the following commands (individually).

git initgit add .git commit -m “init commit”heroku loginheroku create appname ## Change appnameheroku container:loginheroku container:push web --app appnameheroku container:push webheroku container:release web

If all of those commands run successfully it means your chatbot has been deployed. You can access your chatbot through the URL generated when you ran the command “heroku create appname”. You can make API calls to that url from your command line like so (change url in command below).

curl -XPOST https://example-url.herokuapp.com/webhooks/rest/webhook -d “{\”sender\”:\”default\”, \”message\”:\”hi\”}”

If you get a response it means your chatbot has been successfully deployed and you can now connect it to your website.

Connecting your chatbot to your website:

If you haven’t already, create an index.html file and paste the code below. Make sure to change the host url to the url that was generated in the last set of steps.

<!DOCTYPE html>
<html>
<head><!-- Style sheet -->
<link rel="stylesheet" href="chatbox.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- Scripts -->
<script src="https://kit.fontawesome.com/e7dc4ed353.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://npm-scalableminds.s3.eu-central-1.amazonaws.com/@scalableminds/chatroom@master/dist/Chatroom.js"/></script></head><body>
<div class="chat-container" id = "chat-container"></div>
<h1>Hello World</h1>
<button class="chat-button" id="chat-button"><i class="fas fa-comment-alt fa-lg"></i></button>
  
<script type="text/javascript">
    var chatroom = new window.Chatroom({
      host: "https://example-url.herokuapp.com",
      title: "Chat with Your Bot",
      container: document.querySelector(".chat-container"),
      welcomeMessage: "Hi, how may I help you?",
      speechRecognition: "en-US",
      voiceLang: "en-US"
    });
  
</script>  
<script>
     $('.chat-button').click(function() {
       chatroom.ref.handleToggleChat();
       $(this).find('i').toggleClass('fas fa-times fas fa-comment-alt');});
</script></body>
</html>

2. Create a file called chatbox.css and paste the code below there

.chat-button {
  background-color: DodgerBlue;
  color: white;
  padding: 16px 20px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
}
.chatroom{
width:300px;
height:300px;
color:#343d4e;
max-height:90vh;
background-color:#fff;
top: 500px;
right: 25px;
position: fixed;
border-radius:3px;
border-bottom-left-radius:0;
border-bottom-right-radius:0;letter-spacing:normal;
overflow:hidden;box-shadow:0 0 0 2px hsla(0,0%,100%,.8);
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.chatroom,.chatroom *{
box-sizing:border-box
}
.chatroom.closed{
display:none;
}
.chatroom h3{
background-color:#66b6d2;
color:#fff;
margin:0;height:40px;
font-weight:600;
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer
}
.chatroom .chats{
box-sizing:border-box;
padding:20px;
margin:0;
height:calc(100% — 80px);
overflow-y:scroll;
-webkit-overflow-scrolling:touch
}
.chatroom .chats .chat{
background:hsla(0,0%,100%,.8);
position:relative;
padding:5px 13px;
font-size:14px;
border-radius:10px;
list-style:none;
float:left;
clear:both;
margin:10px 0 0;
max-width:90%
}
.chatroom .chats .chat img{
max-width:100%;
vertical-align:middle
}
.chatroom .chats .chat.left{background-color:#f0f0f0;border-bottom-left-radius:0
}
.chatroom .chats .chat.right{
background:#66b6d2;
color:#fff;
float:right;
clear:both;
border-bottom-right-radius:0
}
.chatroom .chats .chat .text{
word-wrap:break-word
}
.chatroom .chats .chat.chat-img{
padding:5px
}
.chatroom .chats .chat a{
text-decoration:none;
color:#3498db
}
.chatroom .chats .chat ol,.chatroom .chats .chat ul{
margin:0;
padding-left:1.5em
}
.chatroom .chats .chat ol li,.chatroom .chats .chat ul li{
padding-left:0
}
.chatroom .chats .chat.waiting{
margin:10px 0;
background:transparent;
padding:0
}
@keyframes fade{0%{opacity:1}to{opacity:.3}}
.chatroom .chats .chat.waiting span{
font-size:1.5em;
animation-name:fade;
animation-duration:.8s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-timing-function:ease-in-out
}
.chatroom .chats .chat.waiting span:first-child{
animation-delay:0s
}
.chatroom .chats .chat.waiting span:nth-child(2){
animation-delay:.4s
}
.chatroom .chats .chat.waiting span:nth-child(3){
animation-delay:.8s
}
.chatroom .chats .time{
list-style:none;
clear:both;
height:10px;
font-size:10px;
color:#414141;
margin:5px 0 20px
}
.chatroom .chats .time.left{float:left}
.chatroom .chats .time.right{float:right}
.chatroom .chats .chat-buttons{
position:relative;
padding:0;
font-size:14px;
list-style:none;
clear:both;
margin:10px 0;
text-align:center
}
.chatroom .chats .chat-buttons .chat-button{
display:inline-block;
transition:all .3s ease;
cursor:pointer;
margin:3px;
background-color:#343d4e;
color:#fff;
border:2px solid #fff;
padding:5px 10px;
letter-spacing:normal;
border-radius:5px
}
.chatroom .chats .chat-buttons .chat-button.chat-button-selected,.chatroom .chats .chat-buttons .chat-button:hover{
background-color:rgba(52,61,78,.6);
color:#fff
}
.chatroom .chats .chat-buttons .chat-button.chat-button-disabled{
color:grey;
border:2px solid grey
}
.chatroom .input{
height:40px;
width:100%;
margin:0;
padding:0 5px;
background-color:#f0f0f0;
display:flex;flex-direction:row;align-items:center
}
.chatroom .input input[type=text]{
background-color:hsla(0,0%,100%,.8);
outline:0;
border:1px solid #fff;
border-right:none;
color:#343d4e;
padding:0 5px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
border-top-right-radius:0;
border-bottom-right-radius:0;
height:30px;
flex:4;
box-sizing:border-box;
font-size:14px;
transition:background-color .2s ease
}
.chatroom .input input[type=text]:focus{
box-shadow:none;
background-color:#fff
}
.chatroom .input input[type=submit]{
display:inline-block;
background:#66b6d2;
border:1px solid #fff;
color:#fff;
height:30px;
min-width:70px;line-height:1;
text-align:center;
padding:0;
font-size:12px;
flex:1;
box-shadow:none;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
cursor:pointer;
transition:all .3s ease;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
outline:none;
font-weight:600;
text-transform:uppercase
}
.chatroom .input input[type=submit]:hover{
background:hsla(0,0%,100%,.8)
}
.chatroom #speech-input{
height:30px;
width:30px;
margin-left:5px;
background:#66b6d2;
border:1px solid #fff;
color:#fff;
border-radius:3px;
cursor:pointer;
transition:all .3s ease
}
.chatroom #speech-input:hover{
background:hsla(0,0%,100%,.8)
}
.chatroom .vertical-center{
vertical-align:middle
}

3. Add or uncomment this line in your credentials.yml file

socketio:
 user_message_evt: user_uttered
 bot_message_evt: bot_uttered
 session_persistence: true/false

Open up your index.html page in your browser and try sending a message to your bot. If you get a response back it means your bot is up and running.

One last thing, whenever you make any changes to your chatbot locally, you would need to update your live bot by pushing the changes to Git. This way, your deployed chatbot can pull this information and always stay up to date. You can do this by running the following commands (individually).

git add .git commit -m “changes”git push heroku master

You have come to the end of the 3-part series! You can find the full source code here.

If you found this blog post helpful, kindly leave a clap and click the Buy me a coffee button below!

Your contribution will encourage me to create more content like this.

Creating a chatbot for your website PT 3: Deploying your Rasa chatbot on Heroku using Docker

Connecting your chatbot to your website:

Written by Obianuju Okafor