api14
Get API key

We use cookies. Cookies and browser storage keep you signed in and remember your preferences. With your permission we also measure how the site is used. You can any time. See our cookie policy.

Image widget

AI image generator widget code for your website

Let visitors describe a picture and see it generated on your page. This guide walks through the image widget code, placement options and the settings that matter.

Published:

An image generator widget turns a short text description into a picture, right on your page. Visitors type what they want to see, the model you picked creates it, and the result appears in the widget with a download link. You do not need to build a front end or handle files on your server.

How the image widget works

  1. A visitor types a description, for example "a watercolor lighthouse at sunset".
  2. The widget sends the prompt to api14 through your widget's id. Your API key and settings stay on the server.
  3. The image model generates the picture and the widget shows it with a Download link.

Every request is charged to your USD balance at the model's normal price, and the controls you set (described below) decide how much the widget can spend.

The widget code

Create the widget in Widgets, choose Image as the type and save. The editor then shows the code:

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

Paste it where the generator should appear. Use data-target="#gallery" to render into an existing element, or data-height="520px" to give the result more room (image widgets default to 420px). Choose the Floating button placement if you would rather open the generator from a corner button.

Settings worth a minute

  • Model: the picker lists the image models in the catalog with their prices. Models that only edit or upscale an existing image are not useful here, because the widget starts from a text prompt.
  • API key: select the key the widget runs under, or pick Create new API key at the end of the list. That key's daily spend limit, request rate and allowed models apply to the widget.
  • Texts: set the title, the input placeholder (a good example prompt helps visitors start) and the button label.
  • Look: accent color, theme (auto, light or dark) and corner radius so the widget matches your design.

Where an image widget fits

  • Blogs and creative communities: visitors illustrate their own ideas.
  • Agencies and studios: a quick concept tool on a landing page.
  • Education: students turn a description into a visual to discuss.

Before you publish

List your domains under Settings, Widget sites; the widget only answers requests from those sites. Set a daily spend limit, try a few prompts in the editor preview, and check the result on a phone as well as a desktop.

You can design an image widget without an account on the widgets page. The widget docs cover every option in detail.

Related guides