Mini Ad Widget Integration

Embed revenue-generating ads in your app with just two lines of code.

Live Demo

The ad above is served dynamically based on active campaigns.

Quick Start Guide

1. Add the ad container

Place this div where you want the ad to appear:

<div id="mini-ad-banner"
     data-app-id="your-app-id"
     data-publisher="0xYourPublisherAddress"
     data-slot="footer">
</div>

2. Load the widget script

Add this script tag after the container:

<script src="https://mini-ad-theta.vercel.app/mini-ad-widget.js"></script>

3. Configure your parameters

data-app-id

A unique identifier for your app (e.g., "my-mini-app")

data-publisher

Your Ethereum wallet address to receive ad revenue

data-slot

Optional placement identifier (default: "footer"). Examples: "header", "sidebar", "feed"

Advanced Configuration

Custom API Base URL

Override the default API endpoint:

<script>
  window.MINI_AD_API_BASE = 'https://your-custom-api.com';
</script>
<script src="https://mini-ad-theta.vercel.app/mini-ad-widget.js"></script>

Multiple Ad Placements

You can have multiple ads on the same page:

<!-- Header Ad -->
<div id="mini-ad-banner-header"
     data-app-id="your-app"
     data-publisher="0xYourAddress"
     data-slot="header">
</div>

<!-- Footer Ad -->
<div id="mini-ad-banner-footer"
     data-app-id="your-app"
     data-publisher="0xYourAddress"
     data-slot="footer">
</div>

<script src="https://mini-ad-theta.vercel.app/mini-ad-widget.js"></script>

How It Works

  1. The widget automatically fetches relevant ads from active campaigns
  2. Impressions are tracked when the ad loads on the page
  3. Clicks are tracked when users click on the ad banner
  4. Revenue is settled to your publisher address via smart contract
  5. You can withdraw earnings anytime from the dashboard
View Your Publisher Dashboard →