> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tako.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding Knowledge Cards

> Embed Tako knowledge cards in your app — interactive iframes via embed_url, static images via image_url, dynamic resizing, dark/light theming, and glanceable mode.

export const Viz = ({src, ...props}) => {
  const frameId = `viz-${Math.floor(Math.random() * 10000)}`;
  return <iframe id={frameId} data-src={src} data-is-viz="true" src={src} width="100%" className="rounded-xl" frameBorder="0" {...props} />;
};

Tako [Search](/api-reference/search-v3) and [Answer](/api-reference/answer) responses contain one or more `cards` that can be embedded in your application. Each card includes:

<div className="my-4 space-y-1">
  <div><b>embed\_url:</b> An iframe URL for embedding the interactive card</div>
  <div><b>image\_url:</b> A link to a static image of the card</div>
</div>

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

<Accordion title="Example Dynamic Resizing Script">
  ```html theme={null}
  <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>
  ```
</Accordion>

<div> <b>Static Images</b></div>

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`

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

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

### `dark_mode=false`

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

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

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

```html theme={null}
<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.

```html theme={null}
<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>
```

<Note>
  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.
</Note>

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

```html theme={null}
<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/uoTFW3MnZ---CNI9tBnk/?glanceable=true" scrolling="no" frameborder="0" className="rounded-xl" />

```html theme={null}
<iframe 
  width="100%" 
  src="https://tako.com/embed/rDxhM21e0wG9YSgYRFDv/?glanceable=true" 
  scrolling="no" 
  frameborder="0"
></iframe>
```

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

<Note>
  Glanceable mode can be combined with `?dark_mode=true` (or `false`) — for example `?glanceable=true&dark_mode=true`.
</Note>

## <span id="customizing-cards">Customizing Tako</span>

Tako Enterprise users can use our [theme builder](https://tako.com/user/theme/) to customize the fonts, spacing and colors of Tako visualizations. This allows you to achieve a look consistent with your brand identity.

<Card title="Tako Card With Custom Fonts">
  <br />

  <Viz src="https://tako.com/embed/s-feXnjDbNyTvQZZhOLN/" />
</Card>