@bannerstudio/core

Framework-agnostic embed for Banner Studio banners — a CLS-safe iframe (reserved height + postMessage height/empty/close). Ships a vanilla API, a <banner-studio> web component, and a self-hosted <script> loader.

npm i @bannerstudio/core

Vanilla

import { createBanner } from '@bannerstudio/core'

const banner = createBanner('#banner-slot', {
  apiBase: 'https://api.bannerstud.io',
  affiliate: 'acme',
  type: 'top',      // 'top' | 'bottom' | 'inline'
  height: 90,        // reserved box height (px) — prevents layout shift
})
// banner.destroy() to remove it

Web component

import '@bannerstudio/core/element' // registers <banner-studio>

<banner-studio api-base="https://api.bannerstud.io" affiliate="acme" type="top" height="90"></banner-studio>

Self-hosted script loader

Serve dist/loader.global.js and point a <script> at it:

<script async src="https://your-cdn/loader.global.js?api=https://api.bannerstud.io&affiliate=acme&type=top&height=90"></script>

Config can also come from data-* attributes (data-api, data-affiliate, data-type, data-placement, data-height, data-target).

API

• createBanner(target, options) → { el, iframe, destroy() }
• buildEmbedUrl(options) → string — the /embed/page URL.
• attachBannerMessages(iframe, { onHeight, onEmpty, onClose }) → cleanup — scoped message listener.
• defineBannerStudioElement(tag?) / BannerStudioElement (from @bannerstudio/core/element).

options: { apiBase, affiliate, type?, placement?, height? }.