Embeddable Widgets

Embeddable widgets let you showcase your website's analytics anywhere—on your own site, a client dashboard, your portfolio, or even in presentations. Display live visitor counts, historical charts, and top countries with a simple iframe embed.

What Are Widgets?

Widgets are embeddable analytics displays that you can add to any webpage using a simple iframe code. They show real-time data from your Jetrack dashboard in a beautiful, customizable format.

What's Included

Each widget displays:

Live Visitor Count - Current active visitors (updates every minute)
Visitor Chart - Last 30 minutes of traffic (bar chart)
Top Countries - Top 3 countries by visitor count with flags

All of this updates automatically without any configuration required. Just embed and forget.

Go to Dashboard → Your Website
Click Settings (gear icon)
Select the Widgets tab

You'll see a live preview of your widget with customization options:

Text Size:

Adjust the font size (12px - 32px)
Default: 16px
Changes apply to all text in the widget

Primary Color:

Choose your brand color
Used for accent elements and visitor count
Click the color picker to select any color

Theme:

System - Matches the viewer's system preference (light/dark)
Light - Always shows light theme
Dark - Always shows dark theme

Step 3: Copy the Embed Code

Once you're happy with the preview:

Your customized iframe code is displayed below the preview
Click the Copy button
Paste it wherever you want the widget to appear

Basic Embed Code

Your widget embed code looks like this:

<iframe
  src="https://analytics.brandjet.ai/public/widgets/your-website-id/render"
  style="border: none; width: 100%; height: 400px;"
  frameborder="0"
  loading="lazy"
  title="Jetrack Widget">
</iframe>

What each part does:

src - The URL to your widget (includes your unique website ID)
style - Sets the appearance (no border, full width, fixed height)
frameborder="0" - Removes the default iframe border
loading="lazy" - Defers loading until the widget is visible (improves page speed)
title - Accessibility label for screen readers

Customizing the Size

Width:

The widget is responsive by default and fills its container width. You can set a specific width:

<iframe
  src="..."
  style="border: none; width: 600px; height: 400px;"
  ...>
</iframe>

Height:

The recommended height is 400px, but you can adjust:

<!-- Compact -->
<iframe style="... height: 350px;" ...></iframe>

<!-- Standard -->
<iframe style="... height: 400px;" ...></iframe>

<!-- Tall -->
<iframe style="... height: 500px;" ...></iframe>

Responsive Width:

To make the widget fully responsive:

<div style="max-width: 800px; margin: 0 auto;">
  <iframe
    src="..."
    style="border: none; width: 100%; height: 400px;"
    ...>
  </iframe>
</div>

Use Cases

Marketing Pages

Show social proof on landing pages:

<section class="stats-section">
  <h2>See Our Live Traffic</h2>
  <p>Real-time visitors on our website right now:</p>
  
  <iframe
    src="https://analytics.brandjet.ai/public/widgets/your-id/render"
    style="border: none; width: 100%; max-width: 600px; height: 400px;"
    frameborder="0"
    loading="lazy"
    title="Live Analytics">
  </iframe>
</section>

Portfolio Showcase

Display project analytics on your portfolio:

<div class="project-stats">
  <h3>Project Performance</h3>
  <iframe src="..." style="..." ...></iframe>
</div>

Client Dashboards

Embed analytics in client reports or dashboards:

<!-- Client reporting page -->
<div class="client-analytics">
  <h2>Website Performance</h2>
  <iframe src="..." style="..." ...></iframe>
</div>

Internal Dashboards

Display company metrics on office screens or internal tools:

<!-- TV dashboard -->
<div style="width: 1920px; height: 1080px;">
  <iframe
    src="..."
    style="border: none; width: 100%; height: 100%;"
    ...>
  </iframe>
</div>

Customization Examples

Match Your Brand

Dark theme with brand color:

<iframe
  src="https://analytics.brandjet.ai/public/widgets/your-id/render?theme=dark&primary=FF5722&textSize=18"
  ...>
</iframe>

Compact Version

Smaller text for tight spaces:

<iframe
  src="..."
  style="border: none; width: 100%; height: 350px;"
  ...>
</iframe>

Set text size to 14px in widget settings.

Full-Width Hero

Showcase analytics hero-style:

<section style="background: #f5f5f5; padding: 60px 20px;">
  <div style="max-width: 1200px; margin: 0 auto;">
    <h2 style="text-align: center; margin-bottom: 40px;">
      Live Platform Analytics
    </h2>
    <iframe
      src="..."
      style="border: none; width: 100%; height: 450px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px;"
      ...>
    </iframe>
  </div>
</section>

What Gets Displayed

Live Visitor Count

Large, prominent number showing current active visitors:

Updates every 60 seconds
Green indicator shows it's live
Same data as your real-time dashboard

Visitor Chart (Last 30 Minutes)

