Embed

Embed Kit

Lightweight embeds for Visual Complexity: clean, responsive, accessible. No trackers, honest labels, and predictable theming.

Responsive WCAG-AA No external deps Theme: auto/light/dark

Quick embeds

Badge (inline)

Small inline badge. Best for credits and “about this chart”.

<a class="vc-badge" href="/" aria-label="Visual Complexity">Visual Complexity</a>

Tip: you can restyle .vc-badge locally (colors, radius).

Card (iframe)

Compact iframe card with title and caption. Fully responsive.

<iframe
  src="/embed/card/?type=network&theme=auto&lang=en&title=1"
  title="Visual Complexity — card"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-popups-by-user-activation"
  style="width:100%;max-width:620px;height:320px;border:0;border-radius:12px"></iframe>

Panel (iframe)

Wider panel for articles or documentation sidebars.

<iframe
  src="/embed/panel/?topic=trees&theme=dark&lang=en&title=0"
  title="Visual Complexity — panel"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-popups-by-user-activation"
  style="width:100%;height:420px;border:0;border-radius:14px"></iframe>

Build your embed

Options

Live preview

Preview is illustrative. The real iframe will render from /embed/….

Code

<iframe
  src="/embed/card/?topic=networks&theme=auto&lang=en&title=1"
  title="Visual Complexity — card"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-popups-by-user-activation"
  style="width:100%;height:320px;border:0;border-radius:12px"></iframe>

Guidelines & Accessibility

Attributes

Always set title, use loading="lazy", and a strict referrerpolicy. Keep sandbox tight: allow-scripts, allow-popups-by-user-activation.

Sizing

Use width:100% with a sensible max-width for cards. Panels can be taller (360–520px). Keep radius consistent with your UI.

Theme & language

?theme=auto|light|dark and ?lang=en|uk. If omitted, defaults are auto and en.

No tracking

Embeds are analytics-free by default. If you instrument locally, disclose it and respect user privacy.

WordPress shortcode

[vc_embed] — outputs an iframe or badge 
 'card',      // card | panel | badge
    'topic'  => 'networks',  // networks | trees | flows | maps | cycles
    'theme'  => 'auto',      // auto | light | dark
    'lang'   => 'en',        // en | uk
    'title'  => '1',         // 1 | 0
    'width'  => '100%',
    'height' => '320px',
    'radius' => '12px',
  ], $atts, 'vc_embed');

  // Badge (inline link)
  if ($a['type'] === 'badge') {
    return '<a class="vc-badge" href="/" aria-label="Visual Complexity">Visual Complexity</a>';
  }

  // Build src with query params (server endpoint should handle these)
  $src = esc_url( add_query_arg([
    'topic' => $a['topic'],
    'theme' => $a['theme'],
    'lang'  => $a['lang'],
    'title' => $a['title'],
  ], "/embed/{$a['type']}/") );

  // Iframe output
  $style = sprintf('width:%s;height:%s;border:0;border-radius:%s', esc_attr($a['width']), esc_attr($a['height']), esc_attr($a['radius']));
  $html  = sprintf(
    '<iframe src="%s" title="Visual Complexity — %s" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" sandbox="allow-scripts allow-popups-by-user-activation" style="%s"></iframe>',
    $src, esc_attr($a['type']), esc_attr($style)
  );
  return $html;
}); ?>
Minimal CSS for badge (optional) 
.vc-badge{
  display:inline-block; font:600 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  padding:.45rem .7rem; border-radius:999px; border:1px solid rgba(0,0,0,.14);
  background: var(--chip-bg); color: currentColor; text-decoration:none;
}