Analytics Vidhya
Published in

Analytics Vidhya

Create a simple chatbot with rasa-x and integrate with web

Ever wanted to create a chatbot for your website or business? Then this blog is for you. so let’s see step by step the process of how we can create a chatbot and integrate with the website.

First of all, we will create a new project and environment. For that open terminal and type, the below commands

mkdir chatbot
cd chatbot
virtualenv venv

Now let’s activate the environment and install rasa-x

venv\Scripts\activate
pip install rasa-x==0.34.0 --extra-index-url https://pypi.rasa.com/simple

Now we have things set up so we can start to build our chatbot. Rasa initially gives a sample chatbot. we can create that by the following command.

rasa init --no-prompt

Let’s see what rasa gives us as a starting point.

rasa-x

rasa-x is UI for people that want to build a chatbot without coding. It will help us to create a chatbot also interact with it. Here is a sample conversation.

Conversation

Create a Conversation

Let’s create the first conversation. for eg.

User: hi
Bot: Hello Guest! Welcome to Costa Rica Adventure, where your comfrot, personal safety and total satisfaction is the highest priority I'm VIP concierge and i'wiil help you to make your Costa Rica vacation to be perfect ⭐⭐⭐⭐⭐ right after you click the button below
Buttons: Let's see

To create the user side we have to enter some examples of sentences that the user may say to the bot. For example, go in NLU data under the training section.

Now click on the + button where it will ask you a sentence and its intent. Here intent refers to the goal the customer has in mind when typing in a question or comment. For eg.

Intent : Greet
Example : Hey, hi ,hello

After we have created intent we have to create a response that can be answered when the user greets a bot. so let’s create a response. Find Response under the training section then press the + button. Then it will ask you name we will give utter_greet because it’s a response of greet intent. Then we can enter the below text and add a button for the show menu.

buttons: 
-
payload: /main_menu
title: "Let's see"
text: "Hello Guest! Welcome to Costa Rica Adventure, where your comfrot, personal safety and total satisfaction is the highest priority I'm VIP concierge and i'wiil help you to make your Costa Rica vacation to be perfect ⭐⭐⭐⭐⭐ right after you click the button below."

Here we can insert images and buttons with our text. For the insert button, we have to press on the arrow sign. Now it will ask us the Title of a button which will show to the user and the payload of a button which is for chatbot understanding.

Now let’s take one more conversation about what happens when the user presses the button.

For this, we have to create intent with payload name here is main_menu. For this let’s go again to nlu data.

When you type main_menu in intent it will show you create new intent after a click on that we can save the data.

Now we have to create a response of this. For this, we have to go to response tab under the training section. press + button now we have to give name we will give main_menu as its response of main_menu intent. Then we can enter text and button as follow.

buttons: 
-
payload: /plan_my_trip
title: "📅Plan My Trip"
-
payload: /activities_offered
title: "Activities Offered"
-
payload: /contact_us
title: "📞 Contact Us"
-
payload: /testimonials
title: "⭐ Testimoials"
-
payload: /about_costa_rica
title: "🌅 About Costa Rica"
-
payload: /tips_and_tricks
title: "👍 Tips And Tricks"
text: "Ready to make your Costa Rica trip planning easy, make it worry-free and seamless?!"

After insert, all buttons press done then save your response.

Now you can create any conversation you want as shown above.

Make Stories

We only have created a question and their answer but we didn’t tell the chatbot about what to respond to when users ask something. So let’s create stories that will tell chatbot about the flow of conversation. For that go to the stories tab under the training section. Press the enter button and enter the following text.

stories:
- story: greetings
steps:
- intent: greet
- action: utter_greet
- intent: main_menu
- action: utter_main_menu

Here the story: greetings show the name of the story. steps are for describing the flow of conversation. intent and action are like question and answer if the user says greet then but will give a response from utter_greet example.

There is another simple way of making stories. You can click talk to your bot and change the response of the bot if you found it’s not correct. Let’s take the below image as an example. User says hi and bot response from utter_greet which is correct but let’s say you expect utter_welcome then you can drag your cursor towards utter_greet and you can see correct_action button after click on that you can correct response. After your conversation is finished you have to press the save story button.

Now finally we can press the train button and can see the chatbot working.

To interact with chatbot we can first go into the talk to chatbot section and then if it’s work good we can integrate with our website.

We can see our bot is working till we have insert conversations. For full conversation you can follow this GitHub repo https://github.com/dlmade/rasa-chatbot-templates/tree/master/08_travel_agency_bot in this you can find so many starting templates for your domain. If you don’t want to write so many things and only want to see the final result then you can clone this repo https://github.com/dlmade/rasa-x-with-web and continue with the blog.

Integrating rasa with your web application

Now we have trained the model let’s go on integration with the website. For this, we will use this repo https://github.com/botfront/rasa-webchat .

For this go into the project directory and create index.html after that copy the below text in it.

<div id="webchat"></div>
<script src="https://cdn.jsdelivr.net/npm/rasa-webchat@0.11.5/lib/index.min.js"></script>
// you can add a version tag if you need, e.g for version 0.11.5 https://cdn.jsdelivr.net/npm/rasa-webchat@0.11.5/lib/index.min.js
<script>
WebChat.default.init({
selector: "#webchat",
initPayload: "/get_started",
customData: {"language": "en"}, // arbitrary custom data. Stay minimal as this will be added to the socket
socketUrl: "http://localhost:5005",
socketPath: "/socket.io/",
title: "Title",
subtitle: "Subtitle",
params: {"storage": "session"} // can be set to "local" or "session". details in storage section.
})
</script>

For making this HTML page working we have to tell rasa that we want to use it with our website. so for that, we have to do some changes as follows.

First, we have to insert the below text at the end into the credential.yml file which you can find in your project directory.

socketio:
user_message_evt: user_uttered
bot_message_evt: bot_uttered
session_persistence: true

Then we have to uncomment lines which shown below from the endpoints.yml file which also you can find in your project directory.

action_endpoint:
url: "http://localhost:5055/webhook"

After that, we have to open the terminal from the project directory. Then we have to run the following command.

rasa run --cors "*" --enable-api

This command will start the socket from the rasa side now we can open index.html in our browser and see our website working.

You can see a full working example here https://rasa-travel-web.herokuapp.com/.

If you like this post, HIT Buy me a coffee! Thanks for reading.

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
DLMade

DLMade

175 Followers

Howdy & Welcome. I am a content creator, machine learning researcher, and consultant. consultancy: dlmade.ml or dlmadeblog@gmail.com