Skip to main content

Wonderland Engine

Repository: [https://github.com/borellion/sdk)

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 1 - Installing from NPM​

Install the Borellion Wonderland SDK:

npm install '@borellion/wonderland-sdk'

Then register the Borellion component with your Wonderland Engine app:

import { Borellion } from '@borellion/wonderland-sdk';

// In your app's component registration
engine.registerComponent(Borellion);

Step 2 - Bringing the Borellion Banner into your scene​

Add a mesh object to your scene, then attach the borellion component to it via the Wonderland Editor or programmatically:

const bannerObject = engine.scene.addObject();
bannerObject.addComponent(Borellion, {
  adUnit: 'YOUR_AD_UNIT_ID',
  format: 0, // 0=mobile-phone-interstitial, 1=billboard, 2=medium-rectangle
});

Replace YOUR_AD_UNIT_ID with your own ad unit ID.

The component requires a mesh component on the same object. If no cursor-target or collision component is found, they will be created automatically.

note

Make sure you have set up a cursor in your scene to enable click interactions.

Step 3 - Customizing your banner display​

These are the available properties for your banner:

info

adUnit required

The ID of your ad unit.

adUnit: Property.string('')

format optional - defaults to medium-rectangle

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

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

format: Property.enum(['mobile-phone-interstitial', 'billboard', 'medium-rectangle'], 'medium-rectangle')

style optional - defaults to standard

The visual style of the default banner. standard displays the Borellion default banner. minimal and transparent are backwards-compatible aliases.

style: Property.enum(['standard', 'minimal', 'transparent'], 'standard')

scaleToRatio optional - defaults to true

When enabled, scales the object's width to match the banner's aspect ratio and updates the collider accordingly.

scaleToRatio: Property.bool(true)

textureProperty optional - defaults to auto

The material texture property to assign the banner to after it loads. Set to auto to detect automatically from known pipelines (Phong Opaque Textured, Flat Opaque Textured).

textureProperty: Property.string('auto')

beacon optional - defaults to true

Setting beacon to false opts you out of Borellion Analytics, which you can view on your ad unit page.

beacon: Property.bool(true)

prebid optional - defaults to true

Setting prebid to false disables Prebid/Aditude programmatic ad loading and fetches ads directly from Borellion's ad server. Use this if you need to avoid third-party cookies from demand partners.

prebid: Property.bool(true)

dynamicFormats optional - defaults to true

Loads default image URIs at runtime rather than at build time.

dynamicFormats: Property.bool(true)

dynamicNetworking optional - defaults to true

Loads networking logic at runtime rather than at build time.

dynamicNetworking: Property.bool(true)

customDefaultImage optional

A custom default image URL to display when no ad campaign is running.

customDefaultImage: Property.string('')

customDefaultCtaUrl optional

A custom default CTA URL to use when no ad campaign is running.

customDefaultCtaUrl: Property.string('')

modalTrigger optional

A custom DOM event name that triggers an ad modal overlay.

modalTrigger: Property.string('')

modalBackground optional - defaults to false

Whether to display a background behind the modal overlay.

modalBackground: Property.bool(false)

modalDelay optional - defaults to 0

Delay in seconds before the modal close button appears.

modalDelay: Property.float(0)

Step 4 - Testing Locally​

To test your integration locally with sample ads, add the ?debug=true flag to your URL (e.g., http://localhost:8080/?debug=true). This will load sample ads for testing purposes. Real ads will load when you deploy to production.