5 Min. Lesedauer

Einbettbare Widgets

Zenovay stellt einsatzbereite Widgets bereit, die Sie auf Ihrer Website einbetten können, um Live-Besucherzahlen, Aktivitätstimelines und geografische Aufschlüsselungen anzuzeigen. Keine Authentifizierung erforderlich – verwenden Sie einfach Ihren Tracking-Code.

Widget	Beschreibung	Anwendungsfall
Realtime	Live-Besucherzahl	Zeigen Sie aktuelle Online-Besucher an
Preview	24-Stunden-Aktivitäts-Timeline	Zeigen Sie Besucheraktivität des vergangenen Tages an
Recent	30-Minuten-Aufschlüsselung nach Land	Zeigen Sie aktuelle Besucherstandorte an

Basis-URL

Alle Widget-Endpunkte sind verfügbar unter:

https://api.zenovay.com/widgets/{trackingCode}

Ersetzen Sie {trackingCode} durch Ihren Website-Tracking-Code (z. B. ZV_XXXXXXXXXXX).

Zeigt die aktuelle Anzahl der Live-Besucher auf Ihrer Website an:

GET/widgets/:trackingCode/realtime

Live-Besucherzahl-Widget

Abfrageparameter:

Parameter	Typ	Standard	Beschreibung
`mainTextSize`	string	`48px`	Schriftgröße für die Besucherzahl
`primaryColor`	string	`#e78468`	Primäre Akzentfarbe (hex)
`theme`	string	`system`	Theme: `light`, `dark` oder `system`
`hideBranding`	boolean	`false`	Verstecken Sie den Footer „Powered by Zenovay" (Enterprise)

Mit iframe einbettenHTML

<iframe
src="https://api.zenovay.com/widgets/ZV_XXXXXXXXXXX/realtime?theme=dark&primaryColor=%236366f1"
width="200"
height="120"
frameborder="0"
style="border-radius: 12px; overflow: hidden;"
></iframe>

Widget-Vorschau:

Das Realtime-Widget zeigt an:

Große Besucherzahl
Label „visitors online now"
Animierter Pulsindikator
Optionaler Branding-Footer

Zeigt die Besucheraktivität der letzten 24 Stunden als Timeline-Diagramm an:

GET/widgets/:trackingCode/preview

24-Stunden-Aktivitäts-Timeline-Widget

Abfrageparameter:

Parameter	Typ	Standard	Beschreibung
`mainTextSize`	string	`36px`	Schriftgröße für die Gesamtzahl
`primaryColor`	string	`#e78468`	Diagrammlinie Farbe (hex)
`secondaryColor`	string	`#8dcdff`	Diagrammfüllfarbe (hex)
`theme`	string	`system`	Theme: `light`, `dark` oder `system`

Mit iframe einbettenHTML

<iframe
src="https://api.zenovay.com/widgets/ZV_XXXXXXXXXXX/preview?theme=light&primaryColor=%236366f1"
width="400"
height="200"
frameborder="0"
style="border-radius: 12px; overflow: hidden;"
></iframe>

Widget-Vorschau:

Das Preview-Widget zeigt an:

Gesamtbesucher der letzten 24 Stunden
Stundliche Aufschlüsselung Diagramm
Spitzenlast-Indikator
Trend-Pfeil (Auf/Ab vs. Vortag)

Zeigt die Besucheraktivität der letzten 30 Minuten aufgeschlüsselt nach Land an:

GET/widgets/:trackingCode/recent

30-Minuten-Aufschlüsselung nach Land

Abfrageparameter:

Parameter	Typ	Standard	Beschreibung
`mainTextSize`	string	`32px`	Schriftgröße für die Anzahl
`primaryColor`	string	`#e78468`	Primäre Akzentfarbe (hex)
`theme`	string	`system`	Theme: `light`, `dark` oder `system`
`hideBranding`	boolean	`false`	Verstecken Sie den Branding-Footer (Enterprise)

Mit iframe einbettenHTML

<iframe
src="https://api.zenovay.com/widgets/ZV_XXXXXXXXXXX/recent?theme=dark"
width="300"
height="250"
frameborder="0"
style="border-radius: 12px; overflow: hidden;"
></iframe>

Widget-Vorschau:

Das Recent-Widget zeigt an:

Besucherzahl der letzten 30 Minuten
Top-Länder mit Flaggen
Prozentuale Aufschlüsselung nach Land
Live-Update alle 30 Sekunden

Styling-Beispiele

Dunkles Theme mit benutzerdefinierten Farben

Widget mit dunklem ThemeHTML

<iframe
src="https://api.zenovay.com/widgets/ZV_XXXXXXXXXXX/realtime?theme=dark&primaryColor=%2310b981&mainTextSize=64px"
width="220"
height="140"
frameborder="0"
style="border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"
></iframe>

Helles Theme für Dashboards

Dashboard-WidgetHTML

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
<!-- Live Visitors -->
<iframe
  src="https://api.zenovay.com/widgets/ZV_XXXXXXXXXXX/realtime?theme=light"
  width="100%"
  height="120"
  frameborder="0"
></iframe>

<!-- 24h Timeline -->
<iframe
  src="https://api.zenovay.com/widgets/ZV_XXXXXXXXXXX/preview?theme=light"
  width="100%"
  height="120"
  frameborder="0"
></iframe>

<!-- Countries -->
<iframe
  src="https://api.zenovay.com/widgets/ZV_XXXXXXXXXXX/recent?theme=light"
  width="100%"
  height="120"
  frameborder="0"
