We will be creating a bot to take coffee orders.
- Go to this link and create an account: https://cloud.ibm.com/registration?cm_mmc=web-chat
- Or, go to https://cloud.ibm.com/ and login if you have an account already and login
- Once logged in, click on
Create resource
in the upper right corner of the screen - On the left hand nav, click on
AI
- Click on the first option,
Watson Assistant
- Select your closest region.
Lite
plan should be selected already. Use this for the free plan- Click
Create
- Click on
Launch Watson Assistant
- If this is a new instance for you, then you'll be dropped into an existing assistant. Back out of the assistant so we can create our own using the
Assistants
link in the top left - Click
Create assistant
- Name it
CoffeeBot - Dev
and create the assistant
- Now you are within an Assistant, and we need to add a Dialog Skill. Click on
Add dialog skill
- Navigate to
Create skill
- Name it something like
CoffeeBot
and select the desired language - Click on your new Dialog Skill tile to start editing the skill
- Click
Add intent
- Name the new intent
order-drink
- Add a description of what the intent will do. For this, let's use "User wants to order a drink."
- Hit
Enter
to create the intent - Start adding a few exaxmples of how a user would order a drink (at least 5 examples are recommended). Let's use the following:
- i would like to order a coffee please
- I need some caffeine
- order espresso
- a cappuccino would be lovely
- a latte please
- Open the
Try it Out
panel by clicking on the speech bubble in the upper right corner. This allows you to test how your bot will respond - Wait for the bot to finish training, then type
can I order a coffee
. It should classify the intent as#order-drink
. Even though you didn't train the intent on this exact sentence, Watson can still understand it. - Add a few more intents to make your bot more robust. Try creating the following intents and adding a few examples to each:
- #see-menu (User wants to see what's on the menu)
- #greetings (User greets the bot)
- #thanks (User thanks the bot)
Here are the finished intents:
- Click on the
Entities
tab at the top of the page - Click
Add entity
and add the namedrink
- Add a value
coffee
with the synonym ofcafe
. - Add some additional values that you allow your users to order and any synonyms, for example:
- espresso
- cappuccino
- latte
- tea
- Exit the page, and click on
System entities
underneath theEntities
tab - Turn on
@sys-number
Here is how your finished entity @drink
should look:
- Click on the
Dialog
tab at the top of the page - Click
Create
- Click on the
Welcome
node if you would like to change the intro message - Click
Add node
, and name itGreetings
- Add your
#greetings
intent as the field forIf assistant recognizes
- Fill in a response that says something like "Hi! How can I help you today?"
- Create two more nodes for
#thanks
and#see-menu
and add responses - Create another node and name it
Order Drink
- To the right of the name, click on
Customize
- Turn on
Slots
and hitApply
- Add the intent
#order-drink
toIf assistant recognizes
- Under
Check for
, add the entity@drink
- Under
If not present, ask
add a question like "What would you like to drink?" - Click
Add slot
, and add a condition and prompt for@sys-number
: "How many cups of $drink would you like?" (Note: the syntax$variable
is short hand for accessing Context variables. Context variables allow you to pass information between your application and Conversation.) - Add in the response, "Ok, I have $number $drink coming right up!"
Finished dialog tree with Order Drink
open:
To make Web Chat appear, we'll need a Plus Trial account. You don't need a credit card for this and won't be charged. Find the Try plus plan
button anywhere in the tooling, and click to find the button to Start free trial
. There is one inside your assistant where the Search
tile appears near the bottom of the page.
Now that we have a functioning assistant, let's deploy it to a site to see how it will look for our coffee customers. If you have an existing page you'd like to embed, you can follow the steps below until we get to opening the sample HTML page.
- Backout of the skill by selecting the
Assistant
breadcrumb in the top left. This should take you inside yourCoffeeBot - Dev
Assistant. - On the right side of the screen, click
Add integration
under theIntegrations
section. - Select Web Chat, and click
Create
. - We'll revisit the customization in a bit. For now, scroll down to the embed script titled
Add the chat UI to your web page
and leave this page open - On the homepage of this repo, open the file
web-chat-example.html
in a new tab. - Open the
Raw
format of the file - Save the page using
.html
- Open this file in your computer's text editor (Note: for Mac, you have to Open the TextEdit app, choose File > Open, then select the document. Click Options at the bottom of the TextEdit dialog, then select “Ignore rich text commands.” Click Open.)
- Back inside Watson Assistant, copy the embed script on the Web Chat page and paste over the section that says
INSERT EMBED SCRIPT HERE
- Save the file
- Find the file in your downloads / desktop, and open it in your browser
- Start chatting with your bot!
Back in the Web Chat configuration page within Watson Assistant, you can customize how Web Chat appears on your page. Try changing the accent color, adding your own title, or messing with the font. Make sure you select Save changes
at the bottom, and refresh your mock coffee website.
Did you finish the above and want to learn more? Try some of the following methods to bolster your CoffeeBot.
If your user orders a drink and completes the flow, and they try to make another order, the values found from the first flow will still be there so they will not be able to order something else. To fix this, we need to clear the context after a successful order so the values are not stored for the next order.
- Create a node above the Slots node
Order Drink
calledOrder Drink - Clear Context
- Set the condition to
#order-drink
- In the response section, click on the three button menu on the right and click on
Open context editor
- Fill in both of the variables (
drink
andnumber
) and set the values tonull
- Click on the three dot menu on the right side of original Slots node
Order Drink
, and selectMove
. Then, click the new context clearing node and move toAs Child Node
(So, the parent node is the context clearing node, and the slots node is the child) - Go to the section called
And finally
at the bottom of the context clearing node. SelectJump to
and click the slots node, thenIf bot recognizes condition
- Change the condition of the slots node from
#order-drink
totrue
(Use this condition if you want the node to always fire) - Try it out! Without clearing the try it out panel, order a drink. Once finished, try ordering another drink and it should prompt you for the two needed variables again. Here's what the finished context clearing node will look like:
Sometimes, you will want an intent to be handled no matter where the user is in their flow. Think of Digressions as a global 'manage handlers': they allow you to respond to an intent even if a user is in the middle of a process flow, and then it allows them to return to their prior flow. If your user wants some help talking to the bot anywhere in your bot, this is a good intent to have digressions enabled.
- Create a
#help
intent with examples like: "I need help" - Create a node below your
Order Drink
node - Add the condition of
#help
with a response like: "I can help you order a drink from my coffee shop. Just say order drink to get started!" - Go into the
Customize
portion of the node by clicking in the upper right - Click on the
Digressions
tab - Enable
Return after digression
(Digressions should be on by default, this setting allows you to handle the intent and then return back to the flow) - Now to test this out, we need to get in the middle of our order drink flow. But first, since it is a slot, we need to go into the
Digressions
tab in theOrder Drink
slots node - Turn on
Allow digressions away while slot filling
and click the button that only allows nodes with returns enabled. This will help you to control which nodes you want to allow to digress to - Try it out by saying "order drink", then when asked for what kind of drink you want, say "help". You should see a response from your help node with another follow up message for the next slot filling question