Widgets

Widgets

Besides tracking, @vskstudio/takt-core ships framework-agnostic helpers that build the URLs for Takt's server-rendered widgets: the badge SVG and the embed iframe. They are tree-shakeable and re-exported by the framework wrappers (@vskstudio/takt-react, -vue, -svelte, …), which use them to build the src of their Badge/Embed components.

import { badgeUrl, embedUrl } from '@vskstudio/takt-core'

badgeUrl('example.com', { variant: 'd', glyph: 'off', lang: 'en' })
// → /public/example.com/badge.svg?variant=d&glyph=off&lang=en

embedUrl('example.com', { theme: 'dark' })
// → /embed/example.com?theme=dark

badgeUrl(domain, options)

Returns the URL of the badge SVG (/public/{domain}/badge.svg).

function badgeUrl(domain: string, options?: {
  host?: string    // default: '' (same-origin)
  variant?: 'a' | 'b' | 'd'                          // default: 'a'
  glyph?: 'unplug' | 'dash' | 'off' | 'eyeoff'
  lang?: 'fr' | 'en'                                 // default: 'fr'
}): string

Option	Type	Default	Role
host	string	''	Takt host origin (empty = same-origin)
variant	'a' | 'b' | 'd'	'a'	Badge style
glyph	'unplug' | 'dash' | 'off' | 'eyeoff'	—	Glyph used by the badge fallback
lang	'fr' | 'en'	'fr'	Badge language

embedUrl(domain, options)

Returns the URL of the embed iframe page (/embed/{domain}).

function embedUrl(domain: string, options?: {
  host?: string    // default: '' (same-origin)
  theme?: 'light' | 'dark' | 'auto'                  // default: 'light'
  lang?: 'fr' | 'en'                                 // default: 'fr'
}): string

Option	Type	Default	Role
host	string	''	Takt host origin (empty = same-origin)
theme	'light' | 'dark' | 'auto'	'light'	Embed theme
lang	'fr' | 'en'	'fr'	Embed language

Default values (variant: 'a', theme: 'light', lang: 'fr') are omitted from the query string, so badgeUrl('example.com') yields a clean /public/example.com/badge.svg.

The host rule

host defaults to '' (same-origin / relative), matching the SDK's relative endpoint. Point it at a remote Takt instance when the widget lives on another site:

badgeUrl('example.com', { host: 'https://takt.example.com' })
// → https://takt.example.com/public/example.com/badge.svg

When set, host must be an absolute http(s):// URL. Anything else throws — javascript:, data:, protocol-relative //evil, ftp:, or a bare domain like takt.example.com — so a host value can never smuggle a non-http scheme into a widget src or a fetch.

The value is also reduced to its origin: any path, query, or fragment is dropped before it is spliced into the URL.

badgeUrl('example.com', { host: 'https://takt.example.com/x?a=1#y' })
// → https://takt.example.com/public/example.com/badge.svg

---

Source: github.com/vskstudio/takt-core · npm @vskstudio/takt-core