SDK JavaScript incorporabile. I clienti finali possono personalizzare la propria grafica - caricare immagini, aggiungere testo, posizionare, ritagliare - sulla pagina del prodotto, nel vostro branding. Quando salvano, l'SDK restituisce un URL di grafica pronta per la stampa che viene inserito direttamente nell'endpoint dell'ordine. dell'ordine. Nessun iframe, nessun reindirizzamento, nessun marchio Fabrixa visibile al cliente finale.
JS INCORPORATO - TEMATIZZABILE - GANCI PER GLI EVENTI - INDIPENDENTE DAL FRAMEWORK
L'SDK esegue il rendering di un canvas di personalizzazione all'interno di qualsiasi elemento DOM che gli viene fornito. I clienti finali clienti finali possono caricare file artistici, aggiungere livelli di testo, posizionare e ritagliare, visualizzare un'anteprima con il prodotto scelto. Al momento del salvataggio, l'SDK carica l'opera d'arte composta su Fabrixa e restituisce l'URL dell'opera d'arte tramite un callback, pronto per essere pronto per essere inserito nell'ordine API.
Caricamento a trascinamento di PNG, JPG, SVG, AI, PSD. Conversione automatica in formato pronto per la stampa. Avvisi di risoluzione se la grafica del cliente è troppo bassa per il prodotto scelto.
Livelli di testo modificabili con font preselezionati dal marchio. Selezionatore di colori vincolato alla tavolozza del marchio, se specificata. Lingue RTL supportate.
Anteprima in tempo reale della grafica sul prodotto scelto (T-shirt, felpa con cappuccio, cuscino, ecc.) utilizzando i mockup del prodotto. I clienti vedono cosa riceveranno.
Guide visive che mostrano le zone sicure per la stampa, le aree al vivo e le linee di piegatura su prodotti a più pannelli come i copripiumini. I clienti non possono posizionare la grafica al di fuori dell'area stampabile.
Al momento del salvataggio, l'SDK compone il progetto, lo carica sullo storage Fabrixa e restituisce un URL stabile. Passarlo come url_opera d'arte nella richiesta d'ordine.
Callback di eventi JS per canvas-ready, layer-added, save, error, ecc. Create le vostre analisi, i test A/B o i flussi di onboarding.
Indipendente dal framework. L'SDK è un semplice JS - funziona con React, Vue, Svelte, HTML, modelli Rails renderizzati dal server, ovunque.
<script src="https://sdk.fabrixa.com/editor/v1/sdk.js"> <div id="fbx-editor" stile="altezza:600px"></div> <script> costitutivo redattore = FabrixaEditor.init({ contenitore: "#fbx-editor", chiave_api: "pk_live_yourPublicKeyHere", prodotto_id: "prod_tee_unisex_aop", // Tema del vostro marchio tema: { colore_primario: "#E95121", famiglia_di_caratteri: "Inter, sistema-ui", raggio_bordo: "4px" }, // Callback su_salvataggio: (opere d'arte) => { // artwork.url è l'URL pronto per la stampa - da inserire nell'ordine API console.log(artwork.url, artwork.thumbnail_url); } }); </script>
Il chiave_api ecco il pubblico -, sicuro da spedire nel codice del browser. Autorizza solo l'editor canvas; per effettuare gli ordini effettivi è necessaria la chiave segreta sul backend.
L'impostazione è libera: colore primario, famiglia di caratteri, raggio del bordo e alcuni toni di superficie. toni superficiali. L'editor non espone di proposito tutte le variabili CSS; la coerenza tra i siti dei clienti è più importante della personalizzazione completa.
tema: { // Colori del marchio colore_primario: "#E95121", // CTA, stati attivi colore_di_sfondo: "#FFFFFF", // sfondo della tela colore_superficie: "#F4F4F4", // pannelli, elenco dei livelli testo_primario: "#18202D", testo_secondario: "#5C6573", // Tipografia famiglia_di_caratteri: "Inter, system-ui, sans-serif".", font_family_mono: "JetBrains Mono, monospazio".", // Forma raggio_bordo: "4px", stile_pulsante: "solido", // "solido" | "contorno" // Comportamento mostra_alimentato_da: falso, // nascondere il piè di pagina "Powered by Fabrixa abilita_layers_testo: vero, abilita_il_carico_di_immagini: vero, dimensione max_canvas: { larghezza: 4096, altezza: 4096 } }
Ogni modifica significativa dello stato dell'editor emette un evento JS. Iscriversi al momento dell'init o allegare in seguito tramite editor.on().
costitutivo redattore = FabrixaEditor.init({ /* ... */ }); // Editor montato e renderizzato redattore.su("pronto", () => analytics.traccia("editor_open")); // Aggiunta di un livello (immagine, testo) redattore.su("layer.added", (layer) => { analisi.traccia("editor_layer_added", { type: layer.type }); }); // Il cliente ha premuto il pulsante di salvataggio redattore.su("salvare", (artwork) => { // Inoltro al backend per creare l'ordine effettivo fetch("/api/ordini", { metodo: "POST", corpo: JSON.stringere({ artwork_url: artwork.url, product_id: "prod_tee_unisex_aop", dimensione: selectedSize }) }); }); // Errori (file troppo piccolo, caricamento non riuscito, ecc.) redattore.su("errore", (err) => { // err.code è una stringa stabile, da attivare console.error(err.code, err.message); });
L'SDK utilizza un pubblico che è sicuro da spedire nel codice client. Può eseguire il rendering della tela, accettare i caricamenti e produrre un URL per le opere d'arte pronte per la stampa, ma non può effettuare un ordine, interrogare la fatturazione del conto o leggere i dati degli altri clienti. ma non può effettuare un ordine, interrogare la fatturazione dell'account o leggere le opere di altri clienti. di altri clienti. L'inserimento dell'ordine avviene nel backend con il vostro segreto chiave.
L'accesso all'SDK dell'editor è abilitato per ogni account. Una volta effettuato il primo ordine di ordine di produzione, è possibile richiedere l'accesso all'SDK dal dashboard o contattando un ingegnere di soluzioni. Forniamo chiavi pubbliche e segrete, oltre a un un ambiente sandbox per sviluppare l'integrazione prima di toccare gli ordini reali.
I prezzi variano a seconda del livello di volume dell'SDK. Per informazioni specifiche, rivolgersi alle vendite.
Parlate con un ingegnere delle soluzioni per fornire le chiavi SDK, impostare l'ambiente sandbox, e per esaminare qualsiasi requisito di canvas personalizzato. L'accesso all'SDK avviene in genere in 24h dopo una breve revisione.
English English 
Nederlands
Français
Deutsch
Italiano
Português
Español
Українська
