Docs

Quick Start

In the AproCenter -> Dashboard submit your mini-app.

navigate to the Manage page of your mini-app and copy your app key.

Install

install @aprobot/widgets as a dependency in react mini app.

npm

npm i @aprobot/widgets

Init apro widget in mini app

Initializing apro widget in base component. [ main.ts or app.ts ] (important)

react

import { useEffect } from 'react'
import { init } from '@aprobot/widgets';
 
export function App() {
  useEffect(() => {
    const app_key = 'MINI_APP_KEY'
    init(app_key)
  },[])
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

Displaying ads list and generating revenue

In each component where you intend to display ads, call the initAds function. You can call initAds independently on multiple pages.

react

import { useEffect } from 'react'
import { initAds } from '@aprobot/widgets';
 
const custom_theme = {
  item:{
      borderRadius: '1rem',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '0.5rem',
      backgroundColor: '#282828',
      color:'#fff'
  },
  logo:{
      margin:'2px 5px 2px 2px',
      borderRadius:'100%',
      width:'15%',
      height:'auto',
  },
  title:{
      textAlign: 'left',
      color: '#f5f5f5',
      fontSize:'12px',
      fontWeight:'bold',
  },
  description:{
      textAlign: 'left',
      color: '#dcdcdc',
      fontSize:'10px',
      fontWeight: 'flow'
  },
  button:{
      padding:'.5rem',
      backgroundColor: 'rgba(94,94,94,0.48)',
      borderRadius: '0.5rem'
  }
}
 
export function App() {
  useEffect(() => {
    const app_key = 'MINI_APP_KEY'
    const count = 3, // 1-10
    const container_id = 'apro-ads'
    const theme = 'auto' | 'light' | 'dark' | custom_theme
    initAds(app_key,count,container_id,theme)
  },[])
  return (
    <div>
      <h1>Hello World</h1>
      <div id="apro-ads"></div>
    </div>
  )
}