Earning Technology

Do you want to create your own Telegram bot where users can earn money by watching ads? This article will guide you step-by-step through the entire process. Even if you have minimal coding knowledge, you can accomplish this easily.

Let's get started!

Step 1: Create a Telegram Bot and Web App

First, you need to use Telegram's "BotFather" to create a new bot and a web app.

Open Telegram and search for "BotFather" (choose the verified bot with the blue checkmark).

Send the /newbot command. BotFather will ask you for a name and a unique username. The username must end with _bot (e.g., MyEarningTest_bot).

After successfully creating the bot, BotFather will give you an API token. This token is very important; save it in a secure place.

Now, send the /mybots command, select your bot, and go to "Bot Settings" > "Menu Button" > "Configure Menu Button".

You will be asked to provide a URL and a name. For now, use a placeholder URL like https://google.com and a name like "Start Earning". We will change this URL later.

Step 2: Edit the Code File

Now it's time to edit the provided HTML file. Open the file with any text editor (like Notepad++, VS Code, or Sublime Text).

You'll need to change a few key things inside the <script> tag near the bottom of the file.

const ADMIN_ID = 6357701459; // IMPORTANT: Replace with your Admin Telegram ID

Replace 6357701459 with your own Telegram User ID. You can use the @userinfobot on Telegram to find your ID.

Set Your Bot's Username and Web App Name:
Locate the BOT_USERNAME and WEBAPP_NAME variables

const BOT_USERNAME = 'YourBotUsername'; // IMPORTANT: Replace with your bot's username const WEBAPP_NAME = 'YourWebAppName'; // IMPORTANT: Replace with your webapp name

In YourBotUsername, enter the username of the bot you created with BotFather (e.g., MyEarningTest_bot). In YourWebAppName, enter the name you want to use for your web app (this will be used to generate referral links).

Add Your Ad Network's Code:
This template uses specific code to display ads. You can replace it with the code from any ad network of your choice.

Replace the SDK Script: Near the top of the file, under the comment , replace the script wi

th the SDK script provided by your ad network.

Modify the Ad Function: In the code, there is a function called requestAd.

Generated javascript

 requestAd(type = 'rewarded') {
    // ...
    show_9459352(type === 'popup' ? 'pop' : undefined)
        .then(handleAdSuccess)
        .catch(handleAdError);
}

- You need to replace the show_9459352(...) function call with the function provided by your ad network for showing rewarded or pop-up ads.

Step 3: Host the File Online

Your edited HTML file now needs to be hosted online so it can be accessed via a public URL. Some easy hosting platforms for beginners are:

GitHub Pages: If you have a GitHub account, you can host your file for free.

Netlify: Another popular and user-friendly free hosting service.

Vercel: Also offers free hosting for static sites.

After hosting the file, you will get a URL (e.g., https://yourname.github.io/earning-bot/).

Step 4: Update the Bot Menu Button

For the final step, you need to go back to BotFather and update your bot's menu button.

Go to BotFather and use the /setmenubutton command again.

Select your bot.

When prompted for the URL, paste the hosting URL you obtained in Step 3.

Provide a name for the button (e.g., Launch App).

That's it! Your bot is now ready. Open your bot in Telegram, click the menu button, and check if your web app is working correctly.

Html Script

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Earning Technology</title>

<script src='//libtl.com/sdk.js' data-zone='9459352' data-sdk='show_9459352'></script>

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

<style>

/* CSS Code */

:root {

--tg-theme-bg-color: #121212; /* Darker background for a premium feel */

--tg-theme-text-color: #e0e0e0;

--tg-theme-button-color: #007bff; /* Professional blue */

--tg-theme-button-text-color: #ffffff;

--tg-theme-hint-color: #8a8a8a;

--success-color: #28a745;

--warning-color: #ffc107;

--danger-color: #dc3545;

--secondary-bg-color: #1e1e1e; /* Slightly lighter dark for cards */

--border-color: #333333;

}

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

margin: 0;

padding: 20px 15px 90px 15px; /* Increased padding for footer */

background-color: var(--tg-theme-bg-color);

color: var(--tg-theme-text-color);

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

min-height: 100vh;

box-sizing: border-box;

}

.container {

width: 100%;

max-width: 500px;

}

/* View Management */

.view {

display: none;

width: 100%;

animation: fadeIn 0.3s ease-in-out;

}

#home-view {

display: block;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(10px); }

to { opacity: 1; transform: translateY(0); }

}

