Integreerbare JavaScript SDK. Eindklanten kunnen hun eigen artwork aanpassen - afbeeldingen uploaden, tekst toevoegen, positioneren, bijsnijden - op uw productpagina, in uw huisstijl. Wanneer ze opslaan, retourneert de SDK een printklare URL die u rechtstreeks in het eindpunt van de bestelling. Geen iframe, geen redirect, geen Fabrixa branding zichtbaar voor de eindklant.
EMBEDDED JS - THEMABLE - EVENT HOOKS - FRAMEWORK-AGNOSTISCH
De SDK rendert een aanpassingscanvas binnen elk DOM-element dat je het geeft. Eind klanten kunnen artworkbestanden uploaden, tekstlagen toevoegen, positioneren en bijsnijden, een voorbeeld bekijken tegen het gekozen product. Bij het opslaan uploadt de SDK het samengestelde artwork naar Fabrixa opslag en retourneert de URL van het kunstwerk via een callback - klaar om door te geven aan de bestelling API.
Slepen en neerzetten van PNG, JPG, SVG, AI, PSD. Automatische conversie naar printklaar formaat. Resolutiewaarschuwingen als het artwork van de klant te laag is voor het gekozen product.
Bewerkbare tekstlagen met vooraf geselecteerde lettertypen. Kleurkiezer beperkt tot merkpalet als je er een opgeeft. RTL-talen ondersteund.
Live preview van het artwork op het gekozen product (T-shirt, hoodie, kussen, enz.) met behulp van product mockups. Klanten zien wat ze zullen ontvangen.
Visuele hulplijnen die de drukveilige zones, afloopgebieden en vouwlijnen aangeven op producten met meerdere panelen, zoals dekbedovertrekken. Klanten kunnen geen illustraties buiten het bedrukbare gebied plaatsen.
Bij het opslaan stelt SDK het ontwerp samen, uploadt het naar de Fabrixa-opslag en retourneert een stabiele URL. Geef het door als kunstwerk_url in de bestelaanvraag.
JS event callbacks voor canvas-ready, layer-added, save, error, enz. Maak je eigen analytics, A/B-tests of onboardingflows.
Framework-agnostisch. De SDK is gewoon JS - werkt in React, Vue, Svelte, gewone HTML, server-rendered Rails-sjablonen, overal.
<script src="https://sdk.fabrixa.com/editor/v1/sdk.js"> <div id="fbx-editor" stijl="hoogte:600px"></div> <script> const redacteur = 1TP1Bewerker.init({ container: "#fbx-editor".", api_sleutel: "pk_live_yourPublicKeyHere".", product_id: "prod_tee_unisex_aop", // Thema voor uw merk thema: { primaire_kleur: "#E95121", lettertypefamilie: "Inter, systeem-ui".", grensstraal: "4px" }, // Terugbellen bij_opslaan: (kunstwerk) => { // artwork.url is de URL voor het afdrukgereed maken - invoeren in order API console.log(artwork.url, artwork.thumbnail_url); } }); </script>
De api_sleutel hier is de openbaar sleutel - veilig om te verzenden in browsercode. Hiermee wordt alleen het canvas van de editor geautoriseerd; voor het plaatsen van daadwerkelijke bestellingen is je geheime sleutel op je backend nodig.
Theming is eigen - primaire kleur, lettertypefamilie, randradius, plus een paar oppervlaktetinten. De editor geeft expres niet elke CSS-variabele weer; consistentie op sites van klanten is belangrijker dan volledige skinning.
thema: { // Merkkleuren primaire_kleur: "#E95121", // CTA's, actieve statussen achtergrondkleur: "#FFFFFF", // canvasachtergrond oppervlaktekleur: "#F4F4", // panelen, lagenlijst tekst_primair: "#18202D", tekst_secundair: "#5C6573", // Typografie lettertypefamilie: "Inter, systeem-ui, schreefloos".", lettertype_familie_mono: "JetBrains Mono, monospace".", // Vorm grensstraal: "4px", knopstijl: "solide", // "solid" | "outline" // Gedrag show_powered_by: vals, // verberg "Powered by Fabrixa" voettekst inschakelen_tekst_lagen: Echt, afbeelding uploaden inschakelen: Echt, max_canvas_grootte: { breedte: 4096, hoogte: 4096 } }
Elke zinvolle verandering van de editorstatus stuurt een JS-event uit. Meld je aan bij het initiëren of sluit later aan via editor.aan().
const redacteur = 1TP1Bewerker.init({ /* ... */ }); // Bewerker gemonteerd en weergegeven redacteur.op("klaar", () => analytics.spoor("editor_open")); // Laag toegevoegd (afbeelding, tekst) redacteur.op("layer.added", (layer) => { analytisch.spoor("editor_layer_added", {type: layer.type }); }); // Klant drukt op de knop Opslaan redacteur.op("opslaan", (kunstwerk) => { // Doorsturen naar uw backend om de daadwerkelijke bestelling te maken ophalen("/api/orders", { methode: "POST", lichaam: JSON.rijgen({ artwork_url: artwork.url, product_id: "prod_tee_unisex_aop", grootte: geselecteerde grootte }) }); }); // Fouten (bestand te klein, upload mislukt, etc.) redacteur.op("fout", (err) => { // err.code is een stabiele string - schakel deze in console.error(err.code, err.message); });
De SDK gebruikt een openbaar sleutel die veilig kan worden verzonden in clientcode. Het kan het canvas renderen, uploads accepteren en een URL voor een afdrukklaar kunstwerk produceren. maar het kan geen bestelling plaatsen, accountfacturering opvragen of het artwork van andere klanten lezen. kunstwerk lezen. Het plaatsen van bestellingen gebeurt op uw backend met uw geheim sleutel.
SDK-toegang voor editors is ingeschakeld per account. Zodra u uw eerste productieorder hebt geplaatst, kunt u SDK-toegang aanvragen via het dashboard of door contact op te nemen met een solutions engineer. We zorgen voor publieke + geheime sleutels, plus een sandbox-omgeving om de integratie tegen te ontwikkelen voordat het echte bestellingen.
De prijzen variëren per SDK-volumestaffel. Neem contact op met de verkoopafdeling voor meer informatie.
Praat met een solutions engineer om SDK-sleutels te leveren, uw sandbox-omgeving op te zetten, en eventuele aangepaste canvasvereisten door te nemen. SDK-toegang wordt meestal binnen 24 uur na een korte beoordeling.
English English 
Nederlands
Français
Deutsch
Italiano
Português
Español
Українська
