Skip to main content

react-three-fiber

Repository: https://github.com/zestyxyz/sdk/tree/main/r3f

note

You will first need to create an ad unit on the marketplace in order to get started. Check out For Creators for more instructions.

Importing the SDK​

NPM Project - install it like so:

npm install '@zestymarket/r3f-sdk'

Once installed, import the ZestyBanner component:

import * as Zesty from '@zestymarket/r3f-sdk';

HTML Script Tag - Paste this into the <head>:

<script src="https://cdn.zesty.xyz/sdk/zesty-r3f-sdk.js"></script>

Bringing the Zesty Banner into your scene​

In your VR Canvas component, copy and paste:

<ZestyBanner adUnit={'0'} format={'billboard'} position={[0, 2, 0]} />

Replace adUnit={'0'} with your own ad unit ID.

You can also pass the argument beacon={false} if you would like to opt out of Zesty Analytics. You will be able to view this on your ad unit's page, where it will display a history of visits to your ad unit and clicks on your banner.

Adding a banner to the previous example would look like this:

<ZestyBanner adUnit={'0'} format={'billboard'} beacon={true} position={[0, 2, 0]} />

Customizing your banner display​

These are the available attributes for your banner:

info

adUnit required

String: The ID of your ad unit.

adUnit={'YOUR_AD_UNIT_ID'}

format required

Determines the aspect ratio of your ad unit. Valid options are billboard, medium-rectangle, or mobile-phone-interstitial.

  • Billboard - 970 x 250
  • Mobile Phone Interstitial - 750 x 1334
  • Medium Rectangle - 300 x 250

format: { type: 'string', oneOf: ['billboard', 'medium-rectangle', 'mobile-phone-interstitial'] }

height optional - defaults to 1

Integer: Scale the banner to your liking.

beacon optional

Boolean: Setting beacon to false opts you out of Zesty Analytics which you can view on your ad unit page.

Source Reference​

<ZestyBanner
   adUnit={'YOUR_AD_UNIT_ID'}
   format={'YOUR_AD_UNIT_FORMAT'}
   beacon={true}
   position={[X, Y, Z]} 
/>