Quick Start

Add the following script tag to your HTML page to load the Banzai embed component:

<script type="module" src="https://assets.banzai.org/web-components/bz-all.js"></script>

Then add the component to your page:

<bz-all subdomain="your-subdomain"></bz-all>

Your subdomain will be provided to you during onboarding.

Attributes

Example with Attributes

<bz-all
  subdomain="acme-university"
  hide-attribution="true"
></bz-all>

Deep Linking to Specific Content

Use the initial-content attribute to have the component open directly to a specific article, topic, or collection:

<!-- Open directly to an article -->
<bz-all
  subdomain="acme-university"
  initial-content="articles/budgeting-101"
></bz-all>

<!-- Open directly to a topic -->
<bz-all
  subdomain="acme-university"
  initial-content="topics/banking-basics"
></bz-all>

Users can still navigate to other content from within the component. The initial-content attribute only sets the starting page.

Content Security Policy

The embed component makes API calls to content.banzai.org. If your site uses a Content Security Policy, ensure it allows connections to this domain:

connect-src https://content.banzai.org

External Link Dialog

Content may include links to external websites. You can show a confirmation dialog before users leave your site. Enable it with the confirm-external-links attribute:

<bz-all subdomain="your-subdomain" confirm-external-links>
</bz-all>

To customize the dialog message, provide a slot="leaving-site" element inside the component:

<bz-all subdomain="your-subdomain" confirm-external-links>
  <div slot="leaving-site">
    <p>You are now leaving our website.</p>
  </div>
</bz-all>

If no slot content is provided, a default message is shown. The dialog opens external links in a new tab with noopener,noreferrer for security.

Analytics Event

A bz:external-link event is dispatched on document when a user clicks an external link. You can listen for this event for analytics or to implement custom behavior:

document.addEventListener('bz:external-link', function(e) {
  console.log('External link clicked:', e.detail.href);
  console.log('Link text:', e.detail.text);
  // Call e.preventDefault() to suppress the dialog
  // and handle navigation yourself
});

Styling Options

Customize the appearance using CSS custom properties. Set these on the component's style attribute to match your brand.

Color Properties

Method 1: Inline Style Attribute

Set CSS custom properties directly on the component using the style attribute:

<bz-all
  subdomain="your-subdomain"
  style="
    --bz-color-primary: #1e40af;
    --bz-color-primary-overlay-text: #ffffff;
    --bz-color-text: #1f2937;
    --bz-color-background: #ffffff;
  "
></bz-all>

Method 2: CSS Stylesheet

Alternatively, define the custom properties in your CSS stylesheet by targeting the bz-all element:

bz-all {
  --bz-color-primary: #1e40af;
  --bz-color-primary-overlay-text: #ffffff;
  --bz-color-text: #1f2937;
  --bz-color-background: #ffffff;
  --bz-color-background-alt: #f3f4f6;
  --bz-color-link: #1e40af;
}

This approach keeps your styling separate from HTML and makes it easier to manage multiple embeds with consistent branding.

Interactive Styler

Use the Interactive Styler to customize colors visually and generate the embed code.

Examples

See how the embed component looks in different contexts:

ACME University

Navy & Gold theme

ACME Credit Union

Teal theme

ACME Montessori

Playful crayon colors

ACME Mobile

Mobile app webview simulator

iPhone 14 Pro frame

Analytics Integration

The Banzai embed component dispatches custom events for analytics tracking. You can listen for these events and forward them to any analytics provider (Google Analytics, Segment, Mixpanel, PostHog, etc.)

Event: bz:pageview

Dispatched on document when navigation occurs:

• Initial content load
• Navigation within the embed (clicking topics, articles, etc.)
• Browser back/forward navigation

Event Detail Object

{
  path: 'articles/budgeting-basics',
  pagePath: '/#/articles/budgeting-basics',
  title: 'Page Title',
  url: 'https://example.com/#/articles/budgeting-basics',
  contentType: 'articles',  // articles, topics, collections, dashboard
  contentId: 'budgeting-basics',
  timestamp: '2025-12-15T12:00:00.000Z'
}

Example: Google Analytics

document.addEventListener('bz:pageview', function(e) {
  gtag('event', 'page_view', {
    page_path: e.detail.pagePath,
    page_title: e.detail.title,
    page_location: e.detail.url
  });
});

Example: Segment

document.addEventListener('bz:pageview', function(e) {
  analytics.page(e.detail.contentType, {
    path: e.detail.path,
    title: e.detail.title,
    url: e.detail.url
  });
});

Example: Mixpanel

document.addEventListener('bz:pageview', function(e) {
  mixpanel.track('Page View', {
    path: e.detail.path,
    content_type: e.detail.contentType,
    content_id: e.detail.contentId
  });
});