Guía de incrustación

Estructura de URL

Cada GIF tiene tres URLs que usarás al incrustar:

Reemplaza {ID} con el ID de GIF de 8 caracteres (p. ej., xK9mQ2pL).

1. Markdown

El formato más común para los archivos README de GitHub. Envuelve la imagen GIF en un enlace a la página de detalle:

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

Con alineación centrada (HTML estilo GitHub en 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>

Usa la URL del GIF sin procesar en una etiqueta <img> para control total sobre el tamaño y el estilo:

<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 (Reproductor interactivo)

La incrustación de iframe incluye el reproductor de terminal interactivo con cambio de tema, controles de reproducción y reproducción de cast:

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

El reproductor detecta automáticamente el modo oscuro/claro de la página principal. Puedes forzar un tema con un parámetro de consulta:

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

4. Widget Script (incrustación automática)

Añade un div y una etiqueta script — el widget lo gestiona todo automáticamente:

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

El widget renderiza un reproductor adaptable que se ajusta al ancho del contenedor. Múltiples incrustaciones en una página comparten el mismo script — inclúyelo solo una vez.

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.

La etiqueta HTML <link> en cada página de GIF habilita el descubrimiento automático:

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

Consulta el endpoint de oEmbed directamente:

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

Respuesta:

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

Un badge SVG compacto que enlaza al GIF. Útil en filas de badges de archivos README:

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

En Markdown:

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

Consejos específicos por plataforma

GitHub README

GitHub renderiza tanto Markdown como HTML en los archivos README. Usa el patrón HTML centrado para mejores resultados — centra el GIF y limita el ancho:

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

GitHub elimina las etiquetas <iframe> y <script> — usa solo el método Markdown o HTML <img>.

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

Notion

Pega una URL de AgentGIF directamente en una página de Notion. La compatibilidad con oEmbed de Notion renderizará automáticamente una vista previa. Alternativamente, usa el bloque /embed y pega la URL de incrustación.

Slack & Discord

Pega la URL de detalle del GIF (https://agentgif.com/ID). Ambas plataformas admiten el despliegue de oEmbed y mostrarán una vista previa enriquecida con la imagen GIF.

Sitios de documentación (Docusaurus, MkDocs, VitePress)

Usa la incrustación de Markdown o HTML. La mayoría de los generadores de documentación admiten HTML estándar en archivos Markdown. La incrustación de iframe funciona si tu generador no elimina iframes.

Tamaño adaptable

Para incrustaciones adaptables que se ajusten al ancho del contenedor:

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

Para iframes adaptables, envuelve en un contenedor con relación de aspecto:

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