Panduan Embed

Struktur URL

Setiap GIF memiliki tiga URL yang akan Anda referensikan saat menyematkan:

Ganti {ID} dengan ID GIF 8 karakter (mis., xK9mQ2pL).

1. Markdown

Format paling umum untuk file GitHub README. Membungkus gambar GIF dalam tautan ke halaman detail:

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

Dengan perataan tengah (HTML bergaya GitHub dalam 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>

Gunakan URL GIF mentah dalam tag <img> untuk kontrol penuh atas ukuran dan gaya:

<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 (Pemutar Interaktif)

Embed iframe menyertakan pemutar terminal interaktif dengan pergantian tema, kontrol pemutaran, dan pemutaran ulang cast:

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

Pemutar secara otomatis mendeteksi mode gelap/terang dari halaman induk. Anda dapat memaksa tema dengan parameter query:

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

4. Widget Script (Auto-embed)

Letakkan satu div dan tag script — widget menangani segalanya secara otomatis:

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

Widget merender pemutar responsif yang beradaptasi dengan lebar container. Beberapa embed pada satu halaman berbagi script yang sama — sertakan hanya sekali.

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.

Tag <link> HTML pada setiap halaman GIF memungkinkan penemuan otomatis:

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

Query endpoint oEmbed secara langsung:

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

Respons:

{
  "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 kompak yang tertaut ke GIF. Berguna dalam baris badge di file README:

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

Dalam Markdown:

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

Tips Khusus Platform

GitHub README

GitHub merender Markdown dan HTML dalam file README. Gunakan pola HTML terpusat untuk hasil terbaik — ini memusatkan GIF dan membatasi lebar:

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

GitHub menghapus tag <iframe> dan <script> — gunakan hanya metode Markdown atau HTML <img>.

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

Notion

Tempelkan URL AgentGIF langsung ke halaman Notion. Dukungan oEmbed Notion akan secara otomatis merender pratinjau. Atau, gunakan blok /embed dan tempelkan URL embed.

Slack & Discord

Tempelkan URL detail GIF (https://agentgif.com/ID). Kedua platform mendukung unfurling oEmbed dan akan menampilkan pratinjau kaya dengan gambar GIF.

Situs Dokumentasi (Docusaurus, MkDocs, VitePress)

Gunakan embed Markdown atau HTML. Sebagian besar generator dokumentasi mendukung HTML standar dalam file Markdown. Embed iframe berfungsi jika generator Anda tidak menghapus iframe.

Ukuran Responsif

Untuk embed responsif yang menyesuaikan lebar 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>

Untuk iframe responsif, bungkus dalam container dengan rasio aspek:

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