Pular para o conteúdo principal
Zenovaydocs
6 min de leitura

Widgets Incorporáveis

Zenovay oferece widgets prontos para uso que você pode incorporar no seu site para exibir contagens de visitantes em tempo real, linhas do tempo de atividade e detalhamentos geográficos. Nenhuma autenticação necessária; basta usar seu código de rastreamento.

Tipos de Widget

WidgetDescriçãoCaso de Uso
RealtimeContagem de visitantes ao vivoMostrar visitantes online agora
PreviewLinha do tempo de atividade de 24 horasExibir atividade de visitantes no último dia
RecentDetalhamento por país nos últimos 30 minutosMostrar locais de visitantes recentes

URL Base

Todos os endpoints de widget estão disponíveis em:

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

Substitua {trackingCode} pelo código de rastreamento do seu site (por exemplo, ZV_XXXXXXXXXXX).

Widget Realtime

Exibe o número atual de visitantes ativos no seu site:

GET/widgets/:trackingCode/realtime

Widget de contagem de visitantes ao vivo

Parâmetros de Consulta:

ParâmetroTipoPadrãoDescrição
mainTextSizestring48pxTamanho da fonte para a contagem de visitantes
primaryColorstring#e78468Cor de destaque primária (hex)
themestringsystemTema: light, dark ou system
hideBrandingbooleanfalseOcultar rodapé "Powered by Zenovay" (Enterprise)
Incorporar com 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>

Visualização do Widget:

O widget realtime exibe:

  • Número grande de contagem de visitantes
  • Rótulo "visitantes online agora"
  • Indicador de pulso animado
  • Rodapé de branding opcional

Widget Preview (Linha do Tempo de 24 Horas)

Exibe a atividade de visitantes nas últimas 24 horas como um gráfico de linha do tempo:

GET/widgets/:trackingCode/preview

Widget de linha do tempo de atividade de 24 horas

Parâmetros de Consulta:

ParâmetroTipoPadrãoDescrição
mainTextSizestring36pxTamanho da fonte para a contagem total
primaryColorstring#e78468Cor da linha do gráfico (hex)
secondaryColorstring#8dcdffCor de preenchimento do gráfico (hex)
themestringsystemTema: light, dark ou system
Incorporar com 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>

Visualização do Widget:

O widget preview exibe:

  • Total de visitantes nas últimas 24 horas
  • Gráfico de detalhamento por hora
  • Indicador de hora de pico
  • Seta de tendência (para cima/para baixo versus dia anterior)

Widget Recent (Detalhamento por País)

Exibe a atividade de visitantes dos últimos 30 minutos detalhada por país:

GET/widgets/:trackingCode/recent

Detalhamento por país dos últimos 30 minutos

Parâmetros de Consulta:

ParâmetroTipoPadrãoDescrição
mainTextSizestring32pxTamanho da fonte para a contagem
primaryColorstring#e78468Cor de destaque primária (hex)
themestringsystemTema: light, dark ou system
hideBrandingbooleanfalseOcultar rodapé de branding (Enterprise)
Incorporar com 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>

Visualização do Widget:

O widget recent exibe:

  • Contagem de visitantes dos últimos 30 minutos
  • Principais países com bandeiras
  • Detalhamento de percentual por país
  • Atualização ao vivo a cada 30 segundos

Exemplos de Estilo

Tema Escuro com Cores Personalizadas

Widget de Tema EscuroHTML
<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 Painéis

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

<!-- Linha do Tempo de 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>

Carregamento Dinâmico com JavaScript

Carregue widgets dinamicamente com JavaScript:

Carregamento Dinâmico de 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;
}

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

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

Componente React

Incorpore widgets em aplicações 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

Incorpore widgets em aplicações 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>

Marca Branca (Enterprise)

Clientes Enterprise podem remover a marca Zenovay:

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

O parâmetro hideBranding está disponível apenas no plano Enterprise. Entre em contato com a equipe Zenovay para habilitar widgets de marca branca em sua conta.

Cache e Desempenho

Os widgets são otimizados para desempenho:

  • Cache na CDN: HTML do widget é armazenado em cache na borda para carregamento rápido
  • Atualizações de Dados: Dados ao vivo são atualizados a cada 5-30 segundos automaticamente
  • Leve: HTML independente sem dependências externas
  • Responsivo: Widgets se adaptam ao tamanho do contêiner

Considerações de Segurança

Os widgets exibem apenas dados de análises somente leitura. Seu código de rastreamento foi projetado para ser público e não pode ser usado para modificar ou acessar dados sensíveis.

  • Os widgets usam seu código de rastreamento público, não sua chave API
  • Nenhuma autenticação é necessária para exibir widgets
  • Os dados exibidos são limitados a estatísticas agregadas
  • Nenhuma informação pessoal identificável é exposta

Próximos Passos

Esta página foi útil?