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.anoteher_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 } } ] ] }})