.header {

margin-bottom: 25px;

}

.header h1 {

font-size: 32px;

font-weight: 700;

margin-bottom: 5px;

color: #ffffff;

}

.header p {

color: var(--tg-theme-hint-color);

font-size: 16px;

}

.card {

background-color: var(--secondary-bg-color);

padding: 25px;

border-radius: 16px;

margin-bottom: 25px;

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

border: 1px solid var(--border-color);

}

.card h2 {

margin: 0 0 12px 0;

font-size: 16px;

color: var(--tg-theme-hint-color);

font-weight: 500;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.balance-amount {

font-size: 42px;

font-weight: 700;

color: #ffffff;

margin-bottom: 10px;

}

.ad-info-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 15px;

text-align: center;

}

.ad-info-item h3 {

font-size: 20px;

font-weight: 600;

margin: 0 0 5px 0;

color: #ffffff;

}

.ad-info-item p {

font-size: 14px;

color: var(--tg-theme-hint-color);

margin: 0;

}

.daily-limit-text {

color: var(--warning-color);

font-size: 14px;

margin-top: 15px;

}

.ad-buttons {

display: flex;

flex-direction: column;

gap: 15px;

margin-bottom: 25px;

}

.btn {

width: 100%;

padding: 16px;

font-size: 18px;

font-weight: 600;

border: none;

border-radius: 12px;

cursor: pointer;

transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;

background: linear-gradient(145deg, var(--tg-theme-button-color), #0056b3);

color: var(--tg-theme-button-text-color);

box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);

}

.btn:hover {

transform: translateY(-2px);

box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);

}

.btn:active {

transform: scale(0.98);

}

.btn:disabled {

background: #555;

color: #888;

cursor: not-allowed;

box-shadow: none;

transform: none;

}

#mainWithdrawBtn {

background: linear-gradient(145deg, var(--success-color), #1e7e34);

box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);

}

#mainWithdrawBtn:disabled {

background: #555;

box-shadow: none;

}

/* Adsterra Ad Container */

.ad-container {

margin-top: 20px;

display: flex;

justify-content: center;

align-items: center;

}

.status-message {

margin-top: 20px;

padding: 12px 15px;

border-radius: 10px;

min-height: 20px;

font-weight: 500;

display: none;

animation: fadeIn 0.3s;

}

.success { display: block; background-color: rgba(40, 167, 69, 0.15); border-left: 5px solid var(--success-color); color: var(--success-color); }

.error { display: block; background-color: rgba(220, 53, 69, 0.15); border-left: 5px solid var(--danger-color); color: var(--danger-color); }

.info { display: block; background-color: rgba(0, 123, 255, 0.15); border-left: 5px solid var(--tg-theme-button-color); color: #008cff; }

/* Footer Navigation */

.footer-nav {

position: fixed;

bottom: 0;

left: 0;

right: 0;

background-color: var(--secondary-bg-color);

display: flex;

justify-content: space-around;

padding: 10px 0;

box-shadow: 0 -4px 12px rgba(0,0,0,0.3);

border-top: 1px solid var(--border-color);

}

.nav-btn {

background: none;

border: none;

color: var(--tg-theme-hint-color);

display: flex;

flex-direction: column;

align-items: center;

font-size: 12px;

font-weight: 500;

cursor: pointer;

padding: 5px 15px;

border-radius: 12px;

transition: color 0.2s, background-color 0.2s;

}

.nav-btn.active {

color: var(--tg-theme-button-color);

}

.nav-btn:hover:not(.active) {

color: #ffffff;

}

.nav-btn .icon {

width: 28px;

height: 28px;

margin-bottom: 4px;

}

/* Withdraw and Referral View */

.input-group {

margin-bottom: 20px;

text-align: left;

}

.input-group label {

display: block;

margin-bottom: 8px;

color: var(--tg-theme-hint-color);

font-size: 14px;

font-weight: 500;

}

.input-group input {

width: 100%;

padding: 14px;

border-radius: 10px;

border: 1px solid var(--border-color);

background-color: #333;

color: var(--tg-theme-text-color);

font-size: 16px;

box-sizing: border-box;

}

.input-group input:focus {

outline: none;

border-color: var(--tg-theme-button-color);

box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);

}

#referralLink {

background-color: #111;

padding: 15px;

border-radius: 10px;

word-wrap: break-word;

border: 1px dashed var(--tg-theme-hint-color);

margin-top: 15px;

cursor: pointer;

color: #e0e0e0;

