Skip to main content

Creating a WebApp

Setting Up a YoPhone WebApp​

Follow these simple steps to unlock the full potential of WebApps:

  1. Create a YoAI Bot.

  2. ** Create a new web app entering /newapp command in YoAI

  3. Develop the WebApp.

    • Use standard web technologies (HTML, CSS, JavaScript) to build the WebApp.
    • Access the YoPhone WebApp API via window.YoPhone.WebApp.

  4. Host the WebApp.

  5. Example Code.

Here is a basic example of initializing a YoPhone WebApp:​
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My WebApp</title>
        <script src="https://webapps.yophone.com/js/yophone-web-app.js"></script>
    </head>
    <body>
        <h1>Welcome to YoPhone WebApp</h1>
    </body>
</html>
  1. Security Considerations.
    • Always validate initData on your server to prevent spoofing.
    • Use HTTPS to serve the WebApp.
    • Restrict access using YoPhone user authentication.

By following these steps, you can build interactive and engaging experiences inside YoPhone using WebApps.

  1. Passing Custom Start Parameters

    You can pass custom start parameters to your WebApp by appending them to the WebApp URL using the start_param query string.

    Example:
    https://webapps.yophone.com/SomeBot/SomeWebApp?start_param=someData

    Inside your WebApp, the parameter will be accessible via:

    window.YoPhone.WebApp.initDataUnsafe.start_param;