دليل التضمين

بنية الرابط

كل تسجيل له ثلاثة روابط ستحتاجها عند التضمين:

استبدل {ID} بمعرف التسجيل المكون من 8 أحرف (مثل: xK9mQ2pL).

1. Markdown

الصيغة الأكثر شيوعاً لملفات GitHub README. تُغلف صورة GIF في رابط إلى صفحة التفاصيل:

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

مع محاذاة مركزية (HTML بنكهة GitHub في 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>

استخدم رابط GIF الخام في وسم <img> للتحكم الكامل في الحجم والتنسيق:

<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 Widget (تضمين تلقائي)

أدرج div واحداً ووسم script — يتولى الـ widget كل شيء تلقائياً:

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

يعرض الـ widget مشغّلاً متجاوباً يتكيف مع عرض الحاوية. تشترك التضمينات المتعددة في صفحة واحدة في نفس السكريبت — أدرجه مرة واحدة فقط.

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.

وسم 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)

شارة 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 كلاً من Markdown و HTML في ملفات README. استخدم نمط HTML المركزي للحصول على أفضل النتائج — فهو يُمركز التسجيل ويضبط العرض:

<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 مباشرةً في صفحة Notion. سيُنشئ دعم oEmbed في Notion معاينة تلقائياً. بدلاً من ذلك، استخدم كتلة /embed والصق رابط التضمين.

Slack & Discord

الصق رابط تفاصيل التسجيل (https://agentgif.com/ID). كلا المنصتين تدعمان توسيع oEmbed وستعرضان معاينة غنية مع صورة GIF.

مواقع التوثيق (Docusaurus، MkDocs، VitePress)

استخدم تضمين Markdown أو HTML. معظم مولّدات التوثيق تدعم HTML القياسي في ملفات Markdown. يعمل تضمين iframe إذا لم يقم مولّدك بحذف iframes.

الحجم المتجاوب

للتضمينات المتجاوبة التي تتوسع حسب عرض الحاوية:

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

لـ iframes المتجاوبة، ضعها في حاوية بنسبة عرض إلى ارتفاع:

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