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 login 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>End</strong>s 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": ""
}
],
"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": "Do you like the document?\n",
"type": "boolean",
"category": "",
"loc": "232.52284749830793 460.08626557842007",
"yesDataLabel": "Yes",
"noDataLabel": "No",
"yesData": "",
"noData": "",
"multiScreen": {
"description": "",
"validation": {
"valid": "",
"invalid": ""
},
"voice": {
"sayText": "<p>Do you like the document?</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,
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
We will now connect the conversation we have created in Flow Studio to Experience Designer in order to be able to run it.
Copy the FlowID at the top of your new flow.
...
You can copy the
...
Flow Manager flow
...
Click on the icon on the tabs menu, you will get a new flow created.
...
FlowID from the verticle ellipses dropdown menu too.
...
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.
...
Connecting the Flow Studio with Flow Manager 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.
...
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.
Step 3: 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?
...