Task Integration

Requirements

have Telegram mini app
know where to show ad, if not, then see Ad integration examples

1. Create `blockId`

Create blockId with Block type Task. Detailed instruction on how to get blockId you can find in Get blockId section.

Create Task block

2. Insert script

To connect your Mini App to the AdsGram Ad Network, place the script sad.min.js in the <head> tag using this code:

html

<script src="https://sad.adsgram.ai/js/sad.min.js"></script>

3. Use `<adsgram-task>` web component

To integrate the task, use the <adsgram-task> web component.

html

<adsgram-task
   data-block-id='your-block-id'
   data-debug="true"
   class="task"
></adsgram-task>

You can use this web component in html, react, vue and other frameworks like native HTML element.

your-block-id — you get from your account on https://partner.adsgram.ai
Detailed instruction on how to get blockId you can find in Get blockId section

WARNING

'your-block-id' in task ads must be in the format 'task-xxx', where xxx are numbers.

<adsgram-task> can accept following attributes:

data-block-id — your block id from https://partner.adsgram.ai
data-debug — set to true to get test task from server.
class or className — set class name to styling task.

4. Customise task so it fits your application design

For this purpose you can use slot elements and css variables.

Slots usage

The web component supports three slots that can be styled any way you like using classes:

reward – displays the reward for completing the task.
button – the button to complete the task.
done – displayed instead of the button after completing the task.

Task slots

CSS Parameters for Customization

The component supports styling via CSS variables:

css

--adsgram-task-font-size: /* Font size of the title */
--adsgram-task-icon-size: /* Icon size */
--adsgram-task-icon-title-gap: /* Gap between the icon and the title */
--adsgram-task-icon-border-radius: /* Border radius of the icon */
--adsgram-task-button-width: /* Width of the button for completing the task */

Usage example: Css variables

<adsgram-task> has custom events, you can subscribe to this event using addEventListener the same way you do for basic HTML elements.

Types of events:

Event	Occurs
`reward`	when user complete the task
`onBannerNotFound`	when there is no task to display

More Info

See code examples for better understanding how to implement in your app.
If you have troubles with integrate check Troubleshooting section
If you use Typescript check Typescript section

Task Integration ​

Requirements ​

1. Create blockId ​

2. Insert script ​

3. Use <adsgram-task> web component ​

4. Customise task so it fits your application design ​

Slots usage ​

CSS Parameters for Customization ​

5. Subscribe to events ​

Types of events: ​

More Info ​