Hướng dẫn nhúng

Cấu trúc URL

Mỗi GIF có ba URL bạn sẽ tham chiếu khi nhúng:

Thay {ID} bằng ID GIF 8 ký tự (ví dụ: xK9mQ2pL).

1. Markdown

Định dạng phổ biến nhất cho tệp README GitHub. Bọc hình ảnh GIF trong liên kết đến trang chi tiết:

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

Với căn chỉnh giữa (HTML theo phong cách GitHub trong 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>

Dùng URL GIF thô trong thẻ <img> để kiểm soát hoàn toàn kích thước và kiểu dáng:

<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 (Trình phát tương tác)

Nhúng iframe bao gồm trình phát terminal tương tác với chuyển đổi theme, điều khiển phát lại và phát lại cast:

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

Trình phát tự động phát hiện chế độ tối/sáng từ trang mẹ. Bạn có thể buộc một theme bằng tham số truy vấn:

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

4. Script Widget (Tự động nhúng)

Thả một thẻ div và script — widget xử lý mọi thứ tự động:

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

Widget hiển thị trình phát đáp ứng thích ứng với chiều rộng container. Nhiều lần nhúng trên một trang dùng chung script — chỉ thêm một lần.

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.

Thẻ HTML <link> trên mỗi trang GIF cho phép tự động khám phá:

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

Truy vấn endpoint oEmbed trực tiếp:

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

Phản hồi:

{
  "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)

Badge SVG nhỏ gọn liên kết đến GIF. Hữu ích trong hàng badge của tệp README:

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

Trong Markdown:

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

Mẹo theo từng nền tảng

GitHub README

GitHub hiển thị cả Markdown và HTML trong tệp README. Dùng mẫu HTML căn giữa để có kết quả tốt nhất — nó căn giữa GIF và giới hạn chiều rộng:

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

GitHub loại bỏ thẻ <iframe> và <script> — chỉ dùng phương pháp Markdown hoặc HTML <img>.

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

Notion

Dán URL AgentGIF trực tiếp vào trang Notion. Hỗ trợ oEmbed của Notion sẽ tự động hiển thị bản xem trước. Hoặc dùng khối /embed và dán URL nhúng.

Slack & Discord

Dán URL chi tiết GIF (https://agentgif.com/ID). Cả hai nền tảng hỗ trợ mở rộng oEmbed và sẽ hiển thị bản xem trước phong phú với hình ảnh GIF.

Trang tài liệu (Docusaurus, MkDocs, VitePress)

Dùng nhúng Markdown hoặc HTML. Hầu hết các trình tạo tài liệu hỗ trợ HTML tiêu chuẩn trong tệp Markdown. Nhúng iframe hoạt động nếu trình tạo của bạn không loại bỏ iframe.

Kích thước đáp ứng

Để nhúng đáp ứng mở rộng theo chiều rộng container:

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

Để nhúng iframe đáp ứng, bọc trong container với tỷ lệ khung:

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