Widgetcode voor een AI-afbeeldingsgenerator op je website

Een afbeeldingsgeneratorwidget zet een korte tekstbeschrijving om in een afbeelding, direct op je pagina. Bezoekers typen wat ze willen zien, het model dat je hebt gekozen maakt het, en het resultaat verschijnt in de widget met een downloadlink. Je hoeft geen front-end te bouwen en geen bestanden op je server te verwerken.

Hoe de afbeeldingswidget werkt

1. Een bezoeker typt een beschrijving, bijvoorbeeld "een vuurtoren in aquarel bij zonsondergang".
2. De widget stuurt de prompt via het id van je widget naar api14. Je API-key en instellingen blijven op de server.
3. Het afbeeldingsmodel genereert de afbeelding en de widget toont die met een link Downloaden.

Elk verzoek wordt afgeschreven van je USD-saldo tegen de normale prijs van het model, en de limieten die je instelt (hieronder beschreven) bepalen hoeveel de widget mag uitgeven.

De widgetcode

Maak de widget aan in Widgets, kies Afbeelding als type en sla op. De editor toont dan de code:

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

Plak hem waar de generator moet verschijnen. Gebruik data-target="#gallery" om hem in een bestaand element weer te geven, of data-height="520px" om het resultaat meer ruimte te geven (afbeeldingswidgets zijn standaard 420px hoog). Kies de plaatsing Zwevende knop als je de generator liever opent via een knop in de hoek.

Instellingen die een minuut waard zijn

• Model: de keuzelijst toont de afbeeldingsmodellen uit de catalogus met hun prijzen. Modellen die alleen een bestaande afbeelding bewerken of vergroten zijn hier niet bruikbaar, omdat de widget begint met een tekstprompt.
• API-key: selecteer de key waarop de widget draait, of kies Nieuwe API-key maken onderaan de lijst. De dagelijkse bestedingslimiet, het aantal verzoeken per minuut en de toegestane modellen van die key gelden voor de widget.
• Teksten: stel de titel, de plaatshoudertekst (een goede voorbeeldprompt helpt bezoekers op weg) en de knoptekst in.
• Weergave: accentkleur, thema (automatisch, licht of donker) en hoekafronding, zodat de widget bij je ontwerp past.

Waar een afbeeldingswidget goed past

• Blogs en creatieve community's: bezoekers illustreren hun eigen ideeën.
• Bureaus en studio's: een snelle conceptentool op een landingspagina.
• Onderwijs: studenten zetten een beschrijving om in een beeld om te bespreken.

Voordat je publiceert

Vermeld je domeinen onder Instellingen, Widget-sites; de widget beantwoordt alleen verzoeken van die sites. Stel een dagelijkse bestedingslimiet in, probeer een paar prompts in de voorbeeldweergave van de editor en bekijk het resultaat zowel op een telefoon als op een desktop.

Je kunt zonder account een afbeeldingswidget ontwerpen op de widgetpagina. De widgetdocumentatie beschrijft elke optie in detail.