嵌入指南

URL 结构

每个 GIF 有三个嵌入时会用到的 URL：

将 {ID} 替换为 8 位 GIF ID（例如 xK9mQ2pL）。

1. Markdown

GitHub README 文件中最常用的格式。将 GIF 图片包裹在指向详情页的链接中：

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

居中对齐（Markdown 中使用 GitHub 风格 HTML）：

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

在 <img> 标签中使用原始 GIF URL，可完全控制尺寸和样式：

<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（交互式播放器）

iframe 嵌入包含交互式终端播放器，支持主题切换、播放控制和 cast 回放：

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

播放器会自动检测父页面的深色/浅色模式。你可以通过查询参数强制指定主题：

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

4. Script 小组件（自动嵌入）

只需放入一个 div 和 script 标签——小组件会自动处理一切：

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

小组件会渲染一个自适应容器宽度的响应式播放器。同一页面上的多个嵌入共享同一个脚本——只需引入一次即可。

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.

每个 GIF 页面上的 HTML <link> 标签可实现自动发现：

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

直接查询 oEmbed 端点：

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

响应：

{
  "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. 徽章（SVG）

链接到 GIF 的紧凑型 SVG 徽章。适合放在 README 文件的徽章行中：

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

Markdown 格式：

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

平台专属提示

GitHub README

GitHub 在 README 文件中同时支持 Markdown 和 HTML 渲染。建议使用居中 HTML 模式获得最佳效果——它会将 GIF 居中并限制宽度：

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

GitHub 会移除 <iframe> 和 <script> 标签——请仅使用 Markdown 或 HTML <img> 方式。

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

Notion

将 AgentGIF URL 直接粘贴到 Notion 页面中。Notion 的 oEmbed 支持会自动渲染预览。也可以使用 /embed 块并粘贴嵌入 URL。

Slack & Discord

粘贴 GIF 详情 URL（https://agentgif.com/ID）。两个平台都支持 oEmbed 展开，会显示包含 GIF 图片的富媒体预览。

文档站点（Docusaurus、MkDocs、VitePress）

使用 Markdown 或 HTML 嵌入。大多数文档生成器在 Markdown 文件中支持标准 HTML。如果你的生成器不移除 iframe，也可以使用 iframe 嵌入。

响应式尺寸

要实现自适应容器宽度的响应式嵌入：

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

要实现响应式 iframe，请将其包裹在带宽高比的容器中：

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