Creating telegram web app with Anvil

Show and Tell
#1

If you want to create telegram web app you can do it with best service Anvil. I will demonstrate this in the following short steps.

  1. Create some web app with Anvil (it’s very easy)


    2)Enter the settings button.


    3)Enter the publish app button


    4)After than opens form look’s like that


    image
    image740×817 52.9 KB

    click the checkbox Embed my app in a web page and copy html script. For example:
<script src="https://anvil.works/embed.js" async></script>
<iframe style="width:100%;" data-anvil-embed src="your anvil web app link"></iframe>

5)Add this script to your html page with telegram html script. You can get this script on the official website of telegram . After than deploy your app with hosting services(for example tiiny host it's free). for example : **temp.html** 

<!DOCTYPE html>
<html>
    <head> 
        <script src="https://anvil.works/embed.js" async></script>
        <iframe style="width:100%;" data-anvil-embed src="your anvil web app link"></iframe>
        <script src="https://telegram.org/js/telegram-web-app.js"></script>    
    </head>
    
    <body></body>
</html>

bot code (I used aiogram) main.py

API_TOKEN = 'your telegram bot token'

bot = Bot(token=API_TOKEN)
dp = Dispatcher(bot)


@dp.message_handler(commands="start")
async def cmd_start(message: types.Message):
    await message.answer("test",
                         reply_markup=InlineKeyboardMarkup().add(InlineKeyboardButton(
                             text="test",
                             web_app=WebAppInfo(url="your web app link"))))
if __name__ == '__main__':
    executor.start_polling(dp, skip_updates=True)

Don’t forget to create bot on the telegram.
I’m sorry for my grammar mistakes.

5 Likes