Telegram Mini App
Introduction
Telegram Mini Apps (or TMAs) are web applications that run inside the Telegram messenger.
Dynamic works out of the box with TMAs, all you need to do is get your app scaffolded, and add Dynamic by following the quickstart guide.
You can see a live example of a Dynamic integration in a TMA when using Flooz.
Intregration guide
To get started, you can use one of the TMA templates outlined here.
The basic command to scaffold a new TMA is:
npx @telegram-apps/create-mini-app@latest
Cd into the src/components/
directory in Root.tsx
file and add the Dynamic Context Provider in the returned TSX:
<AppRoot
appearance={miniApp.isDark ? 'dark' : 'light'}
platform={['macos', 'ios'].includes(lp.platform) ? 'ios' : 'base'}
>
<Router location={location} navigator={reactNavigator}>
<Routes>
{routes.map((route) => <Route key={route.path} {...route} />)}
<Route path='*' element={<Navigate to='/'/>}/>
</Routes>
</Router>
</AppRoot>
Make sure that you’ve also added the correct imports and the variable for your Dynamic environment ID:
import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core';
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
const dynEnv = import.meta.env.VITE_DYNAMIC_ENV_ID || process.env.DYNAMIC_ENV_ID;
That’s it! You should now be able to use Dynamic in your Telegram Mini App..
You can customize the integration further by following the documentation in the generated project README file.
If you have any questions or need help with the integration, feel free to reach out to us in Slack.
Was this page helpful?