transition: background-color 0.2s;

}

#referralLink:hover {

background-color: #2a2a2a;

}

.admin-panel {

display: none; /* Hidden by default */

margin-top: 30px;

padding: 15px;

border: 1px solid var(--warning-color);

border-radius: 10px;

background-color: rgba(255, 193, 7, 0.1);

}

.admin-panel h3 { color: var(--warning-color); margin-top: 0; }

</style>

</head>

<body>

<div class="container">

<div id="home-view" class="view">

<div class="header">

<h1>Earning Technology</h1>

<p>Watch Ads and Earn Money</p>

</div>

<div class="card">

<h2>Current Balance</h2>

<div class="balance-amount" id="balanceDisplay">৳ 0.00</div>

<div class="ad-info-grid">

<div class="ad-info-item">

<h3 id="adCountDisplay">0</h3>

<p>Total Ads</p>

</div>

<div class="ad-info-item">

<h3 id="dailyAdCountDisplay">0 / 1000</h3>

<p>Today's Ads</p>

</div>

<div class="ad-buttons">

<button class="btn" id="rewardedBtn">Watch Rewarded Ad (Video)</button>

<button class="btn" id="popupBtn">Watch Rewarded Ad (Pop-up)</button>

</div>

<button class="btn" id="mainWithdrawBtn" disabled>Reach ৳100 to Withdraw</button>

<div class="ad-container">

<script type="text/javascript">

atOptions = {

'key' : 'ec78c50f066b48f2ed340fc3e8a0ec14',

'format' : 'iframe',

'height' : 60,

'width' : 468,

'params' : {}

};

</script>

<script type="text/javascript" src="//www.highperformanceformat.com/ec78c50f066b48f2ed340fc3e8a0ec14/invoke.js"></script>

</div>

</div>

<div id="withdraw-view" class="view">

<div class="header">

<h1>Withdraw</h1>

<p>Request your earnings</p>

</div>

<div class="card">

<h2>Your Balance</h2>

<div class="balance-amount" id="withdrawBalanceDisplay">৳ 0.00</div>

<p style="color: var(--tg-theme-hint-color); margin-top: 15px;">Minimum withdrawal is ৳100.</p>

</div>

<div class="card">

<h2>Payment Details</h2>

<div class="input-group">

<label for="paymentNumber">Your bKash / Nagad Number</label>

<input type="tel" id="paymentNumber" placeholder="e.g., 01700000000">

</div>

<button class="btn" id="finalWithdrawBtn" disabled>Withdraw</button>

</div>

<div id="referral-view" class="view">

<div class="header">

<h1>Referrals</h1>

<p>Invite friends and earn more!</p>

</div>

<div class="card">

<h2>Your Referral Link</h2>

<p>Share this link with your friends. When they join, you get a bonus!</p>

<p id="referralLink" title="Click to copy"></p>

<p style="font-size:12px; color:var(--tg-theme-hint-color); margin-top:15px;">Note: Referral rewards require backend processing and will be credited after verification.</p>

</div>

<div class="status-message" id="statusMessage"></div>

<div class="admin-panel" id="adminPanel">

<h3>👑 Admin Panel</h3>

<p id="userInfo"></p>

</div>

<footer class="footer-nav">

<button class="nav-btn active" id="navHome">

<span class="icon">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>

</span>

<span>Home</span>

</button>

<button class="nav-btn" id="navWithdraw">

<span class="icon">

</span>

<span>Withdraw</span>

</button>

<button class="nav-btn" id="navRefer">

<span class="icon">

</span>

<span>Referrals</span>

</button>

</footer>

<script>

