mirror of
https://github.com/hexastack/hexabot
synced 2025-06-26 18:27:28 +00:00
GITBOOK-73: Update create your fist flow quick-start guide
This commit is contained in:
Chedli Ben Yaghlane
gitbook-bot
parent
d712588b12
commit
02611625f0
@ -6,11 +6,11 @@ icon: arrow-progress
|
||||
|
||||
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="cm1ijnccx33miououc2m5b4kb" url="https://app.supademo.com/demo/cm1ijnccx33miououc2m5b4kb" %}
|
||||
{% @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.
|
||||
|
||||
|
||||
#### 1. Enter your login credentials.
|
||||
#### 0. Enter your login credentials.
|
||||
|
||||
{% hint style="info" %}
|
||||
Default admin account credentials are 
|
||||
@ -22,64 +22,168 @@ Pa**ssword :** adminadmin
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/QuSr-J9L-S4OZpC6Ouy9s.jpg&x=2435&y=1025&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
#### 2. Next, hit the 'Sign In' button to log in.
|
||||
#### 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.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/zEOEXDK9EMy9IZzV8cQ9V.jpg&x=2452&y=1302&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 3. Then, click on Simple Text block to add your first block.
|
||||
#### 2. Click 'Simple Text' to insert a new block in your workspace.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/0HZe_0sCtGm4J4uWHDGq5.jpg&x=149&y=364&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 4. Double-click on the block to edit it.
|
||||
#### 3. Double-click on a block to begin making changes
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/q547JBdmrQwnPUhj-TM2_.jpg&x=2205&y=1137&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 5. By default, the Simple Text block comes with a predefined trigger. A trigger in a block defines the specific condition or event that must occur for that block to be activated and execute its actions.
|
||||
#### 4. Add a descriptive block title relevant to this step in the flow.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/srxxqPpjS9pK-qt_gxw-M.jpg&x=1612&y=952&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 6. Let's add another trigger by clicking on add pattern button
|
||||
#### 5. Toggle the switch to set this block as a starting step in the conversation.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/srxxqPpjS9pK-qt_gxw-M.jpg&x=2632&y=1091&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 7. Now, input another form of greeting that the user may use to initiate the conversation.
|
||||
#### 6. You can trigger blocks based on custom conditions. Click 'Add Pattern' to create a new trigger.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/t7s0n4d-b84ithDTmTI4R.jpg&x=1490&y=1023&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 8. Toggle the switch to enable this block as a starting point for the conversation
|
||||
#### 7. Select 'NLP' from the dropdown to create a condition based on natural language understanding.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/Oc8N6AuBoAPyhvVTQtjie.jpg&x=2668&y=487&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 9. Subsequently, select the 'Message' tab to configure block reply message.
|
||||
#### 8. NLP triggers can detect the user's intent, even if the message is in different words or forms.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/eLn6AAPDFFDgHyaO672N1.jpg&x=1620&y=674&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 10. By default, a reply message is already populated
|
||||
#### 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.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/4opOo52YD4JOaVMCvZ7NH.jpg&x=1682&y=1117&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 11. You can add another alternative message by clicking 'Add.'
|
||||
#### 10. Click to select the intent 'greetings\_hello' from the list.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/D4O35BDeeQk8SSpS33SCA.jpg&x=2834&y=1306&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 12. Next, finalize your message input in the provided area.
|
||||
#### 11. Go to the 'Message' tab to configure responses.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/msoo7TABcHOwhrZnArQm0.jpg&x=1910&y=1252&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 13. Coming up, confirm your actions by clicking 'Submit.'
|
||||
#### 12. Expand this section to view the replacement tokens.
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/nqBO8MBqnedNc1eXKtcXw.jpg&x=2496&y=1805&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 14. Then, open the test chat widget by clicking here.
|
||||
#### 13. Select the first name replacement token
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/l8wYnfVnzjFj3u62WlIvU.jpg&x=3704&y=1929&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 15. Start the conversation by using one of the trigger messages
|
||||
#### 14. Copy the token
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/9o2RYPkieMdJTLHzMFNkG.jpg&x=2934&y=1932&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
#### 16. Close your session by clicking in the marked area.
|
||||
#### 15. To customize the reply message, edit the response to 'Hi {context.user.first\_name} !'
|
||||
|
||||
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/s1ztEYrD8KA1sEGhQ5YnM.jpg&x=3707&y=656&fill=009185&color=009185" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
|
||||
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 features, and integrate with your content sources to build a chatbot that truly meets your needs.
|
||||
#### 16. Hit the submit button to save the block setup
|
||||
|
||||
|
||||
|
||||
#### 17. To test your conversation flow, open the chat widget launcher.
|
||||
|
||||
|
||||
|
||||
#### 18. Type any form of greeting to trigger a reply from the chatbot.
|
||||
|
||||
|
||||
|
||||
#### 19. Return to the blocks library and add a Quick Reply block to your flow.
|
||||
|
||||
|
||||
|
||||
#### 20. Double-click on the block to customize it.
|
||||
|
||||
|
||||
|
||||
#### 21. Let's modify the trigger to use natural language processing (NLP) instead of basic keyword matching.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 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:
|
||||
|
||||
|
||||
|
||||
#### 24. Set this block as the starting point. Multiple blocks can serve as entry points in your flow.
|
||||
|
||||
|
||||
|
||||
#### 25. Go to the 'Message' tab to configure responses for this block.
|
||||
|
||||
|
||||
|
||||
#### 26. Customize the response message by replacing the default content.
|
||||
|
||||
|
||||
|
||||
#### 27. Add quick replies. Each reply will be an option the user can click instead of typing.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 30. Save your changes, then link the blocks together
|
||||
|
||||
|
||||
|
||||
#### 31. Try out the new block by asking a question about the return policy in the chat widget.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 33. Depending on the user's response, we'll provide different answers. Let's add a new block to continue building our flow
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 35. Let's name this block Return Eligibility
|
||||
|
||||
|
||||
|
||||
#### 36. Go to triggers tab
|
||||
|
||||
|
||||
|
||||
#### 37. Our keyword trigger should match the option we added in the quick replies block
|
||||
|
||||
|
||||
|
||||
#### 38. Click on "Message".
|
||||
|
||||
|
||||
|
||||
#### 39. And provide the appropriate message or messages
|
||||
|
||||
|
||||
|
||||
#### 40. Save and connect the block to the Quick Replies block to continue the conversation flow.
|
||||
|
||||
|
||||
|
||||
#### 41. Go back to the chat widget
|
||||
|
||||
|
||||
|
||||
#### 42. Click on "Return Eligibility".
|
||||
|
||||
|
||||
|
||||
#### 43. 🎉 By following this flow, the user was able to receive accurate information about return eligibility from the chatbot.
|
||||
|
||||
|
||||
|
||||
#### 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
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user