Aller au contenu principal
Zenovaydocs
7 min de lecture

Widgets Intégrables

Zenovay fournit des widgets prêts à l'emploi que vous pouvez intégrer sur votre site web pour afficher le nombre de visiteurs en direct, les chronologies d'activité et les répartitions géographiques. Aucune authentification requise ; utilisez simplement votre code de suivi.

Types de Widgets

WidgetDescriptionCas d'utilisation
RealtimeNombre de visiteurs en directAfficher les visiteurs actuellement en ligne
PreviewChronologie d'activité sur 24 heuresAfficher l'activité des visiteurs au cours de la journée précédente
RecentRépartition par pays sur 30 minutesAfficher les emplacements récents des visiteurs

URL de Base

Tous les points de terminaison des widgets sont disponibles à :

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

Remplacez {trackingCode} par le code de suivi de votre site web (par exemple, ZV_XXXXXXXXXXX).

Widget Realtime

Affiche le nombre actuel de visiteurs en direct sur votre site web :

GET/widgets/:trackingCode/realtime

Widget de nombre de visiteurs en direct

Paramètres de Requête :

ParamètreTypeDéfautDescription
mainTextSizestring48pxTaille de police pour le nombre de visiteurs
primaryColorstring#e78468Couleur d'accent principale (hex)
themestringsystemThème : light, dark, ou system
hideBrandingbooleanfalseMasquer le pied de page "Powered by Zenovay" (Enterprise)
Intégrer avec iframeHTML
<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>

Aperçu du Widget :

Le widget realtime affiche :

  • Grand numéro de nombre de visiteurs
  • Étiquette "visitors online now"
  • Indicateur de pulse animé
  • Pied de page de marque optionnel

Widget Preview (Chronologie 24 heures)

Affiche l'activité des visiteurs au cours des 24 dernières heures sous forme de graphique chronologique :

GET/widgets/:trackingCode/preview

Widget de chronologie d'activité sur 24 heures

Paramètres de Requête :

ParamètreTypeDéfautDescription
mainTextSizestring36pxTaille de police pour le nombre total
primaryColorstring#e78468Couleur de la ligne du graphique (hex)
secondaryColorstring#8dcdffCouleur de remplissage du graphique (hex)
themestringsystemThème : light, dark, ou system
Intégrer avec iframeHTML
<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>

Aperçu du Widget :

Le widget preview affiche :

  • Nombre total de visiteurs au cours des 24 dernières heures
  • Graphique de répartition par heure
  • Indicateur de l'heure de pointe
  • Flèche de tendance (haut/bas par rapport au jour précédent)

Widget Recent (Répartition par Pays)

Affiche l'activité des visiteurs des 30 dernières minutes répartie par pays :

GET/widgets/:trackingCode/recent

Répartition par pays sur 30 minutes

Paramètres de Requête :

ParamètreTypeDéfautDescription
mainTextSizestring32pxTaille de police pour le nombre
primaryColorstring#e78468Couleur d'accent principale (hex)
themestringsystemThème : light, dark, ou system
hideBrandingbooleanfalseMasquer le pied de page de marque (Enterprise)
Intégrer avec iframeHTML
<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>

Aperçu du Widget :

Le widget recent affiche :

  • Nombre de visiteurs des 30 dernières minutes
  • Pays les plus représentés avec drapeaux
  • Répartition en pourcentage par pays
  • Mise à jour en direct toutes les 30 secondes

Exemples de Styles

Thème Sombre avec Couleurs Personnalisées

Widget Thème SombreHTML
<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>

Thème Clair pour les Tableaux de Bord

Widget Tableau de BordHTML
<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>

Chargement Dynamique JavaScript

Chargez les widgets de manière dynamique avec JavaScript :

Chargement Dynamique du WidgetJavaScript
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);

Composant React

Intégrez les widgets dans les applications React :

Composant Widget ReactTSX
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}
/>

Composant Vue

Intégrez les widgets dans les applications Vue :

Composant Widget VueVUE
<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)

Les clients Enterprise peuvent supprimer la marque Zenovay :

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

Le paramètre hideBranding n'est disponible que sur le plan Enterprise. Contactez l'équipe Zenovay pour activer les widgets white-label sur votre compte.

Mise en Cache et Performance

Les widgets sont optimisés pour les performances :

  • Mis en Cache par CDN : Le HTML du widget est mis en cache à la périphérie pour un chargement rapide
  • Mises à Jour des Données : Les données en direct s'actualisent automatiquement toutes les 5 à 30 secondes
  • Léger : HTML autonome sans dépendances externes
  • Réactif : Les widgets s'adaptent à la taille de leur conteneur

Considérations de Sécurité

Les widgets affichent uniquement des données d'analytique en lecture seule. Votre code de suivi est conçu pour être public et ne peut pas être utilisé pour modifier ou accéder à des données sensibles.

  • Les widgets utilisent votre code de suivi public, pas votre clé API
  • Aucune authentification n'est requise pour afficher les widgets
  • Les données affichées sont limitées aux statistiques agrégées
  • Aucune information personnellement identifiable n'est exposée

Étapes Suivantes

Cette page vous a-t-elle été utile ?