Skip to main content

Threlte

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 SDK from NPM like so:

npm install @borellion/threlte-sdk

You will also need @threlte/core, svelte, and three as dependencies if they aren't already installed:

npm install @threlte/core svelte three

Once installed, import the Borellion component:

<script>
  import Borellion from '@borellion/threlte-sdk';
</script>

Step 2 - Bringing the Borellion Banner into your scene​

Inside your <Canvas> component, add a <Borellion> banner:

<Canvas>
  <Borellion adUnit="YOUR_AD_UNIT_ID" format="billboard" position={[0, 2, 0]} />
</Canvas>

Replace YOUR_AD_UNIT_ID with your own ad unit ID.

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

<Canvas>
  <Borellion adUnit="YOUR_AD_UNIT_ID" format="billboard" beacon={false} position={[0, 2, 0]} />
</Canvas>

Step 3 - Customizing your banner display​

These are the available props 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="billboard"

position optional - defaults to [0, 0, 0]

Array: The [x, y, z] position of the banner in the scene.

height optional - defaults to 1

Number: Scale the banner to your liking.

beacon optional - defaults to true

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

prebid optional - defaults to true

Boolean: 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.

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.

Source Reference​

<Borellion
  adUnit="YOUR_AD_UNIT_ID"
  format="YOUR_AD_UNIT_FORMAT"
  beacon={true}
  prebid={true}
  position={[X, Y, Z]}
/>