@nektarlabs/adsterix-widget

A React component that lets you embed Adsterix ads anywhere in your app.

Adsterix is a platform that lets creators monetize their visibility on Farcaster, built on Base (the chain for creators). Creating an ad is as simple as posting a cast via the Adsterix miniapp: this generates an ad-cast, a Farcaster cast with an embed whose image and link automatically update based on auction results. Ads are split into time-based slots, and the winning bidder controls that slot’s call-to-action.

Brands and users simply browse an ad, bid for a slot, upload their creative (image + link), and they’re live.

If you’re a creator, a miniapp builder, or you want to monetize your product’s surface area (feeds, widgets, overlays, dashboards, etc.), you can drop this component into your app and start earning from Adsterix ads on day one.

Installation

npm install @nektarlabs/adsterix-widget

or

yarn add @nektarlabs/adsterix-widget

or

pnpm add @nektarlabs/adsterix-widget

Usage

import { AdsterixWidget } from "@nektarlabs/adsterix-widget"

function App() {
  return <AdsterixWidget castHash="0xbf59074b94c5fd1c6b3ee1a7201708da3f60998f" />
}

Getting a Cast Hash

To display an ad, you need a cast hash of the corresponding Farcaster cast. Follow these steps:

1. Create an ad using the Adsterix miniapp: https://farcaster.xyz/miniapps/nOlHtdHWXJ6H/adsterix
2. Navigate to your ad's cast on Farcaster
3. Click the three dots (⋮) in the top right corner of the cast
4. Select "Copy cast hash"
5. Use the copied hash as the castHash prop

Props

| Prop | Type | Default | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | -------------------------------------------------------------------------------------------- | | castHash | string | — | The Farcaster cast hash of the ad to display | | onClose | () => void | — | Callback fired when the user closes the ad | | width | string \| number | "100%" | Width of the widget (px or string) | | height | string \| number | — | Height of the widget (px or string). If not provided, maintains 3:2 aspect ratio | | defaultImage | string | — | Default image URL to display when no buyer has purchased the ad slot | | showAdSparkleLabel | boolean | false | Whether to show the "Ad ✨" label overlay | | showCloseButton | boolean | false | Whether to show the close button | | showBuySlotButton | boolean | false | Whether to show the "Buy Slot" button | | showCtaButton | boolean | false | Whether to show the CTA (call-to-action) button | | showCtaButtonIcon | boolean | false | Whether to show the external link icon on the CTA button | | ctaButtonText | string | "Learn More" | Custom text for the CTA button | | ctaNodes | React.ReactNode[] | — | Custom nodes to render instead of the default CTA / Buy Slot buttons | | onCtaNodeClick | (index: number, e: React.MouseEvent, ctaDetails: CtaDetails \| null) => void | — | Callback fired when a custom CTA node is clicked, receives the node index, event and details | | onBuySlotClick | (buySlotUrl: string) => void | — | Callback fired when the "Buy Slot" button is clicked, receives the buy slot URL | | onCtaButtonClick | (ctaDetails: CtaDetails) => void | — | Callback fired when the CTA button is clicked, receives the ctaDetails | | onAdClick | (ctaDetails: CtaDetails) => void | — | Callback fired when the entire ad is clicked, receives the ctaDetails | | position | "bottom-left" \| "bottom-right" \| "top-left" \| "top-right" \| "bottom-center" \| "top-center" \| "center-left" \| "center-right" | "bottom-right" | Position of the CTA buttons container | | containerStyle | React.CSSProperties | — | Custom styles for the widget container | | buySlotButtonStyle | React.CSSProperties | — | Custom styles for the "Buy Slot" button | | ctaButtonStyle | React.CSSProperties | — | Custom styles for the CTA button |

Example

License

MIT © Nektar Labs