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:

What we’ve got:

Telegram inline menu

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:

Telegram quick menu

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.

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:

This is how a carousel looks like in Telegram:

Telegram carousel component

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:

Telegram list component

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:

Leave a Reply

Your email address will not be published. Required fields are marked *