Creating a Chatbot from "Engage"
- Lydia Hou (Deactivated)
Overview
If you do not have access to a Google DialogFlow account for a key, you can take the steps below to create your chatbot from the Orbita default “Engage” project.
You will not be able to change the name of the “Engage” project.
Prerequisites
Access to an Orbita sandbox. To get access, please see Experience Manager or contact us.
Step 1: Create a Conversation
We will create a new conversation within Flow Studio.
Login to the Experience Manager.
Select the “Engage” project.
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.
Create a conversation using the Flow studio. Refer to Guide to Flow Studio
or follow the steps below 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:
{
"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,
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.
3. Go to your “Flow Manager” tab. Add a ‘Launch’ node, and then a ‘Change’ node.
4. Link the nodes together with wires and then connect the ‘Change’ node to the ‘Flow Manager’ node.
Learn about the different Experience Designer nodes here: 3.1.5 Default Nodes in Experience Designer.
5. Open the ‘Change’ node and name it: “Launch Flow ID.” In the “Set” section, enter in payload.flowId and then paste the copied Flow ID below and click Done.
6. Delete the ‘Launch’ node from the “Launch” tab and hit Deploy.
Step 3: Test Your Chatbot
You can access and test your new chatbot in two ways:
A. Using the URL Endpoint
B. Using the “Bot Manager” Flow Tab
A “Bot Manager” flow tab is available in every project and allows you to have an endpoint for your chatbot.
Navigate back to the Engage project and open your Experience Designer.
Go to your “Bot Manager” tab open the ‘Http in’ node connected to the ‘Bot View Template’ node named “GET“ and click on the Open/Copy URL button. This will open up your chatbot in a new window.
Your new chatbot will launch:
You have successfully created your first chatbot!