Web App integration with Tilda

Views:3110

In this article we will set up the connection between the commands in the bot and the buttons on the site of the Tilda website builder through the Web App technology.

Previously this functionality was available only to those who built sites on CMS, now this opportunity has appeared for fans of the Tilda website builder.

One of the most popular examples of a Web App in Telegram is the @DurgerKingBot.

To customize we will need to:

  • Create 2 commands in the builder
    Insert the script into a page in Tilde.

How it works:

  • Place a link to a website page in the regular keyboard via the Web Application (Link) item - this functionality does not work in the inline.

  • Insert the script into the HTML block

  • Insert the template text into the Tilda button.


Video instruction:

Script

A mandatory step is to insert HTML script in the code of the entire site or a separate page, to do this you need to select in Tilda: All blocks - Other - HTML - Code, in the block insert:

<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script src="https://puzzlebot.top/webapp.js"></script>
<script src="https://puzzlebot.top/webapp_tilda.js"></script>

In the buttons that should trigger bot commands, we insert a format link:

#pbt_cmd COMMAND_NAME

It is important to specify the reference correctly:

  1. There is a space between #pbt_cmd and the command name

  2. Write the command name in English letters

Don't forget to publish the changes on the site and in the constructor.

Done! Now we have the opportunity to come up with new unusual mechanics for linking bot and website.
 

Was this page helpful?