Skip to content

Introducing Funding

Blog/Developer guides

How to build Telegram mini-app with Unity WebGL

Joan Alavedra, Co-Founder at Openfort•4 min read
Unity WebGL Telegram Mini-App development with Openfort wallets

You can now build Telegram Mini-Apps using Unity WebGL. By combining Unity’s renderer with Openfort’s smart wallet infrastructure, developers can create onchain games that run directly inside the Telegram messenger.

See how Openfort powers Web3 gaming with embedded wallets, gas sponsorship, and session keys.

How does Unity WebGL work with Telegram?

Unity WebGL allows you to export your 3D or 2D games to run in a web browser. When these games are hosted and linked to a Telegram Mini-App, they can interact with the Telegram Web Apps SDK to authenticate users. Openfort provides a non-custodial wallet that syncs with the user's Telegram ID, so NFT minting and transaction signing happen without ever leaving the Unity window.

Reference Documentation:

Step 0: Overview and Architecture

Here is the structure and flow of the Unity WebGL Telegram Mini-App integration.

Key Components

  1. Frontend (Unity WebGL Client):

    • Built using Unity’s WebGL export.
    • Communicates with Telegram Web Apps SDK to retrieve initData for user authentication.
    • Sends initData to the backend for validation.
    • Interacts with Openfort’s SDK for blockchain operations such as wallet creation and NFT minting.

  2. Backend (Server-Side):

    • Built with Node.js and Express (or any other backend framework).
    • Validates initData to authenticate users.
    • Handles wallet generation and transaction sponsorship using Openfort.

telegram-webgl.png

Authentication Flow

Telegram’s Web Apps SDK provides an initData object for user authentication within Mini-Apps. This data contains cryptographically signed user information.

Key Concepts:

  • initData Flow:
    • The initData object is provided when the Mini-App is opened within Telegram.
    • This object is sent to the backend for validation and serves as the authentication token for user interactions.
  • Unity WebGL Integration:
    • Unity communicates with Telegram’s JavaScript SDK through Unity WebGL’s browser integration features.

Step 1: Set Up Unity WebGL Project

  1. Install Dependencies:

  2. Enable WebGL Support:

    • Go to File > Build Settings.
    • Select WebGL as the build target.
    • Click Switch Platform to enable WebGL for your project.

  3. Add Required Plugins:

    • Include a JavaScript plugin for interacting with the Telegram Web Apps SDK. This will enable Unity WebGL to retrieve initData from Telegram.

Step 2: Initialize Telegram in Unity

Use Unity’s browser integration features to fetch initData from Telegram.


_31
using UnityEngine;
_31
using Openfort.SDK;
_31
_31
public class TelegramIntegration : MonoBehaviour
_31
{
_31
void Start()
_31
{
_31
// Initialize Telegram Mini-App and fetch initData
_31
string initData = InitTelegramApp();
_31
Debug.Log("Init data: " + initData);
_31
_31
// Use initData for Openfort SDK
_31
ThirdPartyOAuthRequest request = new ThirdPartyOAuthRequest(
_31
ThirdPartyOAuthProvider.TelegramMiniApp,
_31
initData,
_31
TokenType.IdToken
_31
);
_31
_31
// Example: Validate and fetch wallet information
_31
Openfort.GetWallet(request, wallet =>
_31
{
_31
Debug.Log("Wallet Address: " + wallet.address);
_31
});
_31
}
_31
_31
string InitTelegramApp()
_31
{
_31
// JavaScript integration to retrieve initData
_31
return "Telegram InitData Placeholder"; // Replace with actual implementation
_31
}
_31
}

Step 3: Backend Setup

The backend validates initData and integrates with Openfort for wallet management.

  1. Validate initData:

    • Use Telegram’s cryptographic methods to ensure initData authenticity.
    • Refer to the Telegram Documentation for implementation details.

  2. Integrate with Openfort:

    • Use Openfort’s API to create wallets and sponsor transactions.

Step 4: Build and Test the Unity WebGL App

  1. Build the Project:

    • Go to File > Build Settings.
    • Select WebGL and click Build and Run.

  2. Host the WebGL App:

    • Deploy the build to a web server.
    • Ensure it is accessible via HTTPS, as Telegram requires secure connections for Mini-Apps.

  3. Test in Telegram:

    • Create a bot using BotFather and link the Mini-App.
    • Open the Mini-App within Telegram to test functionality.

Notes and Best Practices

  • Using initData as Access Token:

    • In Telegram Mini-App integrations, the initData object serves as the authentication token. Traditional GetAccessToken() methods from Openfort are not applicable in this context.

  • Security Reminder:

    • Always validate initData on the server-side to prevent tampering.

This integration runs a Telegram Mini-App with Unity WebGL and Openfort, adding onchain features within Telegram.

Share this article

Related Articles

  1. How to Build a Telegram Bot with Built-In Crypto Wallets

    Build a Telegram bot where /start creates a wallet and /send moves USDC gas-free, using Openfort backend wallets, plus the Mini App path for React.

  2. Mobile Wallet Protocol for Unity, a public good

    This powerful feature is now available to all game developers, enabling seamless connections between in-game wallets and the broader Web3 ecosystem.

  3. Minigames, Frames and anything in between

    Frames are a new approach to embedding dynamic, interactive content into digital platforms — minigames and anything in between.

  4. How to Migrate from Web3Modal

    This guide provides a step-by-step process to migrate your React app from Web3Modal to Openfort React

  5. From spikes to stable: eRPC in production at Openfort

    What broke, what we fixed, and what we gained moving our multi-chain RPC from an in-house Elastic stack to eRPC—with hedging, batching, and clean metrics.

  6. Prediction markets for builders: Make “belief” tradable

    Prediction markets for builders: how they work, key design choices (liquidity + resolution), and how embedded wallets make trading and settlement usable.

  7. Deep dive: Stealth Addresses

    How Ethereum's stealth address standard solves the address reuse problem without zero-knowledge proofs

  8. What Is a Crypto Onramp? How to Add One to Your App

    A crypto onramp converts fiat into crypto and delivers it to a wallet. How onramps work, the main providers, how to add one to your app, and what it costs.

Ship your first wallet in minutes

No credit card required • 2,000 operations free