> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://publishers-help.ad-maven.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Website + Telegram Mini-Apps - React.js


# 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**

```javascript
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**

```javascript
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**

```javascript
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**

```javascript
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**

```javascript
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;
```