></iframe>
</div>

JavaScript Dynamisches Laden

Laden Sie Widgets dynamisch mit JavaScript:

Dynamisches Widget-LadenJavaScript

function loadZenovayWidget(trackingCode, type, options = {}) {
const defaults = {
  theme: 'system',
  primaryColor: '#e78468',
  mainTextSize: '48px'
};

const settings = { ...defaults, ...options };
const params = new URLSearchParams(settings).toString();

const iframe = document.createElement('iframe');
iframe.src = `https://api.zenovay.com/widgets/${trackingCode}/${type}?${params}`;
iframe.width = options.width || '200';
iframe.height = options.height || '120';
iframe.frameBorder = '0';
iframe.style.borderRadius = '12px';

return iframe;
}

// Usage
const widget = loadZenovayWidget('ZV_XXXXXXXXXXX', 'realtime', {
theme: 'dark',
primaryColor: '#10b981',
width: '250',
height: '150'
});

document.getElementById('widget-container').appendChild(widget);

React-Komponente

Betten Sie Widgets in React-Anwendungen ein:

React Widget-KomponenteTSX

interface ZenovayWidgetProps {
trackingCode: string;
type: 'realtime' | 'preview' | 'recent';
theme?: 'light' | 'dark' | 'system';
primaryColor?: string;
width?: number;
height?: number;
}

function ZenovayWidget({
trackingCode,
type,
theme = 'system',
primaryColor = '#e78468',
width = 200,
height = 120
}: ZenovayWidgetProps) {
const params = new URLSearchParams({
  theme,
  primaryColor
}).toString();

return (
  <iframe
    src={`https://api.zenovay.com/widgets/${trackingCode}/${type}?${params}`}
    width={width}
    height={height}
    frameBorder="0"
    style={{ borderRadius: '12px', overflow: 'hidden' }}
    title={`Zenovay ${type} widget`}
  />
);
}

// Usage
<ZenovayWidget
trackingCode="ZV_XXXXXXXXXXX"
type="realtime"
theme="dark"
primaryColor="#10b981"
width={250}
height={150}
/>

Vue-Komponente

Betten Sie Widgets in Vue-Anwendungen ein:

Vue Widget-KomponenteVUE

<template>
<iframe
  :src="widgetUrl"
  :width="width"
  :height="height"
  frameborder="0"
  :style="{ borderRadius: '12px', overflow: 'hidden' }"
  :title="`Zenovay ${type} widget`"
/>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
trackingCode: string;
type: 'realtime' | 'preview' | 'recent';
theme?: 'light' | 'dark' | 'system';
primaryColor?: string;
width?: number;
height?: number;
}

const props = withDefaults(defineProps<Props>(), {
theme: 'system',
primaryColor: '#e78468',
width: 200,
height: 120
});

const widgetUrl = computed(() => {
const params = new URLSearchParams({
  theme: props.theme,
  primaryColor: props.primaryColor
}).toString();

return `https://api.zenovay.com/widgets/${props.trackingCode}/${props.type}?${params}`;
});
</script>

White-Label (Enterprise)

Enterprise-Kunden können das Zenovay-Branding entfernen:

White-Label-WidgetHTML

<iframe
src="https://api.zenovay.com/widgets/ZV_XXXXXXXXXXX/realtime?hideBranding=true&primaryColor=%23your-brand-color"
width="200"
height="100"
frameborder="0"
></iframe>

Der Parameter hideBranding ist nur im Enterprise-Plan verfügbar. Kontaktieren Sie das Zenovay-Team, um White-Label-Widgets für Ihr Konto zu aktivieren.

Caching und Leistung

Widgets sind für optimale Leistung optimiert:

CDN-Cached: Widget-HTML wird am Edge zwischengespeichert, um schnelles Laden zu ermöglichen
Daten-Updates: Live-Daten werden automatisch alle 5–30 Sekunden aktualisiert
Leichtgewichtig: Eigenständiges HTML ohne externe Abhängigkeiten
Responsive: Widgets passen sich der Größe ihres Containers an

Sicherheitsaspekte

Widgets zeigen nur schreibgeschützte Analysedaten an. Ihr Tracking-Code ist für die Öffentlichkeit bestimmt und kann nicht zum Ändern oder Zugreifen auf sensible Daten verwendet werden.

Widgets verwenden Ihren öffentlichen Tracking-Code, nicht Ihren API-Schlüssel
Keine Authentifizierung erforderlich, um Widgets anzuzeigen
Angezeigte Daten sind auf aggregate Statistiken beschränkt
Keine personenbezogenen Daten werden offengelegt

Nächste Schritte

External API - Vollständiger API-Zugriff mit Authentifizierung
Echtzeit-Daten - JSON-Endpunkte für benutzerdefinierte Integrationen
Benutzerdefinierte Ereignisse - Verfolgen Sie benutzerdefinierte Benutzeraktionen

Einbettbare Widgets

Widget-Typen

Basis-URL

Realtime-Widget

Preview-Widget (24-Stunden-Timeline)

Recent-Widget (Länder-Aufschlüsselung)

Styling-Beispiele

Dunkles Theme mit benutzerdefinierten Farben

Helles Theme für Dashboards

JavaScript Dynamisches Laden

React-Komponente

Vue-Komponente

White-Label (Enterprise)

Caching und Leistung

Sicherheitsaspekte

Nächste Schritte