Einbettbares JavaScript-SDK. Endkunden können ihr eigenes Artwork anpassen - Bilder hochladen, Bilder hochladen, Text hinzufügen, positionieren, zuschneiden - auf Ihrer Produktseite, in Ihrem Branding. Beim Speichern gibt das SDK eine druckfertige URL zurück, die Sie direkt in den Endpunkt der Bestellung. Kein Iframe, kein Redirect, kein Fabrixa-Branding für den Endkunden sichtbar.
EINGEBETTETES JS - THEMATISIERBAR - EREIGNIS-HAKEN - FRAMEWORK-AGNOSTISCH
Das SDK rendert ein Anpassungs-Canvas innerhalb eines beliebigen DOM-Elements, das Sie ihm übergeben. Ende Endkunden können Bilddateien hochladen, Textebenen hinzufügen, positionieren und zuschneiden, eine Vorschau mit dem ausgewählten Produkt vergleichen. Beim Speichern lädt das SDK das zusammengestellte Bildmaterial in den Fabrixa-Speicher hoch und gibt die URL des Bildes über einen Callback zurück - bereit zur in die Bestellung API zu übertragen.
Hochladen per Drag-and-Drop von PNG, JPG, SVG, AI, PSD. Automatische Konvertierung in ein druckfertiges Format. Auflösungswarnungen, wenn die Kundenvorlage für das gewählte Produkt zu niedrig ist.
Bearbeitbare Textebenen mit vorgewählten Markenschriften. Farbauswahl beschränkt sich auf die Markenpalette, wenn Sie eine angeben. RTL-Sprachen werden unterstützt.
Live-Vorschau des Artworks auf dem gewählten Produkt (T-Shirt, Kapuzenpulli, Kissen usw.) mit Hilfe von Produkt-Mockups. Die Kunden sehen, was sie erhalten werden.
Visuelle Leitfäden zeigen drucksichere Zonen, Beschnittbereiche und Falzlinien bei mehrbahnigen Produkten wie Bettbezügen. Kunden können keine Druckvorlagen außerhalb des druckbaren Bereichs platzieren.
Beim Speichern komponiert das SDK den Entwurf, lädt ihn in den Fabrixa-Speicher hoch und gibt eine stabile URL zurück. Übergeben Sie sie als kunstwerk_url in der Bestellanforderung.
JS-Ereignis-Callbacks für "Canvas-ready", "Layer-added", "Save", "Error", usw. Verknüpfen Sie Ihre eigenen Analysen, A/B-Tests oder Onboarding-Flows.
Framework-unabhängig. Das SDK ist einfaches JS - funktioniert in React, Vue, Svelte, einfachem HTML, Server-gerenderten Rails-Vorlagen, überall.
<script src="https://sdk.fabrixa.com/editor/v1/sdk.js"> <div id="fbx-editor" Stil="Höhe:600px"></div> <script> const Herausgeber = 1TP1Editor.init({ Container: "#fbx-editor", Api_Schlüssel: "pk_live_yourPublicKeyHere", produkt_id: "prod_tee_unisex_aop", // Thema zu Ihrer Marke Thema: { primary_color: "#E95121", Schriftart_Familie: "Inter, system-ui", Rand_Radius: "4px" }, // Rückrufe on_save: (Kunstwerk) => { // artwork.url ist die druckfertige URL - Eingabe in den Auftrag API Konsole.log(artwork.url, artwork.thumbnail_url); } }); </script>
Die Api_Schlüssel hier ist die öffentlich Schlüssel - sicher im Browser-Code zu versenden. Er autorisiert nur das Editor-Canvas; die eigentliche Bestellung erfordert Ihren geheimen Schlüssel in Ihrem Backend.
Die Gestaltung ist frei wählbar - Grundfarbe, Schriftfamilie, Umrandungsradius, sowie ein paar Oberflächentöne. Der Editor legt absichtlich nicht jede CSS-Variable offen; Konsistenz über Kunden-Websites hinweg ist wichtiger als vollständiges Skinning.
Thema: { // Markenfarben primary_color: "#E95121", // CTAs, aktive Zustände hintergrund_farbe: "#FFFFFF", // Leinwand-Hintergrund oberfläche_farbe: "#F4F4F4", // Tafeln, Ebenenliste text_primär: "#18202D", text_sekundär: "#5C6573", // Typografie Schriftart_Familie: "Inter, system-ui, sans-serif", schriftart_familie_mono: "JetBrains Mono, monospace", // Form Rand_Radius: "4px", button_style: "solide", // "Vollton" | "Umriss" // Verhalten show_powered_by: falsch, // Fußzeile "Powered by Fabrixa" ausblenden text_schichten_aktivieren: wahr, bild_hochladen_aktivieren: wahr, max_canvas_size: { Breite: 4096, Höhe: 4096 } }
Jede sinnvolle Änderung des Editorstatus löst ein JS-Ereignis aus. Abonnieren Sie es zur Init-Zeit oder fügen Sie es später über editor.on().
const Herausgeber = 1TP1Editor.init({ /* ... */ }); // Editor montiert und gerendert Herausgeber.auf("bereit", () => analytics.Spur("editor_open")); // Ebene hinzugefügt (Bild, Text) Herausgeber.auf("Ebene.hinzugefügt", (Schicht) => { Analytik.Spur("editor_layer_added", { type: layer.type }); }); // Kunde drückt auf die Schaltfläche "Speichern Herausgeber.auf("speichern", (Kunstwerk) => { // Weiterleitung an Ihr Backend zur Erstellung des eigentlichen Auftrags fetch("/api/aufträge", { Methode: "POST", Körper: JSON.stringify({ artwork_url: artwork.url, product_id: "prod_tee_unisex_aop", Größe: selectedSize }) }); }); // Fehler (Datei zu klein, Upload fehlgeschlagen usw.) Herausgeber.auf("Fehler", (err) => { // err.code ist ein stabiler String - schalten Sie ihn ein Konsole.error(err.code, err.message); });
Das SDK verwendet eine öffentlich Schlüssel, der sich sicher in den Client-Code einbinden lässt. Er kann die Leinwand rendern, Uploads akzeptieren und eine druckfertige URL für die Druckvorlage erzeugen - aber er kann keine Bestellung aufgeben, die Abrechnung abfragen oder die Bilder anderer Kunden lesen. Kunstwerke lesen. Die Auftragserteilung erfolgt in Ihrem Backend mit Ihrem geheim Schlüssel.
Der Zugang zum Editor-SDK wird pro Konto aktiviert. Sobald Sie Ihren ersten Produktionsauftrag erteilt haben, können Sie den SDK-Zugang über das Dashboard oder durch Kontaktaufnahme mit einem Lösungsingenieur. Wir stellen öffentliche und geheime Schlüssel sowie eine Sandbox-Umgebung, in der die Integration entwickelt werden kann, bevor sie mit echten Bestellungen.
Die Preise variieren je nach SDK-Volumenstufe. Sprechen Sie mit dem Vertrieb für weitere Informationen.
Sprechen Sie mit einem Lösungsingenieur, um SDK-Schlüssel bereitzustellen und Ihre Sandbox-Umgebung einzurichten, und die Anforderungen für das Custom Canvas zu besprechen. Der SDK-Zugriff erfolgt in der Regel innerhalb von 24 Stunden nach einer kurzen Überprüfung.
English English 
Nederlands
Français
Deutsch
Italiano
Português
Español
Українська
