--- icon: arrow-progress --- # Create your first flow This interactive tutorial will guide you through the process of building your first chatbot flow using our intuitive visual editor. No coding experience is required – just follow the steps below, and you'll have your chatbot first flow up and running in no time. {% @supademo/embed demoId="cm1tjkxgn01jcjca2ufvh7l62" url="https://app.supademo.com/demo/cm1tjkxgn01jcjca2ufvh7l62" %} This is just a basic example to get you started. Hexabot offers a wide range of features and blocks to create more complex and engaging chatbot flows. Explore the different block types, experiment with NLP/NLU features, and integrate with your content sources to build a chatbot that truly meets your needs. #### 0. Enter your login credentials. {% hint style="info" %} Default admin account credentials are **Login :** admin@admin.admin Pa**ssword :** adminadmin {% endhint %}
#### 1. Go to Hexabot visual editor page. This is your main workspace where you can build your chatbot conversation flow. In this tutorial, we will design a chatbot that can answer question about a company return policy. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/hgU8qwtDbLiBmmO-mWrXk.jpeg\&x=2054\&y=713\&fill=009185\&color=009185) #### 2. Click 'Simple Text' to insert a new block in your workspace. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/xf\_5jG03onF6ELW5dFg2V.jpg\&x=147\&y=364\&fill=009185\&color=009185) #### 3. Double-click on a block to begin making changes ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/10b-S\_Za0xipN0LOQUi6h.jpg\&x=2470\&y=983\&fill=009185\&color=009185) #### 4. Add a descriptive block title relevant to this step in the flow. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/rqMorxpDNCn4ASR99K96G.jpeg\&x=1747\&y=384\&fill=009185\&color=009185) #### 5. Toggle the switch to set this block as a starting step in the conversation. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/9IsujTlUTOCsS1MYRDlMx.jpeg\&x=2791\&y=551\&fill=009185\&color=009185) #### 6. You can trigger blocks based on custom conditions. Click 'Add Pattern' to create a new trigger. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/UoYDblK\_HGxLBTbUc\_qn1.jpg\&x=2764\&y=1090\&fill=009185\&color=009185) #### 7. Select 'NLP' from the dropdown to create a condition based on natural language understanding. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/dwhn4kTe7dQjOtBBc841n.jpg\&x=1416\&y=1396\&fill=009185\&color=009185) #### 8. NLP triggers can detect the user's intent, even if the message is in different words or forms. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/nazb\_s2kFhalgmRoZ1quX.jpg\&x=1300\&y=1403\&fill=009185\&color=009185) #### 9. Let's start by adding a greeting intent as a trigger, since this is the beginning of our conversation. You can also combine multiple triggers for more complex scenarios. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/5DCUAX4sRRI1YP2IILQZI.jpg\&x=2181\&y=1034\&fill=009185\&color=009185) #### 10. Click to select the intent 'greetings\_hello' from the list. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/1nsXs5NmIIQN9U1AXXGtN.jpg\&x=1764\&y=1294\&fill=009185\&color=009185) #### 11. Go to the 'Message' tab to configure responses. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/1XM2n7pQopRaXyF4U321y.jpg\&x=1650\&y=674\&fill=009185\&color=009185) #### 12. Expand this section to view the replacement tokens. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/IUBdMWl2cL6G90SJtCcjk.jpg\&x=2870\&y=1422\&fill=009185\&color=009185) #### 13. Select the first name replacement token ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/LF0uH1hZq0hcPM3LQxcfa.jpg\&x=1549\&y=1454\&fill=009185\&color=009185) #### 14. Copy the token ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/P52csqBY7dvaR2761fAg9.jpg\&x=1282\&y=1461\&fill=009185\&color=009185) #### 15. To customize the reply message, edit the response to 'Hi {context.user.first\_name} !' ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/NQxDq8y23UWtkenDxg5\_s.jpg\&x=1146\&y=815\&fill=009185\&color=009185) #### 16. Hit the submit button to save the block setup ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/3yAaxy3KSH6MghDGzDyQK.jpg\&x=2513\&y=1916\&fill=009185\&color=009185) #### 17. To test your conversation flow, open the chat widget launcher. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/ETeTXnEkIaoeV0HQr05oz.jpg\&x=3696\&y=1920\&fill=009185\&color=009185) #### 18. Type any form of greeting to trigger a reply from the chatbot. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/MdfwqPTCgqOIp89b18WA3.jpg\&x=2909\&y=1928\&fill=009185\&color=009185) #### 19. Return to the blocks library and add a Quick Reply block to your flow. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/6JyaPTeo\_3xmR2Sk8C-Wv.jpg\&x=151\&y=624\&fill=009185\&color=009185) #### 20. Double-click on the block to customize it. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/70glz\_-zfifRTaxIvdGPH.jpg\&x=2259\&y=979\&fill=009185\&color=009185) #### 21. Let's modify the trigger to use natural language processing (NLP) instead of basic keyword matching. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/yCDcgQKJ1sExX6-i72QPA.jpg\&x=1330\&y=963\&fill=009185\&color=009185) ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/MhkSyrREej324K3ZkghM4.jpg\&x=1275\&y=1331\&fill=009185\&color=009185) #### 23. We've previously created a new intent in our NLP provider, specifically designed to identify when a user inquires about our return policy. If you want to use this intent or define a new one in your own chatbot, you'll need to train Hexabot's NLU engine. Learn more about this feature in the [nlp-training.md](../user-guide/nlp-training.md "mention") guide: ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/FtF1bEnRR66bfUlRS5rNa.jpg\&x=2868\&y=951\&fill=009185\&color=009185) #### 24. Set this block as the starting point. Multiple blocks can serve as entry points in your flow. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/Vaz3CDNq4x3wBxUjJz8La.jpg\&x=2710\&y=553\&fill=009185\&color=009185) #### 25. Go to the 'Message' tab to configure responses for this block. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/3-2qson8zujnc0\_pNYb84.jpg\&x=1645\&y=759\&fill=009185\&color=009185) #### 26. Customize the response message by replacing the default content. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/Iagb2xFsGddefjws54vTy.jpg\&x=2875\&y=899\&fill=009185\&color=009185) #### 27. Add quick replies. Each reply will be an option the user can click instead of typing. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/NGZL6wVtr--YxJwQZh5zY.jpg\&x=1992\&y=1340\&fill=009185\&color=009185) ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/d\_0QYKjYyT4VmTYsIpJ7W.jpg\&x=1675\&y=1500\&fill=009185\&color=009185) ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/hlukf4hdWcY8OGIFvjhIw.jpg\&x=1750\&y=1635\&fill=009185\&color=009185) #### 30. Save your changes, then link the blocks together ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/hAY64A8zg90mRtraPKTH9.jpg\&x=2499\&y=1915\&fill=009185\&color=009185) #### 31. Try out the new block by asking a question about the return policy in the chat widget. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/\_B8qgX\_zbZmhglVQwq-u\_.jpg\&x=2910\&y=1930\&fill=009185\&color=009185) ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/zJKxHebaVYMptZ9uagudh.jpg\&x=2910\&y=1506\&fill=009185\&color=009185) #### 33. Depending on the user's response, we'll provide different answers. Let's add a new block to continue building our flow ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/BUnMj6j56W7cdla5jAwQX.jpg\&x=146\&y=322\&fill=009185\&color=009185) ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/436OvEZVj-iCPCQMKXFnM.jpg\&x=2796\&y=734\&fill=009185\&color=009185) #### 35. Let's name this block Return Eligibility ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/8AxxnrgwPgOkJRKcCj-sK.jpg\&x=1505\&y=576\&fill=009185\&color=009185) #### 36. Go to triggers tab ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/KFtJMTT9skBhT3YyoqHhn.jpg\&x=1042\&y=763\&fill=009185\&color=009185) #### 37. Our keyword trigger should match the option we added in the quick replies block ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/d8AMO7RW1SzaxOxcAPlxj.jpg\&x=1637\&y=946\&fill=009185\&color=009185) #### 38. Click on "Message". ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/UQ\_BeniZYiF6iIHBuFSrg.jpg\&x=1707\&y=743\&fill=009185\&color=009185) #### 39. And provide the appropriate message or messages ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/1jKLy9HJlze8fSlmDgKHt.jpg\&x=1559\&y=1087\&fill=009185\&color=009185) #### 40. Save and connect the block to the Quick Replies block to continue the conversation flow. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/zTNdIk0zKaftH-jxCWGdH.jpg\&x=2614\&y=1706\&fill=009185\&color=009185) #### 41. Go back to the chat widget ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/LggaLSXimY\_OSChbnqBpl.jpg\&x=2882\&y=1920\&fill=009185\&color=009185) #### 42. Click on "Return Eligibility". ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/LggaLSXimY\_OSChbnqBpl.jpg\&x=3104\&y=1815\&fill=009185\&color=009185) #### 43. 🎉 By following this flow, the user was able to receive accurate information about return eligibility from the chatbot. ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/j4VsCqh31Gouy\_xYnEuES.jpg\&x=2923\&y=1652\&fill=009185\&color=009185) #### 44. You can add more blocks to cover the other options like "Refund Timeframe" and "Other" by creating connecting a new block and repeating the same steps ![](https://d16ev9qffqt5qm.cloudfront.net/?s3\_key=cm13fx1ui000ykz7ijmdsawl9/1vjudS6Zw3gKe4x98h1cq.jpg\&x=268\&y=801\&fill=009185\&color=009185)