Task code examples

Vanilla js

htmlcssjs

html

<adsgram-task data-block-id='task-7308' data-debug='true' class='task'>
  <p slot='reward' class='task__reward'>🪙 100</p>
  <div slot='button' class='task__button'>go</div>
  <div slot='done' class='task__button task__button_done'>done</div>
</adsgram-task>

css

.task {
  --adsgram-task-font-size: 16px; /* min 14px */
  --adsgram-task-icon-size: 50px; /* min 30px */
  --adsgram-task-icon-title-gap: 15px; /* min 5px max 40px */
  --adsgram-task-button-width: 60px; /* min 40px */
  --adsgram-task-icon-border-radius: 8px;

  display: block;
  width: 328px;
  padding: 8px 16px 8px 8px;
  border-radius: 16px;
  background-color: #1d2733;
  font-family: Roboto;
  color: white;
}

.task__reward {
  margin: 5px 0 0 0;
  font-size: 14px;
}

.task__button {
  margin-left: 10px;
  background-color: #50a8eb;
  border-radius: 5px;
  padding: 6px 12px;
}

.task__button_done {
  margin-left: 0;
  background-color: #007539;
}

const task = document.querySelector(".task");
task.addEventListener("reward", (event) => {
  // event.detail contains your block id
  alert(`Reward in block ${event.detail}`);
});

task.addEventListener("onBannerNotFound", (event) => {
  alert(`Can't found banner for block ${event.detail}`);
});

React

Insert this script inside <head> tag of your HTML.

Create React Component `Task`

task.jsxtask.tsx

jsx

import { useEffect, useRef } from "react";
import styles from "./task.module.css";

export const Task = ({ debug, blockId }) => {
  const taskRef = useRef(null);

  useEffect(() => {
    const handler = (event) => {
      // event.detail contains your block id
      alert(`reward, detail = ${event.detail}`);
    };
    const task = taskRef.current;

    if (task) {
      task.addEventListener("reward", handler);
    }

    return () => {
      if (task) {
        task.removeEventListener("reward", handler);
      }
    };
  }, []);

  if (!customElements.get("adsgram-task")) {
    return null;
  }

  return (
    <adsgram-task
      className={styles.task}
      data-block-id={blockId}
      data-debug={debug}
      ref={taskRef}
    >
      <span slot="reward" className={styles.reward}>
        1000 coins
      </span>
      <div slot="button" className={styles.button}>
        go
      </div>
      <div slot="done" className={styles.button_done}>
        done
      </div>
    </adsgram-task>
  );
};

tsx

import { useEffect, useRef } from "react";
import styles from "./task.module.css";
import { JSX } from "react/jsx-runtime";

/**
  * Check Typescript section
  * and add types for <adsgram-task> typing
*/

interface TaskProps {
  debug: boolean;
  blockId: string;
}

export const Task = ({ debug, blockId }: TaskProps) => {
  const taskRef = useRef<JSX.IntrinsicElements["adsgram-task"]>(null);

  useEffect(() => {
    const handler = (event: CustomEvent) => {
      // event.detail contains your block id
      alert(`reward, detail = ${event.detail}`);
    };
    const task = taskRef.current;

    if (task) {
      task.addEventListener("reward", handler);
    }

    return () => {
      if (task) {
        task.removeEventListener("reward", handler);
      }
    };
  }, []);

  if (!customElements.get("adsgram-task")) {
    return null;
  }

  return (
    <adsgram-task
      className={styles.task}
      data-block-id={blockId}
      data-debug={debug}
      ref={taskRef}
    >
      <span slot="reward" className={styles.reward}>
        1000 coins
      </span>
      <div slot="button" className={styles.button}>
        go
      </div>
      <div slot="done" className={styles.button_done}>
        done
      </div>
    </adsgram-task>
  );
};

Task code examples ​

Vanilla js ​

React ​

Create React Component Task ​

Task code examples

Vanilla js

React

Create React Component `Task`