hexabot/docs/quickstart/create-your-first-flow.md
2024-09-26 14:37:22 +00:00

86 lines
5.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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="cm1ijnccx33miououc2m5b4kb" url="https://app.supademo.com/demo/cm1ijnccx33miououc2m5b4kb" %}
#### 1. Enter your login credentials.
{% hint style="info" %}
Default admin account credentials are 
**Login :** admin@admin.admin
Pa**ssword :** adminadmin
{% endhint %}
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/QuSr-J9L-S4OZpC6Ouy9s.jpg&#x26;x=2435&#x26;y=1025&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 2. Next, hit the 'Sign In' button to log in.
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/zEOEXDK9EMy9IZzV8cQ9V.jpg&#x26;x=2452&#x26;y=1302&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 3. Then, click on Simple Text block to add your first block.
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/0HZe_0sCtGm4J4uWHDGq5.jpg&#x26;x=149&#x26;y=364&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 4. Double-click on the block to edit it.
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/q547JBdmrQwnPUhj-TM2_.jpg&#x26;x=2205&#x26;y=1137&#x26;fill=009185&#x26;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.
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/srxxqPpjS9pK-qt_gxw-M.jpg&#x26;x=1612&#x26;y=952&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 6. Let's add another trigger by clicking on add pattern button
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/srxxqPpjS9pK-qt_gxw-M.jpg&#x26;x=2632&#x26;y=1091&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 7. Now, input another form of greeting that the user may use to initiate the conversation.
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/t7s0n4d-b84ithDTmTI4R.jpg&#x26;x=1490&#x26;y=1023&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 8. Toggle the switch to enable this block as a starting point for the conversation
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/Oc8N6AuBoAPyhvVTQtjie.jpg&#x26;x=2668&#x26;y=487&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 9. Subsequently, select the 'Message' tab to configure block reply message.
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/eLn6AAPDFFDgHyaO672N1.jpg&#x26;x=1620&#x26;y=674&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 10. By default, a reply message is already populated
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/4opOo52YD4JOaVMCvZ7NH.jpg&#x26;x=1682&#x26;y=1117&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 11. You can add another alternative message by clicking 'Add.'
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/D4O35BDeeQk8SSpS33SCA.jpg&#x26;x=2834&#x26;y=1306&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 12. Next, finalize your message input in the provided area.
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/msoo7TABcHOwhrZnArQm0.jpg&#x26;x=1910&#x26;y=1252&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 13. Coming up, confirm your actions by clicking 'Submit.'
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/nqBO8MBqnedNc1eXKtcXw.jpg&#x26;x=2496&#x26;y=1805&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 14. Then, open the test chat widget by clicking here.
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/l8wYnfVnzjFj3u62WlIvU.jpg&#x26;x=3704&#x26;y=1929&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 15. Start the conversation by using one of the trigger messages
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/9o2RYPkieMdJTLHzMFNkG.jpg&#x26;x=2934&#x26;y=1932&#x26;fill=009185&#x26;color=009185" alt=""><figcaption></figcaption></figure>
#### 16. Close your session by clicking in the marked area.
<figure><img src="https://d16ev9qffqt5qm.cloudfront.net/?s3_key=cm13fx1ui000ykz7ijmdsawl9/s1ztEYrD8KA1sEGhQ5YnM.jpg&#x26;x=3707&#x26;y=656&#x26;fill=009185&#x26;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.