Skip to main content

Babylon.js

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

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.

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-babylonjs-sdk.js"></script>

Step 1b - Installing from NPM​

If you are using babylon.js in an NPM project, install it like so:

npm install '@zestymarket/babylonjs-sdk'

Once installed, import the ZestyBanner component:

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

Warning: Make sure you are using the same babylon.js version as the Zesty package, which you can check here.

If you are using an unsupported version, you can import a specific version of babylon.js from CDNs like Skypack: https://cdn.skypack.dev/babylonjs@version

Step 2 - Bringing the Zesty Banner into your scene​

Make sure you have a reference to your scene and WebXRHelper (if applicable), then copy and paste:

const zestyBanner = new ZestyBanner("0", "billboard", "standard", 3, scene, xrHelper);

Replace 0 with your own ad unit ID.

Substitute variable names as needed. The last parameter for the WebXRHelper is optional.

Step 3 - Customizing your banner display​

These are the available attributes for your banner:

info

adUnit required

String: The ID of your ad unit.

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 required

Integer: Scales the banner to your liking.

scene required

A reference to your babylon.js scene.

webXRExperienceHelper optional

A reference to a babylon.js WebXR Experience helper, if applicable. Can otherwise be omitted unless you are changing beacon settings, in which case it should be set to null.

beacon optional

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

Source Reference​

export default class ZestyBanner {
  constructor(space, network, format, style, height, scene, webXRExperienceHelper = null, beacon = false) {
    const options = {
      height: height,
      width: formats[format].width * height
    };