Basic

Plantilla OG optimizada para SEO y compartir en redes sociales.

Dimensiones: 1200x630

Template ID: basic

Propiedades

Propiedad	Tipo	Requerido	Long. Máxima	Validación
`title` Título de la página o artículo	string	Sí	80	`maxLength(80)`
`description` Descripción breve del contenido	string	Sí	160	`maxLength(160)`
`siteName` Nombre del sitio o dominio	string	Sí	40	`maxLength(40)`
`imageUrl` URL de la imagen representativa	string (URL)	Sí	-	`url (HTTPS only)`
`primaryColor` Color de fondo	string (hex)	Sí	-	`color (hex)`
`accentColor` Color de acento	string (hex)	Sí	-	`color (hex)`

Ejemplo

{
  "template": "basic",
  "title": "How to Build Modern Web Applications",
  "description": "A comprehensive guide to building fast, scalable, and maintainable web applications.",
  "siteName": "blog.example.com",
  "imageUrl": "https://example.com/image.jpg",
  "primaryColor": "#0F172A",
  "accentColor": "#06B6D4"
}

Ejemplos de código

const response = await fetch("https://assets.qbacode.com/api/v1/generate-asset", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
        "template": "basic",
        "title": "How to Build Modern Web Applications",
        "description": "A comprehensive guide to building fast, scalable, and maintainable web applications.",
        "siteName": "blog.example.com",
        "imageUrl": "https://example.com/image.jpg",
        "primaryColor": "#0F172A",
        "accentColor": "#06B6D4"
    })
});

if (response.ok) {
  const blob = await response.blob();
  const imageUrl = URL.createObjectURL(blob);
  document.getElementById("preview").src = imageUrl;
} else {
  const error = await response.json();
  console.error("Error:", error);
}