Website + Telegram Mini-Apps

Purpose

This system is designed to be a mini app feature but can also be integrated into regular websites. It adds the ability to create buttons that provide access to our ads.
These buttons allow users to interact with ads by clicking on them and triggering tasks. After completing the task, you will have the option to give a reward in return.

Code Overview

1. Postback Value

window.postbackValue=""

Please provide your account manager with a postback URL that will be handled on your side to receive a GET request.
The CLICK_ID is the window.postbackValue that will be returned for you in the GET request

This value will be returned in your backend postback URL. If not needed, you can assign a random value and ignore it.

2. The Task Array

useEffect(() => {
        const taskCheckingInterval = setInterval(() => {
            if (window['manualTasks'] && Object.keys(window['manualTasks']).length > 0) {
                clearInterval(taskCheckingInterval);
                setAdsArray(window['manualTasks']);
            }
        }, 2000);

        return () => clearInterval(taskCheckingInterval);
    }, []);

The manualTasks property is used to set and get an array of ads. The array can contain up to 3 items that will be displayed on the page.

3. Create Buttons

return (
        <div>
            {adsArray && adsArray.length > 0 ? (
                adsArray.map((ad, index) => (
                    <div key={index}>
                        <button id={`ad-btn-${index}`} onClick={() => window.runTask(index)}>{ad.title}</button>
                    </div>
                ))
            ) : (
                <p className="text-white text-lg font-semibold">No ads available.</p>
            )}
        </div>
    );
    });
}

Each button:
- Is assigned a unique ID. (using index to identify)
- Displays the title of the ad. (optional)
- Triggers the runTask() function when clicked and updates the button text to "loading..." (optional) while the task is in progress.

Note: Make sure to replace app with the ID of your container element

4. Task Completion

useEffect(() => {
        // Assigning the taskCompleted function to window
        window.taskCompleted = (index) => {
            const adButton = document.getElementById(`ad-btn-${index}`);
            if (adButton) {
                adButton.disabled = true;
                adButton.textContent = "Completed";
            }
        };

        // Cleanup function to detach taskCompleted when component unmounts
        return () => {
            delete window.taskCompleted;
        };
    }, []);

The taskCompleted function is called when an ad task is completed.

5. Full implementation example

import {useState, useEffect} from 'react';

const Rewarded = () => {
    const [adsArray, setAdsArray] = useState([]);
    window.postbackValue = 50

    useEffect(() => {
        const taskCheckingInterval = setInterval(() => {
            if (window['manualTasks'] && Object.keys(window['manualTasks']).length > 0) {
                clearInterval(taskCheckingInterval);
                setAdsArray(window['manualTasks']);
            }
        }, 2000);

        return () => clearInterval(taskCheckingInterval);
    }, []);

    useEffect(() => {
        // Assigning the taskCompleted function to GLOBAL
        window.taskCompleted = (index) => {
            const adButton = document.getElementById(`ad-btn-${index}`);
            if (adButton) {
                adButton.disabled = true;
                adButton.textContent = "Completed";
            }
        };

        // Cleanup function to detach taskCompleted when component unmounts
        return () => {
            delete window.taskCompleted;
        };
    }, []);

    return (
        <div>
            {adsArray && adsArray.length > 0 ? (
                adsArray.map((ad, index) => (
                    <div key={index}>
                        <button id={`ad-btn-${index}`} onClick={() => window.runTask(index)}>{ad.title}</button>
                    </div>
                ))
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

export default Rewarded;

Updated on: 22/12/2024