Bot Template Framework. Graphical UI.
In the last part, we learned the basics of working with the Bot Template Framework.
Starting from this part, we will do a real chatbot for a chatbot development studio, step by step, studying the framework more deeply.
Menu block
Probably one of the most popular graphic elements is the button menu, as often with the help of it you can easily show the list of available actions for the user. Therefore, we will do the same for our bot. For keyword – hi, we will send a button menu with a list of actions:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "name": "Menu Block", "type": "menu", "template": "hi;/start", "content": { "text": "Hello there! Welcome to Beedevs chatbot development studio!", "buttons": [ {"feedback": "Tell us what you think"}, {"quote": "Request a quote"}, {"about": "About"} ] } } |
What we’ve got:
When working with the menu, it is important to note that the appearance of the button menu is very dependent on the messenger on which the bot is designed. For example, for Telegram, buttons can be aligned horizontally and vertically, use inline or quick state. Therefore, our menu using the mode = “quick” field in the block will look like:
In this article, we will make only the About button active, adding the image component (an example of the use of which we have already discussed in the previous part), subscribed to the “about” keyword with several buttons and a brief description.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "name": "About Block", "template": "about" "type": "image", "content": { "text": "We are chatbots development studio. Our mission is to shape and deliver modern and easy way of communication between business and its customers by means of messengers and social networks.", "url": "https://beedevs.com/images/ms-icon-310x310.png", "buttons": { "https://beedevs.com": "Website", "articles": "Blog Articles" } } |
Carousel and List blocks in Bot Template Framework
Now let’s try to add some blog articles into a carousel. By the way, in Telegram there is no carousel as a graphic component, but using the Bot Template Framework we can still imitate it. Asking how? Very simple – the Bot Template Framework generates buttons for the carousel and switches the links to the pictures by clicking on the corresponding button, and Telegram loads the preview of the picture directly into the chat. Cool, isn’t it?
So our carousel:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "name": "Articles Block", "type": "carousel", "template": "articles", "content": [ { "title": "Bot Template Framework. First Look.", "url": "https://blog.beedevs.com/wp-content/uploads/2018/10/BTF-1-768x384.jpg", "description": "Make your first steps with Bot Template Framework", "buttons": { "https://blog.beedevs.com/en/bot-template-framework-part-1": "Read Part 1" } }, { "title": "Bot Template Framework. Graphical UI.", "url": "https://blog.beedevs.com/wp-content/uploads/2018/11/BTF-768x384.png", "description": "Dive into graphical components of Bot Template Framework", "buttons": { "https://blog.beedevs.com/en/bot-template-framework-part-2": "Read Part 2" } } ] } |
This is how a carousel looks like in Telegram:
Now let’s try to make a visual component – a list. To do this, replace the type field in “Articles Block” with “list” and we will get:
Conclusion
Using the Bot Template Framework, you can easily design multi-platform visual components, without going into the details of the work of the API, be it Telegram, Facebook or Viber.
In the next article, we will try to add a continuation script for the feedback button.
The full chatbot scenario at the end of the second part:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
{ "name": "My Hello World Bot", "blocks": [ { "name": "Menu Block", "type": "menu", "template": "hi;/start", "content": { "text": "Hello there! Welcome to Beedevs chatbot development studio!", "buttons": [ {"feedback": "Tell us what you think"}, {"quote": "Request a quote"}, {"about": "About"} ] } }, { "name": "About Block", "template": "about", "type": "image", "content": { "text": "We are chatbots development studio. Our mission is to shape and deliver modern and easy way of communication between business and its customers by means of messengers and social networks.", "url": "https://beedevs.com/images/ms-icon-310x310.png", "buttons": { "https://beedevs.com": "Website", "articles": "Blog Articles" } } }, { "name": "Articles Block", "type": "carousel", "template": "articles", "content": [ { "title": "Bot Template Framework. First Look.", "url": "https://blog.beedevs.com/wp-content/uploads/2018/10/BTF-1-768x384.jpg", "description": "Make your first steps with Bot Template Framework", "buttons": { "https://blog.beedevs.com/en/bot-template-framework-part-1": "Read Part 1" } }, { "title": "Bot Template Framework. Graphical UI.", "url": "https://blog.beedevs.com/wp-content/uploads/2018/11/BTF-768x384.png", "description": "Dive into graphical components of Bot Template Framework", "buttons": { "https://blog.beedevs.com/en/bot-template-framework-part-2": "Read Part 2" } } ] } ], "drivers": [ { "name": "telegram", "token": "635222000:AAGulXNIfCfG3KYZpSq3LUvnn0000000000" } ] } |