api14
Obtenir une clé API

Nous utilisons des cookies. Les cookies et le stockage du navigateur vous gardent connecté et mémorisent vos préférences. Avec votre accord, nous mesurons aussi l’utilisation du site. Vous pouvez à tout moment. Consultez notre politique relative aux cookies.

Widget d’image

Code du widget générateur d’images IA pour votre site

Laissez vos visiteurs décrire une image et la voir générée sur votre page. Ce guide présente le code du widget d’image, les options d’emplacement et les réglages qui comptent.

Publié:

Un widget générateur d’images transforme une courte description textuelle en image, directement sur votre page. Les visiteurs saisissent ce qu’ils veulent voir, le modèle que vous avez choisi le crée, et le résultat apparaît dans le widget avec un lien de téléchargement. Inutile de développer une interface ou de gérer des fichiers sur votre serveur.

Comment fonctionne le widget d’image

  1. Un visiteur saisit une description, par exemple « un phare à l’aquarelle au coucher du soleil ».
  2. Le widget envoie le prompt à api14 via l’identifiant de votre widget. Votre clé API et vos réglages restent sur le serveur.
  3. Le modèle d’image génère l’image et le widget l’affiche avec un lien Télécharger.

Chaque requête est débitée de votre solde en USD au prix normal du modèle, et les contrôles que vous définissez (décrits plus bas) déterminent combien le widget peut dépenser.

Le code du widget

Créez le widget dans Widgets, choisissez le type Image et enregistrez. L’éditeur affiche alors le code :

<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>

Collez-le à l’endroit où le générateur doit apparaître. Utilisez data-target="#gallery" pour l’afficher dans un élément existant, ou data-height="520px" pour laisser plus de place au résultat (les widgets d’image font 420px par défaut). Choisissez l’emplacement Bouton flottant si vous préférez ouvrir le générateur depuis un bouton dans un coin.

Les réglages qui méritent une minute

  • Modèle : le sélecteur liste les modèles d’image du catalogue avec leurs prix. Les modèles qui se contentent de retoucher ou d’agrandir une image existante ne conviennent pas ici, car le widget part d’un prompt texte.
  • Clé API : sélectionnez la clé avec laquelle fonctionne le widget, ou choisissez Créer une nouvelle clé API en bas de la liste. La limite de dépense quotidienne, le débit de requêtes et les modèles autorisés de cette clé s’appliquent au widget.
  • Textes : définissez le titre, le texte du champ (un bon exemple de prompt aide les visiteurs à se lancer) et le libellé du bouton.
  • Apparence : couleur d’accent, thème (selon le visiteur, clair ou sombre) et arrondi des coins, pour que le widget s’accorde à votre design.

Où un widget d’image trouve sa place

  • Blogs et communautés créatives : les visiteurs illustrent leurs propres idées.
  • Agences et studios : un outil rapide pour esquisser des concepts sur une landing page.
  • Éducation : les élèves transforment une description en visuel à commenter.

Avant la publication

Indiquez vos domaines dans Paramètres, Sites du widget ; le widget ne répond qu’aux requêtes de ces sites. Définissez une limite de dépense quotidienne, testez quelques prompts dans l’aperçu de l’éditeur et vérifiez le résultat sur mobile comme sur ordinateur.

Vous pouvez concevoir un widget d’image sans compte sur la page des widgets. La documentation des widgets détaille chaque option.

Guides associés