7 min de lectura

Widgets Incrustables

Zenovay proporciona widgets listos para usar que puedes incrustar en tu sitio web para mostrar conteos de visitantes en vivo, líneas de tiempo de actividad y desglose geográfico. No se requiere autenticación; simplemente usa tu código de seguimiento.

Tipos de Widgets

Widget	Descripción	Caso de Uso
Realtime	Conteo de visitantes en vivo	Mostrar visitantes actuales en línea
Preview	Línea de tiempo de actividad de 24 horas	Mostrar actividad de visitantes durante el último día
Recent	Desglose de 30 minutos por país	Mostrar ubicaciones recientes de visitantes

URL Base

Todos los endpoints de widgets están disponibles en:

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

Reemplaza {trackingCode} con el código de seguimiento de tu sitio web (por ejemplo, ZV_XXXXXXXXXXX).

Muestra el número actual de visitantes en vivo en tu sitio web:

GET/widgets/:trackingCode/realtime

Widget de conteo de visitantes en vivo

Parámetros de Consulta:

Parámetro	Tipo	Predeterminado	Descripción
`mainTextSize`	string	`48px`	Tamaño de fuente para el conteo de visitantes
`primaryColor`	string	`#e78468`	Color de acento primario (hex)
`theme`	string	`system`	Tema: `light`, `dark` o `system`
`hideBranding`	boolean	`false`	Ocultar pie de página "Con tecnología de Zenovay" (Empresa)

Incrustar con 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>

Vista Previa del Widget:

El widget realtime muestra:

Número grande de conteo de visitantes
Etiqueta "visitantes en línea ahora"
Indicador de pulso animado
Pie de página de marca opcional

Muestra la actividad de visitantes durante las últimas 24 horas como un gráfico de línea de tiempo:

GET/widgets/:trackingCode/preview

Widget de línea de tiempo de actividad de 24 horas

Parámetros de Consulta:

Parámetro	Tipo	Predeterminado	Descripción
`mainTextSize`	string	`36px`	Tamaño de fuente para el conteo total
`primaryColor`	string	`#e78468`	Color de línea del gráfico (hex)
`secondaryColor`	string	`#8dcdff`	Color de relleno del gráfico (hex)
`theme`	string	`system`	Tema: `light`, `dark` o `system`

Incrustar con 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>

Vista Previa del Widget:

El widget preview muestra:

Total de visitantes en las últimas 24 horas
Gráfico de desglose por hora
Indicador de hora pico
Flecha de tendencia (arriba/abajo vs. día anterior)

Muestra la actividad de visitantes de los últimos 30 minutos desglosada por país:

GET/widgets/:trackingCode/recent

Desglose de 30 minutos por país

Parámetros de Consulta:

Parámetro	Tipo	Predeterminado	Descripción
`mainTextSize`	string	`32px`	Tamaño de fuente para el conteo
`primaryColor`	string	`#e78468`	Color de acento primario (hex)
`theme`	string	`system`	Tema: `light`, `dark` o `system`
`hideBranding`	boolean	`false`	Ocultar pie de página de marca (Empresa)

Incrustar con 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>

Vista Previa del Widget:

El widget recent muestra:

Conteo de visitantes de los últimos 30 minutos
Países principales con banderas
Desglose porcentual por país
Actualización en vivo cada 30 segundos

Ejemplos de Estilo

Tema Oscuro con Colores Personalizados

Widget Tema OscuroHTML

<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>

Tema Claro para Paneles

Widget de PanelHTML

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

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

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

Carga Dinámica con JavaScript

Carga widgets dinámicamente con JavaScript:

Carga Dinámica de WidgetsJavaScript

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;
}

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

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

Componente React

Incrustra widgets en aplicaciones React:

Componente de 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`}
  />
);
}

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

Componente Vue

Incrustra widgets en aplicaciones Vue:

Componente de 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>

Etiqueta Blanca (Empresa)

Los clientes empresariales pueden eliminar la marca Zenovay:

Widget de Etiqueta BlancaHTML

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

El parámetro hideBranding solo está disponible en el plan Empresa. Contacta al equipo de Zenovay para activar widgets de etiqueta blanca en tu cuenta.

Almacenamiento en Caché y Rendimiento

Los widgets están optimizados para el rendimiento:

CDN Almacenado en Caché: El HTML del widget se almacena en caché en el perímetro para una carga rápida
Actualizaciones de Datos: Los datos en vivo se actualizan automáticamente cada 5-30 segundos
Ligero: HTML independiente sin dependencias externas
Receptivo: Los widgets se adaptan al tamaño del contenedor

Consideraciones de Seguridad

Los widgets solo muestran datos de analíticas de solo lectura. Tu código de seguimiento está diseñado para ser público y no puede usarse para modificar o acceder a datos sensibles.

Los widgets usan tu código de seguimiento público, no tu clave API
No se requiere autenticación para mostrar widgets
Los datos mostrados se limitan a estadísticas agregadas
No se expone información de identificación personal

Pasos Siguientes

API Externa - Acceso completo a la API con autenticación
Datos en Tiempo Real - Endpoints JSON para integraciones personalizadas
Eventos Personalizados - Rastrear acciones personalizadas del usuario

Widgets Incrustables

Tipos de Widgets

URL Base

Widget Realtime

Widget Preview (Línea de Tiempo de 24 Horas)

Widget Recent (Desglose por País)

Ejemplos de Estilo

Tema Oscuro con Colores Personalizados

Tema Claro para Paneles

Carga Dinámica con JavaScript

Componente React

Componente Vue

Etiqueta Blanca (Empresa)

Almacenamiento en Caché y Rendimiento

Consideraciones de Seguridad

Pasos Siguientes