Developer SDK & Headless

API JavaScript y Embed para Personalizador 3D

Controla el configurador 3D de forma programática. Escucha eventos en tiempo real, sincroniza opciones de producto y recibe el arte final en alta resolución en tu propia aplicación.

1. Carga del Script en Headless o Single-Page App

Incluye el script asíncrono en tu aplicación (Next.js, Nuxt, Astro o HTML estático):

<script src="https://cdn.colora.app/v1/embed.js" async></script>

2. Inicialización mediante JavaScript

Abre el editor programáticamente y gestiona la respuesta cuando el cliente confirme el diseño:

window.Colora.open({
  apiKey: "TU-API-KEY",
  productId: "camiseta-oversize-negra",
  onComplete: function(orderData) {
    console.log("Pedido 3D confirmado:", orderData);
    // orderData.previewUrl -> Imagen 3D terminada
    // orderData.pdfUrl -> Arte PDF 300 DPI listo para DTF
    // orderData.price -> Precio calculado por cm²
  }
});