Customer Visual Embeds & Whitelabeling Guide
Every B2B SaaS application eventually needs to show users a chart: API usage over the last 30 days, billing transaction trends, or IoT sensor telemetry. But building custom client-side charting components requires importing 200 KB+ charting libraries (Recharts, Chart.js, D3), configuring state managers, and writing backend proxy endpoints.
TimesinkDB solves this with turnkey visual projections (.html and .svg). You drop a 1-line <iframe /> or <img /> tag into your frontend portal, and TimesinkDB renders crisp, interactive vector charts directly from the edge.
No Recharts, Chart.js, or Canvas dependencies in your bundle. Save hundreds of kilobytes in client bundle size.
HTML iframe widgets and SVG vector charts rendered by our edge servers are 100% free under fair use and never bill against egress quotas.
Restricted tokens (tok_ro_...) allow safe browser rendering without exposing administrative secret keys.
Scoped Read-Only Tokens (tok_ro_...)
Security is critical when rendering charts in customer-facing browsers. You must never expose your database master secret key (sec_live_...) in client-side HTML or JavaScript.
- Permitted:
GET /query,GET /series/{seriesKey}, and all projections (.html,.svg,.json,.csv). - Strictly Blocked: All ingestion writes (
POST /series/...,POST /ingest), catalog deletions, retention rules updates, or key rotations. Attempting to write with a read token rejects immediately with HTTP403 Forbidden. - URL Safe: Pass tokens directly in embed URLs via
?token=tok_ro_...for zero-header iframe loading.
The Zero-Egress Economics Guarantee
Most cloud platforms bill heavily for outbound data egress. When millions of tenant users refresh dashboards daily, JSON API egress costs can quickly skyrocket.
TimesinkDB's query engine downsamples raw telemetry directly on the host NVMe volume into lightweight, responsive SVG elements and self-contained HTML widgets. Because these projections are designed for direct visual consumption, TimesinkDB provides them at $0.00 in egress fees under fair use. Outbound egress quotas strictly apply to raw JSON data exports, guaranteeing predictable zero-surprise billing.
Whitelabeling & Custom Brand Styling
Maintain seamless customer experience across your B2B portal. Starter plan embeds feature a discreet "Powered by TimesinkDB" link in the corner. Pro ($35/mo) and Scale ($85/mo) accounts unlock 100% whitelabel embeds:
| Feature | Starter Tier | Pro Tier | Scale & Dedicated |
|---|---|---|---|
| Brand Watermark | Discreet "Powered by" badge | 100% Whitelabel (Badge removed) | 100% Whitelabel (Badge removed) |
| Custom Accent Colors | Brand orange default | Any hex color (&color=%2310b981) |
Any hex color (&color=%2338bdf8) |
| Custom CNAME Hostname | Not included | Not included | Custom domain (e.g. metrics.yourdomain.com) |
Embed URL Parameters & Options Reference
| Parameter | Default | Options | Description |
|---|---|---|---|
| theme | dark | dark | light |
OLED high-contrast dark mode or clean high-contrast white background. |
| interval | auto | 1m, 5m, 15m, 1h, 1d |
Bucket downsampling duration. auto dynamically selects 120 visual bins. |
| fn | avg | avg, sum, max, min, count, rate |
Aggregation function applied across raw metric points in each bucket. |
| chart | line | line | area | bar |
Visual chart style: vector spline line, gradient area fill, or bar chart. |
| color | brand | Hex string (e.g. %2310b981) |
URL-encoded hex color for chart lines and hover highlights. |
| token | required | tok_ro_... |
Scoped read-only token allowing safe browser embed authorization. |
React & Next.js Component Recipe
Copy & PasteDrop this reusable component into your Next.js App Router or React application. It accepts tenant IDs, dynamic ranges, and color props, rendering an isolated iframe with zero client-side charting libraries:
// components/CustomerMetricChart.tsx
import React from 'react';
interface Props {
tenantId: string;
metric: string; // e.g. "api_calls" or "cpu_usage"
readToken: string; // Scoped "tok_ro_..."
range?: string; // "-24h", "-7d", "-30d"
theme?: 'dark' | 'light';
chartType?: 'line' | 'area' | 'bar';
accentColor?: string; // e.g. "#10b981"
}
export function CustomerMetricChart({
tenantId,
metric,
readToken,
range = '-30d',
theme = 'dark',
chartType = 'line',
accentColor = '#ff5b45'
}: Props) {
const encodedColor = encodeURIComponent(accentColor);
const chartUrl = `https://fra1.timesinkdb.com/databases/42/series/tenant_${tenantId}.${metric}.html`
+ `?from=${range}&interval=auto&theme=${theme}&chart=${chartType}&color=${encodedColor}&token=${readToken}`;
return (
<div className="w-full h-64 rounded-xl overflow-hidden border border-neutral-800 bg-neutral-950 shadow-inner">
<iframe
src={chartUrl}
title={`Metric: ${metric}`}
className="w-full h-full border-0 select-none"
loading="lazy"
sandbox="allow-scripts allow-same-origin"
/>
</div>
);
}Retool & Internal Dashboard Recipe
Internal ops and support teams often need to inspect customer telemetry inside Retool, Superblocks, or internal dashboards without building dedicated backend APIs.
- Drag an Iframe component onto your Retool canvas.
- In the Iframe URL field, enter the projected endpoint bound to your selected customer row:
https://fra1.timesinkdb.com/databases/42/series/tenant_{{ table1.selectedRow.id }}.latency_ms.html?from=-24h&token={{ current_user.metadata.tsdbToken }}The chart updates dynamically whenever an operator clicks a customer row, rendering live telemetry without touching your primary production database.
Notion, GitHub README & Static Markdown (.svg)
Because TimesinkDB projects directly into vector .svg images, you can embed live metric sparklines inside standard markdown files, GitHub pull request descriptions, and Notion company wikis:
<!-- GitHub README / Notion Embed (Auto-refreshes on view) -->
