Guia de Embed

Estrutura de URL

Cada GIF possui três URLs que você usará ao incorporar:

Substitua {ID} pelo ID de GIF de 8 caracteres (ex., xK9mQ2pL).

1. Markdown

O formato mais comum para arquivos README do GitHub. Envolve a imagem GIF em um link para a página de detalhe:

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

Com alinhamento centralizado (HTML no estilo GitHub em 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>

Use a URL bruta do GIF em uma tag <img> para controle total sobre dimensionamento e 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 (Player Interativo)

O embed iframe inclui o player de terminal interativo com troca de temas, controles de reprodução e replay de cast:

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

O player detecta automaticamente o modo escuro/claro da página principal. Você pode forçar um tema com um parâmetro de consulta:

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

4. Widget Script (Auto-embed)

Adicione uma única div e tag de script — o widget cuida de tudo automaticamente:

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

O widget renderiza um player responsivo que se adapta à largura do contêiner. Múltiplos embeds em uma página compartilham o mesmo script — inclua-o apenas uma 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.

A tag HTML <link> em cada página de GIF habilita a descoberta automática:

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

Consulte o endpoint oEmbed diretamente:

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

Resposta:

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

Um badge SVG compacto com link para o GIF. Útil em linhas de badges de arquivos README:

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

Em Markdown:

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

Dicas por Plataforma

GitHub README

O GitHub renderiza Markdown e HTML em arquivos README. Use o padrão HTML centralizado para melhores resultados — ele centraliza o GIF e limita a largura:

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

O GitHub remove tags <iframe> e <script> — use apenas o método Markdown ou HTML <img>.

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

Notion

Cole uma URL do AgentGIF diretamente em uma página do Notion. O suporte a oEmbed do Notion renderizará automaticamente uma pré-visualização. Alternativamente, use o bloco /embed e cole a URL de embed.

Slack & Discord

Cole a URL de detalhe do GIF (https://agentgif.com/ID). Ambas as plataformas suportam o desdobramento oEmbed e mostrarão uma pré-visualização rica com a imagem GIF.

Sites de Documentação (Docusaurus, MkDocs, VitePress)

Use o embed Markdown ou HTML. A maioria dos geradores de documentação suporta HTML padrão em arquivos Markdown. O embed iframe funciona se o seu gerador não remover iframes.

Dimensionamento Responsivo

Para embeds responsivos que se adaptam à largura do contêiner:

<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 responsivos, envolva em um contêiner com proporção 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>