A-Frame
Repository: https://github.com/zestyxyz/sdk/tree/main/aframe
You will first need to create an ad unit on the marketplace in order to get started. Check out For Creators for more instructions.
Step 1a - Installing from CDN
You can install from our CDN by adding this script tag into your page's <head>:
<script src="https://cdn.zesty.xyz/sdk/zesty-aframe-sdk.js"></script>
Step 1b - Installing from NPM
If you are using A-Frame in an NPM project, install it like so:
npm install '@zestymarket/aframe-sdk'
Once installed, import the ZestyBanner component:
import * as Zesty from '@zestymarket/aframe-sdk';
Step 2 - Bringing the Zesty Banner into your scene
In the <a-scene>, copy and paste:
<a-entity visible="true" zesty-banner="adUnit: 0; format: medium-rectangle;" position="0 2 0"></a-entity>
Replace adUnit: 0 with your own ad unit ID.
Step 3 - Customizing your banner display
These are the available attributes for your banner:
adUnit required
The ID of your ad unit.
adUnit: { type: 'string' }
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
Scales the banner to your liking. Default value is 1.
height: { type: 'float', default: 1 }
beacon optional
Setting beacon to false allows you to opt-out of analytics on your ad unit page.
beacon: { type: 'boolean', default: false }