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

Object.defineProperty(window, 'manualTasks', {
    set(value) {
        this._manualTasks = value;
        createButtons(value);
    },
    get() {
        return this._manualTasks;
    }
});

The manualTasks property is used to set and get an array of ads. When you set this array, it triggers the createButtons function to generate buttons based on the data in the array. The array can contain up to 3 items that will be displayed on the page.

3. Create Buttons

function createButtons(adsArray) {
    const container = document.getElementById('app');
    adsArray.forEach((item, index) => {
        const button = document.createElement('button');
        button.id = `ad-btn-${index}`;
        button.textContent = item.title;

        button.addEventListener('click', () => {
            window.runTask(index);
            button.textContent = "loading...";
        });

        container.appendChild(button);
    });
}

The createButtons function dynamically generates buttons for each ad in the adsArray. 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

function taskCompleted(index) {
    const adButton = document.getElementById(`ad-btn-${index}`);
    adButton.disabled = true;
    adButton.textContent = "Completed";
}

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

5. Full implementation example

// A value that will be returned in your backend postback URL
// Note: If not needed, assign a random value and ignore this
window.postbackValue = "";

Object.defineProperty(window, 'manualTasks', {
    set(value) {
        this._manualTasks = value;
        createButtons(value);
    },
    get() {
        return this._manualTasks;
    }
});

// Custom function to create buttons and handle ads
function createButtons(adsArray) {
    // Make sure to replace 'app' with the ID of your container element
    const container = document.getElementById('app');

    // adsArray can contain up to 3 items on every refresh. Handle it as needed
    adsArray.forEach((item, index) => {
        // Creating the button element
        const button = document.createElement('button');
        button.id = `ad-btn-${index}`;
        button.textContent = item.title;

        // Action the button will perform to show the ad when clicked
        button.addEventListener('click', () => {
            window.runTask(index);
            button.textContent = "loading..."
        });

        container.appendChild(button);
    });
}

// After a task is completed, this function will run with the index of the ad that was completed
function taskCompleted(index) {
    const adButton = document.getElementById(`ad-btn-${index}`);
    adButton.disabled = true;
    adButton.textContent = "Completed";
}

Updated on: 22/12/2024