Guide d'intégration

Structure des URL

Chaque GIF possède trois URLs que vous utiliserez lors de l'intégration :

Remplacez {ID} par l'identifiant GIF de 8 caractères (ex. : xK9mQ2pL).

1. Markdown

Le format le plus courant pour les fichiers README GitHub. Encapsule l'image GIF dans un lien vers la page de détail :

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

Avec alignement centré (HTML style GitHub dans 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>

Utilisez l'URL GIF brute dans une balise <img> pour un contrôle total sur le dimensionnement et le style :

<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 (Lecteur interactif)

L'intégration iframe inclut le lecteur terminal interactif avec changement de thème, contrôles de lecture et relecture de cast :

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

Le lecteur détecte automatiquement le mode sombre/clair de la page parente. Vous pouvez forcer un thème avec un paramètre de requête :

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

4. Widget Script (intégration automatique)

Déposez un seul div et une balise script — le widget gère tout automatiquement :

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

Le widget affiche un lecteur réactif qui s'adapte à la largeur du conteneur. Plusieurs intégrations sur une page partagent le même script — ne l'incluez qu'une seule fois.

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 balise HTML <link> sur chaque page GIF permet la découverte automatique :

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

Interrogez directement le point d'accès oEmbed :

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

Réponse :

{
  "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 compact liant au GIF. Utile dans les rangées de badges des fichiers 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)

Conseils spécifiques aux plateformes

GitHub README

GitHub affiche à la fois Markdown et HTML dans les fichiers README. Utilisez le modèle HTML centré pour de meilleurs résultats — il centre le GIF et contraint la largeur :

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

GitHub supprime les balises <iframe> et <script> — utilisez uniquement la méthode Markdown ou HTML <img>.

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

Notion

Collez une URL AgentGIF directement dans une page Notion. La prise en charge oEmbed de Notion rendra automatiquement un aperçu. Vous pouvez également utiliser le bloc /embed et coller l'URL d'intégration.

Slack & Discord

Collez l'URL de détail GIF (https://agentgif.com/ID). Les deux plateformes prennent en charge le dépliage oEmbed et afficheront un aperçu enrichi avec l'image GIF.

Sites de documentation (Docusaurus, MkDocs, VitePress)

Utilisez l'intégration Markdown ou HTML. La plupart des générateurs de documentation prennent en charge le HTML standard dans les fichiers Markdown. L'intégration iframe fonctionne si votre générateur ne supprime pas les iframes.

Dimensionnement réactif

Pour des intégrations réactives qui s'adaptent à la largeur du conteneur :

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

Pour les iframes réactifs, encapsulez dans un conteneur avec ratio d'aspect :

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