Skip to main content
Tako API responses contain one or more knowledge_cards that can be embedded in your application. Each knowledge_card entry includes:
embed_url: An iframe URL for embedding the interactive card
image_url: A link to a static image of the card

​
Dynamic Sizing

Tako Knowledge Cards vary in size. Some interactive elements will change the card’s dimensions. The iframe emits a resize event when the card is resized, allowing you to adjust the size in your application. 
<iframe 
  width="100%" 
  src="https://tako.com/embed/MubstKHqKvz-euhxVysF" 
  scrolling="no" 
  frameborder="0"
></iframe>

<script type="text/javascript">
!function() {
  "use strict";
  window.addEventListener("message", function(e) {
    const d = e.data;
    if (d.type !== "tako::resize") return;
    
    for (let iframe of document.querySelectorAll("iframe")) {
      if (iframe.contentWindow !== e.source) continue;
      iframe.style.height = d.height + "px";
    }
  });
}();
</script>
Static Images
For cases where you need a static representation, you can use the image_url to download and embed a static image of the card in your application.

​
Switch between dark and light mode

You can make your card dark themed by adding ?dark_mode=true or light mode by explicitly adding ?dark_mode=false to the embed url

​
dark_mode=true

<iframe 
  width="100%" 
  src="https://tako.com/embed/LMAyfrgePzxzYylx9pqZ/?dark_mode=true" 
  scrolling="no" 
  frameborder="0"
></iframe>

​
dark_mode=false

<iframe 
  width="100%" 
  src="https://tako.com/embed/LMAyfrgePzxzYylx9pqZ/?dark_mode=false" 
  scrolling="no" 
  frameborder="0"
></iframe>

​
Automatically match the viewer’s theme

Rather than hardcoding the theme, you can detect the viewer’s color mode at runtime and set dark_mode accordingly. The pattern is always the same: compute whether the viewer is in dark mode, append ?dark_mode=true or ?dark_mode=false to the embed URL, and re-apply when the preference changes. Follow the viewer’s OS / browser preference Use the prefers-color-scheme media query. This works anywhere, with no knowledge of the host page, and updates live if the viewer switches their system theme. 
<iframe id="tako-card" width="100%" scrolling="no" frameborder="0"
  data-embed="https://tako.com/embed/LMAyfrgePzxzYylx9pqZ/"></iframe>

<script type="text/javascript">
(function () {
  const frame = document.getElementById("tako-card");
  const base = frame.dataset.embed;
  const mq = window.matchMedia("(prefers-color-scheme: dark)");

  function apply(isDark) {
    frame.src = base + "?dark_mode=" + (isDark ? "true" : "false");
  }

  apply(mq.matches);                                  // set on initial load
  mq.addEventListener("change", (e) => apply(e.matches)); // update on change
})();
</script>
Follow your app’s own theme If your app manages its own theme (for example by toggling a dark class on <html>), key off that instead and use a MutationObserver to react when it changes. 
<iframe id="tako-card" width="100%" scrolling="no" frameborder="0"
  data-embed="https://tako.com/embed/LMAyfrgePzxzYylx9pqZ/"></iframe>

<script type="text/javascript">
(function () {
  const frame = document.getElementById("tako-card");
  const base = frame.dataset.embed;

  function apply() {
    const isDark = document.documentElement.classList.contains("dark");
    frame.src = base + "?dark_mode=" + (isDark ? "true" : "false");
  }

  apply(); // set on initial load
  new MutationObserver(apply).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["class"],
  });
})();
</script>
Setting an iframe’s src reloads the card. If your page lets viewers toggle the theme frequently, debounce the handler so the card isn’t reloaded on every rapid change.

​
Glanceable mode

Add ?glanceable=true to an embed URL to render a simplified, glanceable version of the card. Glanceable mode is designed for contexts where the user has limited attention and needs to absorb the key information at a glance — for example, on a vehicle display, a smartwatch, or a TV dashboard. In glanceable mode the card:
  • Enlarges typography — headlines, metrics, axis labels, and table text are scaled up for readability from a distance.
  • Hides interactive chrome — search boxes, selectors, tabs, show/hide toggles, thumbs up/down, and the footer are removed, leaving only the content.
  • Trims content to the essentials — tables cap to their top rows, charts drop tooltips and animations and use thicker lines and fewer axis ticks, and supported cards (stocks, sports schedules, prediction markets, game scores) render a focused summary layout.
Glanceable mode is supported on most card types. Cards that don’t have a glanceable layout fall back to their standard rendering.

​
glanceable=true

<iframe 
  width="100%" 
  src="https://tako.com/embed/uoTFW3MnZ---CNI9tBnk/?glanceable=true" 
  scrolling="no" 
  frameborder="0"
></iframe>

<iframe 
  width="100%" 
  src="https://tako.com/embed/rDxhM21e0wG9YSgYRFDv/?glanceable=true" 
  scrolling="no" 
  frameborder="0"
></iframe>
Glanceable mode can be combined with ?dark_mode=true (or false) — for example ?glanceable=true&dark_mode=true.

​
Customizing Tako

Tako Enterprise users can use our theme builder to customize the fonts, spacing and colors of Tako visualizations. This allows you to achieve a look consistent with your brand identity.

Tako Card With Custom Fonts