SDK JavaScript integrable. Los clientes finales personalizan sus propias ilustraciones: cargan imágenes, añadir texto, colocar, recortar... en su página de producto, en su marca. Cuando lo guardan, el SDK devuelve una URL de material gráfico listo para imprimir que se introduce directamente en el punto final del pedido. del pedido. Sin iframe, sin redireccionamiento, sin que la marca Fabrixa sea visible para el cliente final.
JS INCRUSTADO - TEMATIZABLE - GANCHOS DE EVENTOS - INDEPENDIENTE DEL MARCO DE TRABAJO
El SDK renderiza un lienzo de personalización dentro de cualquier elemento DOM que se le indique. Los clientes finales de los clientes finales pueden cargar archivos de ilustraciones, añadir capas de texto, posicionar y recortar, previsualizar con el producto elegido. Al guardar, el SDK carga el material gráfico compuesto en Fabrixa y devuelve la URL de la ilustración a través de una devolución de llamada. pasar al pedido API.
Carga de archivos PNG, JPG, SVG, AI, PSD mediante arrastrar y soltar. Conversión automática a formato listo para imprimir. Advertencias de resolución si la ilustración del cliente es demasiado baja para el producto elegido.
Capas de texto editables con fuentes preseleccionadas por la marca. Selector de color limitado a la paleta de la marca si se especifica una. Compatible con idiomas RTL.
Vista previa en directo de la ilustración en el producto elegido (camiseta, sudadera con capucha, cojín, etc.) mediante maquetas de producto. Los clientes ven lo que van a recibir.
Guías visuales que muestran las zonas seguras para la impresión, las áreas de sangrado y las líneas de pliegue en productos de varios paneles, como las fundas nórdicas. Los clientes no pueden colocar ilustraciones fuera del área imprimible.
Al guardar, el SDK compone el diseño, lo sube al almacenamiento Fabrixa y devuelve una URL estable. Pásela como URL_obra en la solicitud de pedido.
JS callbacks de eventos para canvas-ready, layer-added, save, error, etc. Conecte sus propios análisis, pruebas A/B o flujos de incorporación.
Marco agnóstico. El SDK es simple JS - funciona en React, Vue, Svelte, HTML plano, plantillas Rails renderizadas en servidor, en cualquier lugar.
<script src="https://sdk.fabrixa.com/editor/v1/sdk.js"> <div id="fbx-editor" estilo="altura:600px"></div> <script> const editor = FabrixaEditor.init({ contenedor: "#fbx-editor", clave_api: "pk_live_yourPublicKeyHere", producto_id: "prod_tee_unisex_aop", // Tema para su marca tema: { color_primario: "#E95121", font_family: "Inter, sistema-ui", radio_borde: "4px" }, // Devolución de llamada on_save: (obra de arte) => { // artwork.url es la URL de impresión - introducir en el pedido API consola.log(artwork.url, artwork.thumbnail_url); } }); </script>
En clave_api aquí está el público clave - seguro para enviar en el código del navegador. Sólo autoriza el lienzo editor; la realización de pedidos reales requiere su clave secreta en su backend.
La tematización es opinable: color primario, familia tipográfica, radio del borde, además de algunos tonos superficiales. El editor no expone todas las variables CSS a propósito; la coherencia entre los sitios de los clientes es más importante que el skinning completo.
tema: { // Colores de la marca color_primario: "#E95121", // CTA, estados activos color_de_fondo: "#FFFFFF", // fondo del lienzo color_de_la_superficie: "#F4F4F4", // paneles, lista de capas text_primary: "#18202D", texto_secundario: "#5C6573", // Tipografía font_family: "Inter, system-ui, sans-serif", font_family_mono: "JetBrains Mono, monospace", // Forma radio_borde: "4px", estilo_botón: "sólido", // "sólido" | "contorno" // Comportamiento show_powered_by: falso, // ocultar el pie de página "Powered by Fabrixa enable_text_layers: verdadero, enable_image_upload: verdadero, max_canvas_size: { anchura: 4096, altura: 4096 } }
Cada cambio significativo en el estado del editor emite un evento JS. Suscribirse en el momento de init o adjuntar más tarde a través de editor.on().
const editor = FabrixaEditor.init({ /* ... */ }); // Editor montado y renderizado editor.en("listo", () => analytics.pista("editor_open")); // Capa añadida (imagen, texto) editor.en("capa.añadida", (capa) => { analítica.pista("editor_layer_added", { type: layer.type }); }); // El cliente pulsa el botón de guardar editor.en("guardar", (artwork) => { // Reenviar a su backend para crear el pedido real buscar("/api/pedidos", { método: "POST", cuerpo: JSON.stringify({ artwork_url: artwork.url, product_id: "prod_tee_unisex_aop", tamaño: selectedSize }) }); }); // Errores (archivo demasiado pequeño, carga fallida, etc.) editor.en("error", (err) => { // err.code es una cadena estable - actívala consola.error(err.code, err.message); });
El SDK utiliza un público que se puede incluir en el código del cliente. Puede representar el lienzo, aceptar cargas y producir una URL de material gráfico listo para imprimir - pero no puede realizar un pedido, consultar la facturación de la cuenta o leer las obras de otros clientes. de otros clientes. La colocación de pedidos se realiza en su backend con su secreto llave.
El acceso al SDK del editor se habilita por cuenta. Una vez que haya realizado su primer pedido de producción, puede solicitar acceso al SDK desde el panel de control o contactando con un ingeniero de soluciones. Le proporcionamos claves públicas y secretas, además de un entorno entorno de pruebas para desarrollar la integración antes de que entre en contacto con pedidos reales. reales.
Los precios varían según el nivel de volumen del SDK. Habla con ventas para conocer los detalles.
Hable con un ingeniero de soluciones para proporcionar claves SDK, configurar su entorno sandbox, y analizar cualquier requisito de lienzo personalizado. El plazo de acceso al SDK suele ser de 24h tras una breve revisión.
English English 
Nederlands
Français
Deutsch
Italiano
Português
Español
Українська
