Einbettungsleitfaden

URL-Struktur

Jedes GIF hat drei URLs, die Sie beim Einbetten verwenden:

Ersetzen Sie {ID} durch die 8-stellige GIF-ID (z. B. xK9mQ2pL).

1. Markdown

Das häufigste Format für GitHub README-Dateien. Umschließt das GIF-Bild in einem Link zur Detailseite:

[![Demo](https://media.agentgif.com/ID.gif)](https://agentgif.com/ID)

Mit zentrierter Ausrichtung (GitHub-spezifisches HTML in Markdown):

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="demo" width="800">
  </a>
</p>

2. HTML <img>

Die rohe GIF-URL in einem <img>-Tag für vollständige Kontrolle über Größe und Stil verwenden:

<a href="https://agentgif.com/ID">
  <img src="https://media.agentgif.com/ID.gif"
       alt="Terminal demo"
       width="800"
       loading="lazy">
</a>

The loading="lazy" attribute defers loading until the image is near the viewport — useful for pages with multiple GIFs.

3. iframe (Interaktiver Player)

Die iframe-Einbettung enthält den interaktiven Terminal-Player mit Theme-Wechsel, Wiedergabe-Steuerelementen und Cast-Wiedergabe:

<iframe
  src="https://agentgif.com/embed/ID/"
  width="800"
  height="500"
  frameborder="0"
  allow="clipboard-write"
  loading="lazy"
></iframe>

Der Player erkennt automatisch den Dunkel-/Hellmodus der übergeordneten Seite. Sie können ein Theme mit einem Abfrageparameter erzwingen:

https://agentgif.com/embed/ID/?theme=dracula

4. Script-Widget (Auto-Einbettung)

Einen einzelnen div- und script-Tag einfügen — das Widget erledigt alles automatisch:

<div data-agentgif="ID"></div>
<script src="https://agentgif.com/widget.js" async></script>

Das Widget rendert einen responsiven Player, der sich an die Containerbreite anpasst. Mehrere Einbettungen auf einer Seite teilen dasselbe Script — fügen Sie es nur einmal ein.

5. oEmbed

AgentGIF supports oEmbed for auto-discovery. Platforms like Notion, Slack, Discord, and WordPress can automatically render a rich preview when you paste an AgentGIF URL.

Das HTML-<link>-Tag auf jeder GIF-Seite ermöglicht die automatische Erkennung:

<link rel="alternate" type="application/json+oembed"
  href="https://agentgif.com/oembed?url=https://agentgif.com/ID&format=json" />

Den oEmbed-Endpunkt direkt abfragen:

curl "https://agentgif.com/api/v1/oembed/?url=https://agentgif.com/ID&format=json"

Antwort:

{
  "type": "photo",
  "version": "1.0",
  "title": "Docker Compose Up",
  "width": 1000,
  "height": 580,
  "url": "https://media.agentgif.com/ID.gif",
  "provider_name": "AgentGIF",
  "provider_url": "https://agentgif.com"
}

6. Badge (SVG)

Ein kompakter SVG-Badge, der auf das GIF verweist. Nützlich in Badge-Zeilen von README-Dateien:

<a href="https://agentgif.com/ID">
  <img src="https://agentgif.com/badge/ID.svg" alt="AgentGIF demo">
</a>

In Markdown:

[![AgentGIF](https://agentgif.com/badge/ID.svg)](https://agentgif.com/ID)

Plattformspezifische Tipps

GitHub README

GitHub rendert sowohl Markdown als auch HTML in README-Dateien. Verwenden Sie das zentrierte HTML-Muster für beste Ergebnisse — es zentriert das GIF und begrenzt die Breite:

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="demo" width="800">
  </a>
</p>

GitHub entfernt <iframe>- und <script>-Tags — verwenden Sie nur die Markdown- oder HTML-<img>-Methode.

See the full guide: How to Embed GIFs in GitHub README.

Notion

Eine AgentGIF-URL direkt in eine Notion-Seite einfügen. Notions oEmbed-Unterstützung rendert automatisch eine Vorschau. Alternativ können Sie den /embed-Block verwenden und die Einbettungs-URL einfügen.

Slack & Discord

Die GIF-Detail-URL (https://agentgif.com/ID) einfügen. Beide Plattformen unterstützen oEmbed-Entfaltung und zeigen eine umfangreiche Vorschau mit dem GIF-Bild.

Dokumentationswebsites (Docusaurus, MkDocs, VitePress)

Die Markdown- oder HTML-Einbettung verwenden. Die meisten Dokumentationsgeneratoren unterstützen Standard-HTML in Markdown-Dateien. Die iframe-Einbettung funktioniert, wenn Ihr Generator keine iframes entfernt.

Responsive Größenanpassung

Für responsive Einbettungen, die sich an die Containerbreite anpassen:

<div style="max-width: 800px; margin: 0 auto;">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif"
         alt="demo"
         style="width: 100%; height: auto;">
  </a>
</div>

Für responsive iframes in einem Container mit Seitenverhältnis einwickeln:

<div style="position: relative; padding-bottom: 58%; max-width: 800px;">
  <iframe src="https://agentgif.com/embed/ID/"
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
          frameborder="0"></iframe>
</div>