document.addEventListener('DOMContentLoaded', function () {

const tg = window.Telegram.WebApp;

// DOM Elements

const balanceDisplay = document.getElementById('balanceDisplay');

const adCountDisplay = document.getElementById('adCountDisplay');

const dailyAdCountDisplay = document.getElementById('dailyAdCountDisplay');

const rewardedBtn = document.getElementById('rewardedBtn');

const popupBtn = document.getElementById('popupBtn');

const mainWithdrawBtn = document.getElementById('mainWithdrawBtn');

const statusMessage = document.getElementById('statusMessage');

const withdrawBalanceDisplay = document.getElementById('withdrawBalanceDisplay');

const paymentNumberInput = document.getElementById('paymentNumber');

const finalWithdrawBtn = document.getElementById('finalWithdrawBtn');

const referralLinkDisplay = document.getElementById('referralLink');

const adminPanel = document.getElementById('adminPanel');

const userInfoDisplay = document.getElementById('userInfo');

// App Constants

const ADMIN_ID = 6357701459; // IMPORTANT: Replace with your Admin Telegram ID

const BOT_USERNAME = 'YourBotUsername'; // IMPORTANT: Replace with your bot's username

const WEBAPP_NAME = 'YourWebAppName'; // IMPORTANT: Replace with your webapp name from BotFather

const WITHDRAW_THRESHOLD = 100; // 100 Taka

const ADS_PER_PAISA = 5;

const PAISA_REWARD = 1;

const DAILY_AD_LIMIT = 1000; // Max 1000 ads per day

// App State

let state = {

balanceInPaisa: 0,

totalAdCount: 0,

dailyAdCount: 0,

lastAdDate: null

};

// ---- State Management ----

function getTodayDateString() {

return new Date().toISOString().split('T')[0];

}

function loadState() {

try {

const savedState = JSON.parse(localStorage.getItem('monetageState'));

if (savedState) {

state = savedState;

}

} catch (e) {

console.error("Could not load state from localStorage", e);

// Initialize with default state if loading fails

state = { balanceInPaisa: 0, totalAdCount: 0, dailyAdCount: 0, lastAdDate: null };

}

// Check if it's a new day to reset daily counter

if (state.lastAdDate !== getTodayDateString()) {

state.dailyAdCount = 0;

state.lastAdDate = getTodayDateString();

saveState();

}

function saveState() {

try {

localStorage.setItem('monetageState', JSON.stringify(state));

} catch (e) {

console.error("Could not save state to localStorage", e);

}

// ---- UI Updates & View Management ----

function updateUI() {

const balanceInTaka = (state.balanceInPaisa / 100).toFixed(2);

// Home View

balanceDisplay.textContent = `৳ ${balanceInTaka}`;

adCountDisplay.textContent = state.totalAdCount;

dailyAdCountDisplay.textContent = `${state.dailyAdCount} / ${DAILY_AD_LIMIT}`;

// Withdraw View

withdrawBalanceDisplay.textContent = `৳ ${balanceInTaka}`;

const isWithdrawalPossible = parseFloat(balanceInTaka) >= WITHDRAW_THRESHOLD;

mainWithdrawBtn.disabled = !isWithdrawalPossible;

mainWithdrawBtn.textContent = isWithdrawalPossible ? 'Go to Withdraw' : `Reach ৳${WITHDRAW_THRESHOLD} to Withdraw`;

finalWithdrawBtn.disabled = !isWithdrawalPossible;

finalWithdrawBtn.textContent = isWithdrawalPossible ? `Withdraw ৳${balanceInTaka}` : `Minimum ৳${WITHDRAW_THRESHOLD} required`;

// Check daily ad limit

const adLimitReached = state.dailyAdCount >= DAILY_AD_LIMIT;

rewardedBtn.disabled = adLimitReached;

popupBtn.disabled = adLimitReached;

if(adLimitReached) {

showStatus(`You have reached your daily ad limit of ${DAILY_AD_LIMIT}. Please come back tomorrow.`, 'warning');

}

function showView(viewId) {

document.querySelectorAll('.view').forEach(v => v.style.display = 'none');

document.getElementById(viewId).style.display = 'block';

document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));

const activeNav = {

'home-view': 'navHome',

'withdraw-view': 'navWithdraw',

'referral-view': 'navRefer'

}[viewId];

if(activeNav) document.getElementById(activeNav).classList.add('active');

}

let statusTimeout;

function showStatus(message, type, duration = 4000) {

clearTimeout(statusTimeout);

statusMessage.textContent = message;

statusMessage.className = `status-message ${type}`;

statusMessage.style.display = 'block'; // Make it visible

statusTimeout = setTimeout(() => {

statusMessage.style.display = 'none'; // Hide it

}, duration);

}

// ---- Ad Handling ----

function handleAdSuccess() {

state.totalAdCount++;

state.dailyAdCount++;

state.lastAdDate = getTodayDateString();

if (state.totalAdCount % ADS_PER_PAISA === 0) {

state.balanceInPaisa += PAISA_REWARD;

showStatus(`Congratulations! You earned ${PAISA_REWARD} paisa.`, 'success');

} else {

const remainingAds = ADS_PER_PAISA - (state.totalAdCount % ADS_PER_PAISA);

showStatus(`Ad watched. Watch ${remainingAds} more ad(s) to earn.`, 'info');

}

saveState();

updateUI();

}

function handleAdError(error) {

console.error('Ad Error:', error);

showStatus('Failed to load ad. Please try again.', 'error');

}

// ---- App Logic ----

function requestAd(type = 'rewarded') {

if (state.dailyAdCount >= DAILY_AD_LIMIT) {

showStatus("You've reached the daily ad limit.", 'error');

return;

}

showStatus('Loading ad, please wait...', 'info');

show_9459352(type === 'popup' ? 'pop' : undefined)

.then(handleAdSuccess)

.catch(handleAdError);

}

function handleWithdrawal() {

const balanceInTaka = (state.balanceInPaisa / 100).toFixed(2);

const paymentNumber = paymentNumberInput.value.trim();

if (parseFloat(balanceInTaka) < WITHDRAW_THRESHOLD) {

showStatus(`You need at least ৳${WITHDRAW_THRESHOLD} to withdraw.`, 'error');

return;

}

if (!paymentNumber || !/^\d{11}$/.test(paymentNumber)) {

showStatus('Please enter a valid 11-digit payment number.', 'error');

return;

}

const user = tg.initDataUnsafe.user;

const message = `Withdrawal Request:\n\nUser ID: ${user.id}\nName: ${user.first_name}\nUsername: @${user.username || 'N/A'}\n\nAmount: ৳${balanceInTaka}\nPayment No: ${paymentNumber}`;

tg.sendData(message);

showStatus('Your withdrawal request has been sent for review.', 'success');

// Reset balance after successful request

state.balanceInPaisa = 0;

saveState();

updateUI();

paymentNumberInput.value = ''; // Clear input

showView('home-view'); // Go back to home

}

function generateReferralLink() {

const user = tg.initDataUnsafe.user;

if (user && user.id && BOT_USERNAME !== 'YourBotUsername' && WEBAPP_NAME !== 'YourWebAppName') {

const link = `https://t.me/${BOT_USERNAME}/${WEBAPP_NAME}?startapp=ref${user.id}`;

referralLinkDisplay.textContent = link;

} else {

referralLinkDisplay.textContent = "Please configure Bot Username and WebApp Name in the script.";

}

// ---- Event Listeners ----

rewardedBtn.addEventListener('click', () => requestAd('rewarded'));

popupBtn.addEventListener('click', () => requestAd('popup'));

finalWithdrawBtn.addEventListener('click', handleWithdrawal);

// Navigation Listeners

document.getElementById('navHome').addEventListener('click', () => showView('home-view'));

document.getElementById('navWithdraw').addEventListener('click', () => showView('withdraw-view'));

document.getElementById('navRefer').addEventListener('click', () => showView('referral-view'));

mainWithdrawBtn.addEventListener('click', () => showView('withdraw-view'));

referralLinkDisplay.addEventListener('click', () => {

if(navigator.clipboard && referralLinkDisplay.textContent.startsWith('https://')) {

navigator.clipboard.writeText(referralLinkDisplay.textContent)

.then(() => showStatus('Referral link copied!', 'success'))

.catch(() => showStatus('Could not copy link.', 'error'));

}

});

// ---- Initialization ----

function initializeApp() {

tg.ready();

tg.expand();

loadState();

updateUI();

generateReferralLink();

// Check for Admin

const user = tg.initDataUnsafe.user;

if (user && user.id === ADMIN_ID) {

adminPanel.style.display = 'block';

userInfoDisplay.textContent = `Welcome Admin! User: ${user.first_name} (@${user.username || 'N/A'}), ID: ${user.id}`;

}

// Handle referral parameter on start

if (tg.initDataUnsafe.start_param) {

console.log("Started with param:", tg.initDataUnsafe.start_param);

showStatus('Welcome! You have joined via a referral link.', 'success');

}

initializeApp();

});

</script>

</body>

</html>

Earning Technology

Wednesday, 21 January 2026

আরোহী মীম এর ভাইরাল ৩:২৪ সেকেন্ড এর ভিডিও

Tuesday, 20 January 2026

img

Wednesday, 23 July 2025

How to Create Your Own Telegram Earning Bot: A Complete Guide

Step 1: Create a Telegram Bot and Web App

Step 2: Edit the Code File

Step 3: Host the File Online

Step 4: Update the Bot Menu Button

আরোহী মীম এর ভাইরাল ৩:২৪ সেকেন্ড এর ভিডিও

Introducing the Vacation Collection — Up to 50% Off

Contact Form

Contact Us