Usamos cookies. Las cookies y el almacenamiento del navegador mantienen tu sesión iniciada y recuerdan tus preferencias. Con tu permiso, también medimos cómo se usa el sitio. Puedes en cualquier momento. Consulta nuestra política de cookies.

Widget de imagen

Código del widget generador de imágenes con IA para tu web

Deja que tus visitantes describan una imagen y la vean generada en tu página. Esta guía repasa el código del widget de imagen, las opciones de ubicación y los ajustes importantes.

Publicado:

Un widget generador de imágenes convierte una breve descripción de texto en una imagen, directamente en tu página. Los visitantes escriben lo que quieren ver, el modelo que elegiste la crea y el resultado aparece en el widget con un enlace de descarga. No necesitas crear una interfaz ni gestionar archivos en tu servidor.

Cómo funciona el widget de imagen

  1. Un visitante escribe una descripción, por ejemplo "un faro en acuarela al atardecer".
  2. El widget envía el prompt a api14 mediante el id de tu widget. Tu clave API y tu configuración se quedan en el servidor.
  3. El modelo de imagen genera la imagen y el widget la muestra con un enlace Descargar.

Cada solicitud se cobra de tu saldo en USD al precio normal del modelo, y los controles que configures (descritos más abajo) deciden cuánto puede gastar el widget.

El código del widget

Crea el widget en Widgets, elige Imagen como tipo y guárdalo. El editor mostrará entonces el código:

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

Pégalo donde deba aparecer el generador. Usa data-target="#gallery" para mostrarlo dentro de un elemento existente, o data-height="520px" para dar más espacio al resultado (los widgets de imagen usan 420px por defecto). Elige la ubicación Botón flotante si prefieres abrir el generador desde un botón en la esquina.

Ajustes que merecen un minuto

  • Modelo: el selector muestra los modelos de imagen del catálogo con sus precios. Los modelos que solo editan una imagen existente o aumentan su resolución no sirven aquí, porque el widget parte de un prompt de texto.
  • Clave API: selecciona la clave con la que funciona el widget, o elige Crear nueva clave API al final de la lista. El límite de gasto diario, el ritmo de solicitudes y los modelos permitidos de esa clave se aplican al widget.
  • Textos: define el título, el texto del campo (un buen prompt de ejemplo ayuda a los visitantes a empezar) y el texto del botón.
  • Apariencia: color de acento, tema (según el visitante, claro u oscuro) y radio de las esquinas para que el widget encaje con tu diseño.

Dónde encaja un widget de imagen

  • Blogs y comunidades creativas: los visitantes ilustran sus propias ideas.
  • Agencias y estudios: una herramienta rápida de conceptos en una landing page.
  • Educación: los estudiantes convierten una descripción en una imagen para comentarla.

Antes de publicarlo

Indica tus dominios en Configuración, Sitios del widget; el widget solo responde a solicitudes de esos sitios. Define un límite de gasto diario, prueba algunos prompts en la vista previa del editor y revisa el resultado tanto en un móvil como en un ordenador.

Puedes diseñar un widget de imagen sin cuenta en la página de widgets. La documentación de widgets explica cada opción en detalle.