Bar chart showing visitors per minute for the last 30 minutes:

Each bar represents 1 minute
Auto-updates every minute
Helps visualize traffic patterns
Shows recent activity trends

Top Countries

Displays the top 3 countries by visitor count with:

Country flag
Country name
Visitor count
Based on visitors in the last 30 minutes

Privacy & Security

Public vs. Private Data

Widgets are public - anyone with the embed code can view them. They show:

✅ Live visitor count
✅ Visitor chart (last 30 minutes)
✅ Top countries

They do NOT show:

❌ Individual visitor details
❌ Pages visited
❌ Referral sources
❌ Full analytics dashboard
❌ Any personal information

If you need to disable an old widget (for example, if you shared it publicly and want to revoke access):

Go to Settings → General
Delete and re-create your website
This generates a new website ID and widget URL
Old widget URLs will stop working

Note: This also resets all your analytics data, so use with caution. In the future, we plan to add widget-specific access tokens.

Performance Considerations

Page Speed

Widgets are optimized for performance:

Lazy Loading - Use loading="lazy" to defer loading until visible
Lightweight - Widget page is minimal and fast
Cached - Static assets are cached aggressively
Async - Doesn't block your page rendering

Auto-Refresh

Widgets auto-refresh data every 60 seconds:

Doesn't require page reload
Uses minimal bandwidth
Happens in the background
Keeps data fresh without impacting performance

<iframe src="...?theme=dark" ...></iframe>

Light Sites: Set theme to "light":

<iframe src="...?theme=light" ...></iframe>

Auto (Recommended): Set theme to "system" (default) - adapts to viewer's preference.

Adding a Container

Wrap the widget in a styled container:

<div style="
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  max-width: 800px;
  margin: 0 auto;
">
  <h3 style="margin: 0 0 20px 0; color: #333;">Live Analytics</h3>
  <iframe src="..." style="border: none; width: 100%; height: 400px;"></iframe>
</div>

Responsive Design

Make widgets responsive:

<div class="widget-container" style="width: 100%; max-width: 600px; margin: 0 auto;">
  <iframe src="..." style="border: none; width: 100%; height: 400px;"></iframe>
</div>

<style>
@media (max-width: 768px) {
  .widget-container iframe {
    height: 350px;
  }
}
</style>

Limitations

Data Range

Widgets currently show:

Live Count: Current active visitors
Chart: Last 30 minutes only
Countries: Based on last 30 minutes

They don't support custom date ranges. For full historical data, check your main dashboard instead.

Customization

Current customization options:

Text size
Primary color
Theme (light/dark/system)

Future enhancements may include:

Custom date ranges for chart
Show/hide specific sections
More layout options
Custom branding

Troubleshooting

Causes:

Website ID is incorrect
Website was deleted
Network issue loading widget

Fix:

Verify the widget URL in Settings → Widgets
Copy the latest embed code
Check browser console for errors

Common issues:

Missing height in iframe style
Conflicting CSS on parent page
iframe security restrictions (if embedding on HTTPS from HTTP)

Fix:

<!-- Ensure these are set -->
<iframe
  style="border: none; width: 100%; height: 400px; display: block;"
  ...>
</iframe>

Check:

Is tracking script installed on your website?
Are there active visitors (check main dashboard)?
Hard refresh the page with the widget (Ctrl+F5 or Cmd+Shift+R)
Check if auto-refresh is working (wait 60 seconds)

Wrong Data Showing

Widgets pull data from the last 30 minutes. If you just installed the tracking script:

Wait for visitors to accumulate
Widget updates every minute
Give it a few minutes to populate

Advanced Usage

WordPress

Add to a page:

Edit your page in WordPress
Add an HTML block
Paste the iframe code
Publish

React/Next.js

function AnalyticsWidget() {
  return (
    <div className="analytics-widget">
      <iframe
        src="https://analytics.brandjet.ai/public/widgets/your-id/render"
        style={{ border: 'none', width: '100%', height: '400px' }}
        frameBorder="0"
        loading="lazy"
        title="Jetrack"
      />
    </div>
  );
}

Vue.js

<template>
  <div class="analytics-widget">
    <iframe
      src="https://analytics.brandjet.ai/public/widgets/your-id/render"
      style="border: none; width: 100%; height: 400px;"
      frameborder="0"
      loading="lazy"
      title="Jetrack"
    />
  </div>
</template>

Best Practices

Use Lazy Loading - Always include loading="lazy" to improve page speed
Set Explicit Height - Always specify a height to prevent layout shift
Match Your Theme - Choose a theme that fits your site's design
Test Responsiveness - Verify the widget looks good on mobile devices
Monitor Performance - Use browser DevTools to ensure widget loads quickly

Next Steps

Real-Time Analytics - Understand live visitor tracking

Embeddable Widgets

On this page