4分で読めます

埋め込み可能なウィジェット

Zenovayは、ウェブサイトに埋め込むことができるすぐに使えるウィジェットを提供します。リアルタイムの訪問者数、アクティビティタイムライン、地理的な内訳を表示できます。認証は不要で、トラッキングコードを使うだけです。

ウィジェットの種類

ウィジェット	説明	ユースケース
リアルタイム	ライブ訪問者数	現在のオンライン訪問者数を表示
プレビュー	24時間のアクティビティタイムライン	過去1日の訪問者アクティビティを表示
最近のアクティビティ	30分間の国別内訳	最近の訪問者の所在地を表示

ベースURL

すべてのウィジェットエンドポイントは以下で利用可能です：

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

{trackingCode}をウェブサイトのトラッキングコード（例：ZV_XXXXXXXXXXX）に置き換えてください。

リアルタイムウィジェット

ウェブサイトの現在のライブ訪問者数を表示します：

GET/widgets/:trackingCode/realtime

ライブ訪問者数ウィジェット

クエリパラメータ：

パラメータ	型	デフォルト	説明
`mainTextSize`	string	`48px`	訪問者数のフォントサイズ
`primaryColor`	string	`#e78468`	プライマリアクセントカラー（hex）
`theme`	string	`system`	テーマ：`light`、`dark`、または`system`
`hideBranding`	boolean	`false`	「Powered by Zenovay」フッターを非表示にする（エンタープライズ）

iframeで埋め込むHTML

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

ウィジェットプレビュー：

リアルタイムウィジェットは以下を表示します：

大きな訪問者数
「visitors online now」ラベル
アニメーション付きパルスインジケータ
オプションのブランディングフッター

プレビューウィジェット（24時間タイムライン）

過去24時間の訪問者アクティビティをタイムラインチャートとして表示します：

GET/widgets/:trackingCode/preview

24時間のアクティビティタイムラインウィジェット

クエリパラメータ：

パラメータ	型	デフォルト	説明
`mainTextSize`	string	`36px`	合計数のフォントサイズ
`primaryColor`	string	`#e78468`	チャートラインカラー（hex）
`secondaryColor`	string	`#8dcdff`	チャートフィルカラー（hex）
`theme`	string	`system`	テーマ：`light`、`dark`、または`system`

iframeで埋め込むHTML

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

ウィジェットプレビュー：

プレビューウィジェットは以下を表示します：

過去24時間の合計訪問者数
時間別の内訳チャート
ピーク時間インジケータ
トレンド矢印（前日比の上下）

最近のウィジェット（国別内訳）

過去30分の訪問者アクティビティを国別に分解して表示します：

GET/widgets/:trackingCode/recent

30分間の国別内訳

クエリパラメータ：

パラメータ	型	デフォルト	説明
`mainTextSize`	string	`32px`	数のフォントサイズ
`primaryColor`	string	`#e78468`	プライマリアクセントカラー（hex）
`theme`	string	`system`	テーマ：`light`、`dark`、または`system`
`hideBranding`	boolean	`false`	ブランディングフッターを非表示にする（エンタープライズ）

iframeで埋め込むHTML

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

ウィジェットプレビュー：

最近のウィジェットは以下を表示します：

過去30分の訪問者数
フラッグ付きのトップ国
国別の割合内訳
30秒ごとのライブ更新

スタイリングの例

ダークテーマとカスタムカラー

ダークテーマウィジェットHTML

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

ダッシュボード用ライトテーマ

ダッシュボードウィジェットHTML

<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での動的読み込み

JavaScriptでウィジェットを動的に読み込みます：

動的ウィジェット読み込みJavaScript

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

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

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

Reactコンポーネント

Reactアプリケーションにウィジェットを埋め込みます：

ReactウィジェットコンポーネントTSX

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

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

Vueコンポーネント

Vueアプリケーションにウィジェットを埋め込みます：

VueウィジェットコンポーネントVUE

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

ホワイトラベル（エンタープライズ）

エンタープライズ顧客はZenovayのブランディングを削除できます：

ホワイトラベルウィジェットHTML

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

hideBrandingパラメータはエンタープライズプランでのみ利用可能です。Zenovayチームにお問い合わせください。

キャッシングとパフォーマンス

ウィジェットはパフォーマンスに最適化されています：

CDNキャッシュ: ウィジェットHTMLはエッジでキャッシュされ、高速に読み込まれます
データ更新: ライブデータは5～30秒ごとに自動更新されます
軽量: 外部依存関係のない自己完結型HTML
レスポンシブ: ウィジェットはコンテナサイズに適応します

セキュリティに関する考慮事項

ウィジェットは読み取り専用の分析データのみを表示します。トラッキングコードは公開されることを想定して設計されており、機密データの変更やアクセスには使用できません。

ウィジェットはAPIキーではなく、公開トラッキングコードを使用します
ウィジェットを表示するために認証は不要です
表示されるデータは集計統計に限定されます
個人識別情報は公開されません

次のステップ

外部API - 認証付きの完全なAPI アクセス
リアルタイムデータ - カスタム統合用のJSONエンドポイント
カスタムイベント - カスタムユーザーアクションを追跡