Skip to main content

How to integrate Gramster?​

Requirements​

Insert script​

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

<script src="https://exto-auction-script.s3.eu-central-1.amazonaws.com/script.js"></script>

Initialize Gramster SDK​

Before showing the banner, you need to initialize the SDK with the init method:

ModalSDK.init() Make sure to call init() before calling the show() function.

Show banner​

For now, we have only rewarded ad format, which mean you should give user reward when he watched ad till the end.

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

javascript

 const show = async (id) => {
  try {
    await ModalSDK.init(); // Initialize the SDK first
    ModalSDK.show(id).then((result) => {
      // User watched the ad till the end
      // Your code to reward user
      console.log('result', result);
    }).catch((result) => {
      console.log('result', result);
      // User encountered an error during the ad or skipped it
      // Handle error or do nothing
    });
  } catch (error) {
    console.error('Error initializing SDK:', error);
  }
};

typescript

  const show = async (id: string): Promise<void> => {
  try {
    await ModalSDK.init(); // Initialize the SDK first
    const result = await ModalSDK.show(id);
    // User watched the ad till the end
    // Your code to reward the user
    console.log('result', result);
  } catch (error) {
    console.log('error', error);
    // User encountered an error during the ad or skipped it
    // Handle error or do nothing
  }
};

react

import React, { useEffect, useState } from 'react';
import { Button, Box, Typography } from '@mui/material';

const ExampleComponent = () => {
  const [blockId, setBlockId] = useState(''); // State to store blockId

  // Initialize the SDK when the component loads
  useEffect(() => {
    ModalSDK.init(); // SDK initialization
  }, []);

  // Function to show the ad using the provided blockId
  const handleShowAd = (id) => {
    ModalSDK.show(id)
      .then((result) => {
        // User watched the ad till the end
        // Your code to reward the user
        console.log('result', result);
      })
      .catch((result) => {
        console.log('result', result);
        // User encountered an error during the ad or skipped it
        // Handle error or do nothing
      });
  };

  return (
    <div>
      <h1>
        Integration of Gramster SDK in React
      </h1>
      <input
        type="text"
        placeholder="Enter Block ID"
        value={blockId}
        onChange={(e) => setBlockId(e.target.value)}
      />
      <button
        onClick={() => handleShowAd(blockId)}
        disabled={!blockId}
      >
        Show Ad
      </button>
    </div>
  );
};

export default ExampleComponent;

result has the following types:

javascript

interface ShowPromise {
    watchedToEnd: boolean;
    error: boolean;
    description: string;
    status: string;
}
info

ShowPromise becomes resolved if the user watches the ad till the end, otherwise rejected.

tip

Chain promise with finally if you need to add any extra action after the ad ends playing, is skipped or gets an error.

Congratulations, you've just showed your first ad using Gramster!

More Info​

Updated at: 9/2/2024