BnbAds Dev Docs

As a developer you can use our npm package to display ad on your website and generate revenue.

Installation

npm install adbase-package@latest

BnbAds Provider Setup

Wrap AdProvider around your application.

Props:

`region`: the region prop is not yet useful but will be implemented in the next iteration

`dev_wallet_address`: This address claims all the ad clicks under the respective provider

import { AdProvider } from "adbase-package";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AdProvider
          region={"<REGION>"}
          dev_wallet_address={"<WALLET_ADDRESS>"}
        >
          {children}
        </AdProvider>
      </body>
    </html>
  );
}

Display the Ad in your component

Now all. you need to do is use <DisplayAd /> in your component wherever you'd like to display the ad. Thats it! You just monetized your website 

// Import
import { DisplayAd } from "adbase-package";

// Usage
<span className="grid grid-col-1 text-gray-600">
   <DisplayAd width={800} height={800}/>
   <DisplayAd width={800} height={800}/>
   <DisplayAd width={800} height={800}/>
   <DisplayAd width={800} height={800}/>
   <DisplayAd width={800} height={800}/>
 </span>

Claim the revenue generated 🥳

  1. Visit https://bnb-ads.vercel.app/dashboard, log in using the address you provided in the prop of AdProvider.

  2. Here you can view your claimable balance, click on claim now

  3. Generate a zk-proof that you are indeed owed the amount displayed.

  4. The sponsored transaction is sent to the chain along with proof, once it's verified you'll get your revenue straight in your wallet.

Last updated