Telegram have Web Apps now. So BB supports Web Apps too.
It is possible render text (html, css, js, json...) content to web. For example:
// command webExample// get url for Web pagevar url =WebApp.getUrl({ command:"webExample",// you can pass options// options: { any: "options", here: "possible" } });// we can get page url on botBot.inspect(url);// html contentvar content ="<h1>Hello from "+bot.name +"</h1>"// render this command in webWebApp.render({ content: content });
Go to bot and sent text webExample. You will have link to this page:
Passing data to BJS
It is possible to pass data from web via url params or via options on WebApp.getUrl. For example your url is:
key and value must be encoded (it can not have this symbols: " ", "?", "&" and others). You can use encodeURIComponent JS method or another accord your language.
In BJS you can access to this data via options:
let key =options.keylet anotherKey =options.another_key// or more simple:// let {key, anotherKey } = options
Templates
It is hard to edit html in Java Script. Templates are a good way to organize your web application.
// command indexWebApp.render({ template:"index.html"// you can pass mime type also:// mime_type: "text/html", // html by default});
Possible mime types: text/css, text/csv, text/javascript, text/css, text/html, application/json and etc
command "index.html":
<!-- it is html template. --><html> <body> <h1>Hello from <%bot.name%></h1><!-- Just calc 2+2 --> 2 + 2 = <% 2+2 %> </body></html>
You can use bjs tag: <% your BJS code %> in this template.
We have:
Passing Variables
Do not use long code in bjs tag <% %>
It is bad. You can pass any vars to template
For example we can pass CSS file and test variable.
var webExample =WebApp.getUrl({ command:"webExample" });Api.sendMessage({ text:"🤑 Try our web page", reply_markup: { inline_keyboard: [ [// open the any web page on button pressing { text:"open Demo Page (from help)", web_app: { url: webExample } }, ] ]}});
Keyboard button
var webExample =WebApp.getUrl({ command:"webExample" });Api.sendMessage({ text:"It is example for BB Web App", reply_markup: { resize_keyboard:true, keyboard: [// line 1 [ { text:"🤑 Open Web App" }, { text:"Open App", web_app: { url: webExample } } ] ] }})
Why Bot.sendMessage method is not working on Web App?
Bot.sendMessage - it is method for sending message to user in Telegram. The Web App is not a Telegram chat, so there is no user, chat, etc. - anyone can open this web app, the user can share it with other users, etc.
For sending message you need to pass chat id and use something like AJAX request to bot via Webhook (it can be more secure) or via another Web App endpoint with passing data.
How i can make AJAX requests from my Web App?
This question is now about web development, not bot development. We have jQuery and other methods, libraries (the list is really long). You can include any external js library in your application and use it. Go to the Internet - there is a lot of information there and our help is not the place where this question should be covered
How to use BB Libs in Web App?
BB Libs - it is bot libs not Web app Libs. You can not use libs in Web App
How to display personal user's data on web page?
You need to pass this data via url:
// command webExample// get url for Web pagevar url =WebApp.getUrl({ command:"webExample",// you can pass options options: { user: user, chat: chat } });// we can get page url on botBot.inspect(url);
So you will have this data in address and can extract it with JavaScript and window.location.search or etc.
If you want more data or if you need any dynamic content - you can use Webhook to bot (or another WebApp-endpoints) + AJAX requests.
