Руководство по встраиванию

Структура URL

Каждый GIF имеет три URL, которые вы будете использовать при встраивании:

Замените {ID} 8-символьным ID GIF (например, 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>

Используйте исходный URL 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-виджет (автовстраивание)

Добавьте один 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.

Тег HTML <link> на каждой странице GIF обеспечивает автообнаружение:

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

Компактный SVG-бейдж со ссылкой на GIF. Полезен в рядах бейджей в файлах 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 для лучших результатов — он центрирует 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

Вставьте URL AgentGIF непосредственно на страницу Notion. Поддержка oEmbed в Notion автоматически отобразит предпросмотр. Alternatively, используйте блок /embed и вставьте URL встраивания.

Slack & Discord

Вставьте URL деталей GIF (https://agentgif.com/ID). Обе платформы поддерживают развёртывание oEmbed и отобразят расширенный предпросмотр с GIF-изображением.

Сайты документации (Docusaurus, MkDocs, VitePress)

Используйте встраивание через Markdown или HTML. Большинство генераторов документации поддерживают стандартный HTML в файлах Markdown. Встраивание через 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>