Overview
In this short tutorial, we will walk you through the process of creating a basic chatbot.
| Table of Contents | ||||
|---|---|---|---|---|
|
Prerequisites
Access to an Orbita sandbox. To get access, please see Experience Manager or contact us.
A new or existing project where you would like to create this chatbot. See 3.1.1 Projects.
Access to log in to a Google Dialogue Flow key
...
Account. See How to Publish the interaction model to Dialogflow?.
Step 1: Create a Conversation
We will create a new conversation within Flow Studio.
Login to the Experience Manager.
Navigate to the Project Side navigation menu > Create > Agents > Flow Studio.
Click on the Create a Flow button.
Give a name and description to your Flow studio.
Create a conversation using the Flow studio. Refer to Guide to Flow Studio
If you are in an empty flow studio, save it
or follow the steps below steps and import the to import a template of a sample Flow studio conversation .to quickly get started.
Importing a Flow Studio Conversation
After creating a new flow, save the empty flow by clicking on the
...
check icon on the bottom right corner. This will take you back to the Flow Studio main page.
...
...
On your Flow Studio main page, hover over the new flow conversation you’ve created > Verticle ellipses button > Import/export.
...
...
Select the
...
Import tab > Copy the template code below
...
and paste it here >
...
Import
...
.
...
Flow Studio Sample Conversation Template Code:
| Code Block |
|---|
{
"flowData": {
"class": "GraphLinksModel",
"copiesKey": false,
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{
"key": "857428463371497251",
"name": "Start",
"description": "",
"type": "start",
"category": "",
"loc": "232.52284749830795 70.10354461669922",
"size": "80 80"
},
{
"key": "402026513763859450",
"name": "End",
"description": "Thanks for your time.\nThe |
...
conversation ends here\n", "type": "end", "category": "", "loc": "232.52284749830795 850.0689865401407", "size": "80 80", "multiScreen": { "description": "", "validation": { "valid": "", "invalid": "" }, "voice": { "sayText": "<p>Thanks for your time.<br />\nThe |
...
conversation <strong>ends</ |
...
strong> here</p>\n", "rePrompt": "" }, "chat": { "chatText": "" }, "screen": { "shortTitle": "", "longTitle": "", "body": "", "smallImage": "", "largeImage": "" }, "buttons": { "type": "dropdown", "name": "buttons", "choices": [] } }, "directives": { "micInput": true, "keyboardInput": true, "waitTimeNoAnimation": false, "endSession": false } }, { "key": "742436401836062521", "name": "Say", "description": "Welcome to your first conversation flow using flow studio\n", "type": "message", "category": "", "loc": "232.52284749830793 261.8334813484056", "multiScreen": { "voice": { "sayText": "<p>Welcome to your first conversation flow using flow studio</p>\n" }, "chat": { "chatText": "" } } }, { "key": "417833740235547202", "name": "Rating", "description": "Please rate the document you just viewed.\n", "type": "rating", "category": "", "loc": "107.52284749830794 658.3390498084344", "rateValues": [ { "value": "1", "text": "", "data": "" }, { "value": "2", "text": "", "data": "" }, { "value": "3", "text": "", "data": "" }, |
...
|
...
{ |
...
" |
...
value": "4", " |
...
text": |
...
"", " |
...
data": "" |
...
}, |
...
|
...
{ |
...
" |
...
value": |
...
"5", " |
...
text": " |
...
",
" |
...
data": "" } |
...
|
...
], |
...
" |
...
multiScreen": |
...
{ |
...
"description": "", " |
...
validation": { " |
...
valid": "", " |
...
invalid": "" |
...
|
...
}, |
...
" |
...
voice": |
...
{ " |
...
sayText": " |
...
<p>Please rate the document you just viewed.</p>\n", |
...
"rePrompt": "" }, " |
...
chat": { " |
...
chatText": |
...
"" |
...
}, " |
...
screen": |
...
{ " |
...
shortTitle": |
...
"", |
...
"longTitle": "", |
...
|
...
"body": "", |
...
" |
...
smallImage": " |
...
",
|
...
"largeImage": "" |
...
|
...
|
...
|
...
|
...
|
...
} |
...
}, " |
...
directives": |
...
{ " |
...
micInput": |
...
true, " |
...
keyboardInput": |
...
true, " |
...
waitTimeNoAnimation": |
...
false, " |
...
endSession": |
...
false |
...
} |
...
}, |
...
|
...
{ |
...
" |
...
key": |
...
"649811202072708483", |
...
" |
...
name": "Yes/No", "description": "Was this tutorial helpful?\n", |
...
|
...
"type": "boolean", |
...
"category": "", |
...
|
...
"loc": "232.52284749830793 460.08626557842007", |
...
" |
...
yesDataLabel": " |
...
Yes", |
...
"noDataLabel": "No", |
...
"yesData": "", |
...
" |
...
noData": |
...
"", |
...
"multiScreen": { |
...
|
...
"description": "", " |
...
validation": { " |
...
valid": "", " |
...
invalid": "" |
...
|
...
}, " |
...
voice": |
...
{ " |
...
sayText": " |
...
<p>Was this |
...
tutorial helpful?</p>\n", |
...
"rePrompt": "" }, " |
...
chat": { " |
...
chatText": |
...
"" |
...
}, " |
...
screen": |
...
{ " |
...
shortTitle": |
...
"", |
...
"longTitle": "", |
...
|
...
|
...
"body": "", |
...
|
...
" |
...
smallImage": " |
...
", |
...
"largeImage": "" |
...
|
...
|
...
|
...
} |
...
}, " |
...
directives": |
...
{ " |
...
micInput": |
...
true, " |
...
keyboardInput": |
...
true, " |
...
waitTimeNoAnimation": |
...
false, " |
...
endSession": false |
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
} }, |
...
{ |
...
|
...
"key": "185352052922068022", |
...
" |
...
name": "Say", "description": "Thats sad. Please |
...
leave a comment on the document on what can be improved.\n", |
...
"type": "message", |
...
|
...
"category": "", |
...
|
...
"loc": |
...
"382.52284749830795 658.3390498084344", " |
...
multiScreen": |
...
{ |
...
"voice": |
...
{ " |
...
sayText": " |
...
<p>Thats sad. Please leave a comment on the document on what can be improved.</p>\n" |
...
|
...
}, |
...
|
...
"chat": { |
...
|
...
"chatText": "" |
...
} } |
...
} |
...
], "linkDataArray": [ |
...
{ "from": "857428463371497251", |
...
"to": "742436401836062521", |
...
"fromPort": "OUT", |
...
"toPort": "IN", |
...
"points": [ 232. |
...
52284749830798, |
...
110.15531692504884, |
...
232.52284749830798, |
...
120.15531692504884, |
...
|
...
232.52284749830798, |
...
147.68120307922365, |
...
|
...
232.5228474983079, |
...
|
...
147.68120307922365, |
...
|
...
232.5228474983079,
|
...
175. |
...
20708923339845, 232.5228474983079, |
...
185. |
...
20708923339845 ] |
...
}, |
...
{ "from": "742436401836062521", |
...
"to": "649811202072708483", |
...
"fromPort": "OUT", |
...
"toPort": "IN", |
...
"points": [ 232.5228474983079, |
...
318.45987346341275, |
...
232.5228474983079, |
...
328.45987346341275, |
...
|
...
232.5228474983079, |
...
|
...
355.9598734634128, |
...
|
...
232.5228474983079, |
...
|
...
355.9598734634128, |
...
|
...
232.5228474983079, |
...
383.4598734634129, |
...
232.5228474983079, |
...
393.4598734634129 |
...
] |
...
}, { |
...
"from": "649811202072708483", |
...
"to": "417833740235547202", |
...
"fromPort": "Yes", |
...
"toPort": "IN", "points": [ |
...
|
...
292.63306173170633, |
...
526. |
...
7126576934272, |
...
292.63306173170633, |
...
536.7126576934272, |
...
|
...
|
...
292.63306173170633, |
...
|
...
554.2126576934271, |
...
|
...
107.52284749830794, |
...
|
...
554.2126576934271, |
...
|
...
|
...
107.52284749830794, |
...
571. |
...
712657693427, |
...
107. |
...
52284749830794, |
...
581. |
...
712657693427 ] |
...
}, |
...
{ |
...
"from": "649811202072708483", "to": "185352052922068022", |
...
"fromPort": "No", |
...
"toPort": "IN", |
...
"points": [ |
...
140.9862035163743, |
...
526.7126576934272, |
...
|
...
140.9862035163743, |
...
536.7126576934272, |
...
|
...
140.9862035163743, |
...
|
...
554.2126576934271, |
...
|
...
|
...
382.5228474983081, |
...
554.2126576934271, 382.5228474983081, |
...
571. |
...
712657693427, 382.5228474983081, |
...
581. |
...
712657693427 ] |
...
}, |
...
{ |
...
"from": "185352052922068022", "to": "402026513763859450", |
...
"fromPort": "OUT", |
...
"toPort": "IN", |
...
"points": [ |
...
382.5228474983081, |
...
714.9654419234413, |
...
|
...
382.5228474983081, |
...
724.9654419234413, |
...
382.5228474983081, |
...
|
...
752.4913280776161, |
...
|
...
232.52284749830798, |
...
|
...
|
...
752.4913280776161, |
...
232. |
...
52284749830798, |
...
780. |
...
0172142317911, |
...
232. |
...
52284749830798, |
...
790.0172142317911 ] |
...
}, { |
...
"from": "417833740235547202", |
...
"to": "402026513763859450", |
...
"fromPort": "OUT", |
...
"toPort": "IN", |
...
"points": [ |
...
107. |
...
52284749830794, |
...
714. |
...
9654419234413, |
...
107.52284749830794, |
...
|
...
724.9654419234413, |
...
|
...
|
...
A Flow studio conversation similar to the one in the below screenshot will be imported.
Make sure you copy the FlowID.
...
You can copy the Flow studio ID from the verticle ellipses dropdown menu too.
...
Flow Manager flow
Click on the icon on the tabs menu, you will get a new flow created.
Double click on the flow to rename it and click on “Done”.
Click on the hamburger icon > Import > Built-in > Orbita Flows-(BETA) > FlowManager
Place the Flow Manager flow on the canvas and Deploy the flow.
Connecting the Flow Studio with Flow Manager flow.
Double click on the Function node named “Set Flow Id”
Locate
msg.payload.flowId = ''and paste the FlowID you copied within the single quotes.
Click on Done.
Deploy the Experience Designer flow.
Any changes made to the Experience Designer nodes are denoted by a blue circle on the top right corner of the node.
Connecting the chatbot with Google Dialogflow
To create a Dialogflow account and publish the interaction model to Google Dialogflow, refer to this How to Publish the interaction model to Dialogflow?
After successfully deploying the interaction model to the Dialogflow Agent,
Go to the Experience Designer > Launch tab > Launch node > Endpoint.
Click on the icon to copy the endpoint of the project.
This URL is used as a webhook URL for Alexa and Dialogflow.
For Dialogflow, go to https://dialogflow.cloud.google.com/ and select fulfillment from the side menu. Enable Webhook and use this URL to link the Dialogflow agent with the Orbita project.
You have successfully connected the project with your Dialogflow agent.
Bot Manager flow
A Bot Manager flow tab is available in every new project you create.
The Bot manager flow allows you to have an endpoint for your chatbot.
Login to Experience Manager.
Create/select a project.
Enter the project by clicking on it.
Navigate to Project Side navigation bar > Develop > Experience Designer (opens in a new tab).
Import the “Another Bot Manager” flow.
Click on the Hamburger menu > Import > Clipboard.
Copy the below code and paste it into the pop-up window.
Code Block [ { "id": "252ead02.2d8d12", "type": "tab", "label": "Another Bot Manager", "disabled": false, "info": "" }, { "id": "baf80b38.4f4fb8", "type": "alexa-flow-config reff", "z": "252ead02.2d8d12", "skillConfig": "a6543489.a0c308", "x": 100, "y": 50, "wires": [] }, { "id": "429069bb.4a7018", "type": "http in", "z": "252ead02.2d8d12", "name": "GET", "url": "/bot/yourbot", "method": "get", "upload": false, "swaggerDoc": "", "x": 170, "y": 120, "wires": [ [ "33be7b27.6dd684" ] ] }, { "id": "25f8d9bb.fb9556", "type": "http in", "z": "252ead02.2d8d12", "name": "POST", "url": "/bot/yourbot", "method": "post", "upload": false, "swaggerDoc": "", "x": 170, "y": 200, "wires": [ [ "75f9d49b.79494c" ] ] }, { "id": "1d76b0f5.1eefdf", "type": "http in", "z": "252ead02.2d8d12", "name": "GET: Default Settings", "url": "/bot/yourbot/settings", "method": "get", "upload": false, "swaggerDoc": "", "x": 120, "y": 280, "wires": [ [ "8f101cd3.e3338" ] ] }, { "id": "75f9d49b.79494c", "type": "orbita-bot-provider-v2", "z": "252ead02.2d8d12", "name": "Bot Provider V2", "botInParser": "", "botOutParser": "", "ttsconfig": "{\n \"languageCode\": \"en-US\",\n \"ssmlGender\": \"FEMALE\",\n \"name\": \"en-US-Standard-C\",\n \"audioEncoding\": \"MP3\"\n }", "providerType": "Google", "skillConfig": "a6543489.a0c308", "token": "", "noerr": 0, "nlpData": false, "x": 380, "y": 200, "wires": [ [ "d517357b.5bb358" ] ] }, { "id": "d517357b.5bb358", "type": "http response", "z": "252ead02.2d8d12", "name": "Response", "statusCode": "", "headers": {}, "x": 640, "y": 200, "wires": [] }, { "id": "33be7b27.6dd684", "type": "orbita-bot-view-template", "z": "252ead02.2d8d12", "name": "Bot View Template", "skillConfig": "a6543489.a0c308", "endpoint": "/bot/yourbot", "chatbotVersion": "v2", "customcss": "", "customjs": "", "customheader": "", "chatbotsetting": "", "chatjsurl": "", "x": 390, "y": 120, "wires": [ [ "d517357b.5bb358" ] ] }, { "id": "8f101cd3.e3338", "type": "function", "z": "252ead02.2d8d12", "name": "App Settings", "func": "msg.payload = { \n speechToText: \"Google\", \n headerLogo: \"\",\n waitTime: \"250\",\n micMode: 'push'\n};\nreturn msg;", "outputs": 1, "noerr": 0, "x": 370, "y": 280, "wires": [ [ "d517357b.5bb358" ] ] }, { "id": "a6543489.a0c308", "type": "alexa-skill-config", "skillname": "Test", "projectId": "610bd20e0a9066006e106f87", "intents": "[]", "skillstate": ",fromsession" }, { "id": "slots", "type": "slots", "z": "", "slots": [] } ]Select current flow/new flow as you prefer and click on Import.
Click the OK button on the popup window.
The Flow named “Another Bot Manager” flow will be available in the Experience Designer.
You can access the chatbot in two ways:
Using the endpoint https://<domain-name>.orbita.cloud:8443/oeapi/bot/yourbot
Open the Http in node named “GET“ and click on the “Open/Copy URL” button
You can use the utterances such as “flow”, “flow studio” in the chatbot to invoke the Flow studio conversation.
If you want to skip giving an utterance to launch the Flow studio conversation, connect the Launch node to the Flow manager node as shown below.
...
Now when you access the Chatbot endpoint, you will receive the first message in the Flow studio conversation on launch.
...
| Note |
|---|
Make sure you delete the Launch node from the Launch tab |
...
107.52284749830794,
752.4913280776161,
232.52284749830798,
752.4913280776161,
232.52284749830798,
780.0172142317911,
232.52284749830798,
790.0172142317911
]
}
]
},
"utterances": []
}
|
A Flow studio conversation similar to the one in the below screenshot will be imported.
...
Step 2: Connect Your Conversation to Experience Designer
We will now connect the conversation we have created in Flow Studio to Experience Designer in order to be able to launch the conversation in our chatbot.
Copy the FlowID at the top of your new flow.
...
You can also copy the FlowID from the verticle ellipses dropdown menu.
...
2. Open Experience Designer by navigating to your side menu > Develop > Experience Designer.
...
Now, we will import a FlowManager, which will help your chatbot navigate to all of your Flow Studio flows.
3. Click on the icon in the tabs menu. We will add a new tab and name it ‘Flow Manager’.
...
a. Double click on the flow to rename it and click on Done.
...
4. Click on the hamburger icon > Import > Built-in > Orbita Flows-(BETA) > FlowManager
...
5. Place the Flow Manager flow on the canvas and Deploy the flow.
...
6. Double click on the Function node named “Set Flow Id.”
7. Locate msg.payload.flowId = '' and paste the FlowID you copied within the single quotes and click Done.
a.
...
b.
...
8. Deploy the Experience Designer flow to save it.
...
Any changes made to the Experience Designer nodes are denoted by a blue circle on the top right corner of the node.
Step 3: Connect with Google Dialogflow
In order to test and make your chatbot live, you must connect it to Google Dialogflow.
To create a Dialogflow account and publish the interaction model to Google Dialogflow, make sure you complete the steps in this document:How to Publish the interaction model to Dialogflow?
After successfully deploying the interaction model to the Dialogflow Agent,
Go to the Experience Designer > Launch tab > Launch node > Endpoint.
Click on the icon at the end to copy the endpoint address.This URL is used as a webhook URL for Alexa and Dialogflow.
For Dialogflow, go to https://dialogflow.cloud.google.com/ and select Fulfillment from the side menu. Enable Webhook and use this URL to link the Dialogflow agent with the Orbita project.
You have successfully connected the project with your Dialogflow agent.
Step 4: Test Your Chatbot
You can access and test your new chatbot in two ways:
A. Using the URL Endpoint
https://<domain-name>.orbita.cloud:8443/oeapi/bot/yourbot
B. Using the “Bot Manager” Flow Tab
A “Bot Manager” flow tab is available in every new project you create and allows you to have an endpoint for your chatbot.
Navigate back to your Orbita project and open your Experience Designer.
Go to your “Bot Manager” tab open the ‘Http in’node named “GET“ that is connected to the ‘Bot View Template’ node and click on the Open/Copy URL button. This will open up your chatbot in a new window.
Your new chatbot will launch with the default phrase “Hello, Welcome to your first Project.”
This is because by new project defaults, our ‘Launch’ node right now is connected to the ‘Say’ node in our “Launch” tab within Experience Designer.
...
| Info |
|---|
Learn about the different Experience Designer nodes here: 3.1.5 Default Nodes in Experience Designer. |
To invoke your new Flow Studio conversation, you can type in the utterances “flow” or “flow studio” in the chatbot.
...
If you want to directly launch your own Flow studio conversation, add a ‘Launch’ node to the “Flow manager” tab and connect it to the ‘Set Flow Id’ node, as shown below.
...
Delete the ‘Launch’ node from the “Launch” tab and hit Deploy.
Now when you refresh the chatbot URL, your first message from your Flow Studio conversation should launch directly.
...
You have successfully created your first chatbot!
Video Content
https://cdn.orbita.cloud/assets/orbita/general/createfirstchatbot.mp4