Embed गाइड

अपने दस्तावेज़ीकरण, README फ़ाइलों और वेबसाइटों में AgentGIF terminal रिकॉर्डिंग embed करने के 6 तरीके। प्रत्येक GIF विवरण पेज में सभी प्रारूप पूर्व-भरे गए copy-paste embed panel शामिल है।

URL संरचना

embed करते समय आप प्रत्येक GIF के तीन URL संदर्भित करेंगे:

URL	उद्देश्य
`https://agentgif.com/{ID}`	विवरण पेज (मानव-पठनीय)
`https://media.agentgif.com/{ID}.gif`	कच्ची GIF फ़ाइल (`<img>` के लिए)
`https://agentgif.com/embed/{ID}/`	इंटरएक्टिव प्लेयर (iframe के लिए)

{ID} को 8-अक्षर GIF ID से बदलें (जैसे, xK9mQ2pL)।

1. Markdown

GitHub README फ़ाइलों के लिए सबसे आम प्रारूप। GIF चित्र को विवरण पेज के लिंक में लपेटता है:

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

केंद्रित संरेखण के साथ (Markdown में GitHub-flavored 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> tag में कच्चे 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 embed में थीम स्विचिंग, प्लेबैक नियंत्रण और cast replay के साथ इंटरएक्टिव terminal प्लेयर शामिल है:

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

प्लेयर मूल पेज से dark/light मोड स्वतः पहचानता है। आप एक क्वेरी पैरामीटर के साथ थीम लागू कर सकते हैं:

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

4. Script Widget (ऑटो-embed)

एक div और script tag डालें — widget सब कुछ स्वचालित रूप से संभालता है:

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

Widget एक रिस्पॉन्सिव प्लेयर रेंडर करता है जो container चौड़ाई के अनुसार अनुकूलित होता है। एक पेज पर कई embed एक ही 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> tag ऑटो-खोज सक्षम करता है:

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

oEmbed endpoint को सीधे क्वेरी करें:

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. Badge (SVG)

GIF से लिंक करने वाला एक कॉम्पैक्ट SVG badge। README फ़ाइलों की badge पंक्तियों में उपयोगी:

<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 pattern का उपयोग करें — यह 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> tags हटा देता है — केवल Markdown या HTML <img> तरीके का उपयोग करें।

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

Notion

AgentGIF URL को सीधे Notion पेज में पेस्ट करें। Notion का oEmbed समर्थन स्वचालित रूप से एक पूर्वावलोकन रेंडर करेगा। वैकल्पिक रूप से, /embed ब्लॉक का उपयोग करें और embed URL पेस्ट करें।

Slack & Discord

GIF विवरण URL (https://agentgif.com/ID) पेस्ट करें। दोनों प्लेटफॉर्म oEmbed unfurling का समर्थन करते हैं और GIF चित्र के साथ एक समृद्ध पूर्वावलोकन दिखाएंगे।

दस्तावेज़ीकरण साइटें (Docusaurus, MkDocs, VitePress)

Markdown या HTML embed का उपयोग करें। अधिकांश दस्तावेज़ीकरण जनरेटर Markdown फ़ाइलों में मानक HTML का समर्थन करते हैं। यदि आपका जनरेटर iframe नहीं हटाता तो iframe embed काम करता है।

रिस्पॉन्सिव आकार

container चौड़ाई के अनुसार स्केल होने वाले रिस्पॉन्सिव embed के लिए:

<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 के लिए, aspect ratio वाले container में लपेटें:

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

← दस्तावेज़ीकरण पर वापस · Agent एकीकरण →