Sviluppatori · Fabrixa Studio

I Suoi clienti disegnano i propri prodotti — sotto il Suo brand.

Fabrixa Studio è uno studio di white label strumento di personalizzazione che si integra nella pagina del prodotto come un iframe. I Suoi clienti creano o caricano i propri disegni e ne visualizzano l'anteprima in tempo reale sul prodotto: l'editor riporta il Suo marchio, non il nostro, quindi non vedranno mai Fabrixa. Una volta terminato, può effettuare l'ordine facendo riferimento alla personalizzazione salvata, senza bisogno di caricare o archiviare file grafici.

Guida all'integrazione → Apra il documento di riferimento API

White-label · Shopify, WooCommerce e soluzioni personalizzate · Anteprima in tempo reale · Ordine per riferimento

Fabrixa Studio · Dimostrazione dal vivo

Prova l'editor proprio qui.

Questo è proprio l'editor che dovresti incorporare: aprilo, inserisci la grafica e crea un prodotto reale dal nostro catalogo. Non occorre installare nulla, né creare un account.

È lo stesso editor che i Suoi clienti utilizzano per creare i propri siti tramite i moduli Shopify e WooCommerce o API. Questa pagina è una demo interattiva: l'ordine viene effettuato sulla piattaforma una volta che si registri.

Vedi l'editor

Il Suo marchio. Il design del Suo cliente. Un'unica tela.

Studio integrato in una vetrina: una libreria di design, strumenti per testo, forme, immagini e livelli, oltre a un’anteprima in tempo reale della ripetizione sul prodotto. Funziona in modalità white-label, quindi i Suoi clienti vedranno il Suo negozio, mai Fabrixa.

yourshop.com/personalizza

L'editor Fabrixa Studio integrato in una vetrina online: libreria di design, strumenti per testo, forme, immagini e livelli, oltre a un'anteprima in tempo reale della ripetizione del motivo su un piumone, in white label con il marchio del rivenditore

Cosa fa Studio

Uno strumento di personalizzazione white-label, integrato nella procedura di pagamento.

Studio permette ai Suoi clienti di personalizzare i prodotti in tempo reale — creando un disegno o caricando una propria immagine — e di visualizzarlo sul prodotto prima dell'acquisto, il tutto con il Suo marchio.

White-label, con il Suo marchio

L'editor riporta il Suo marchio, non il nostro: i Suoi clienti personalizzano e visualizzano in anteprima i prodotti in tempo reale senza mai vedere Fabrixa.

Crei o carichi i Suoi disegni

Creano un disegno all’interno di Studio oppure caricano una propria grafica, per poi posizionarla sul prodotto nell’editor.

Visualizzazione in tempo reale del prodotto

Studio riproduce il design sul prodotto reale, così i clienti possono vedere cosa riceveranno prima di aggiungerlo al carrello.

Salvataggio per articolo nel carrello

Ogni personalizzazione viene associata a un cart_item_key deve fornire — un valore unico per ogni riga del carrello da parte Sua.

Anteprima dell'immagine on demand

Recupera un'immagine di anteprima renderizzata per qualsiasi cart_item_key da visualizzare nel carrello, nel riepilogo dell'ordine o in qualsiasi altra sezione del Suo negozio.

Nessuna gestione dei file

Non modificare mai i file grafici. Fare riferimento al cart_item_key all'ordine e Fabrixa allega automaticamente il progetto salvato.

Fase 1 — Incorporare

Un iframe nella pagina del prodotto.

Vende su Shopify o WooCommerce? Studio è integrato in questi moduli per negozi online: basta attivarlo, senza bisogno di scrivere codice. Per vetrine e piattaforme personalizzate, può incorporarlo Lei stesso: Studio è ospitato su studio.fabrixa.com e aggiunto con un iframe. Inserisca tre valori nell'URL: al resto ci pensa l'editor, che visualizza il contenuto in modalità white label con il Suo marchio.

application_key — la Sua chiave dell'applicazione, limita l'integrazione al Suo canale di vendita
sku — la variante di prodotto SKU, ricavata dall'integrazione API
cart_item_key — un valore unico generato per ogni riga del carrello; Studio salva la personalizzazione associata a tale riga

product-page.html

<!-- Embed Fabrixa Studio on your product page -->
<iframe id="fabrixa-studio"
  src="https://studio.fabrixa.com?application_key=APPLICATION_KEY&sku=COF099191&cart_item_key=CART_ITEM_KEY"
  name="FabrixaStudio"
  scrolling="no" frameborder="1"
  width="100%" height="100%" allowfullscreen>
</iframe>

Fase 2 — Ascoltare

Studio risponde tramite postMessage.

Studio invia due messaggi alla finestra principale. customizationFinished si attiva quando il cliente clicca Aggiunga al carrello; closeButtonClicked si accende quando si fa clic Indietro. Controlla se sono presenti sul dispositivo principale e verifica sempre event.origin.

Il customizationFinished, aggiungi la riga al carrello utilizzando lo stesso codice cart_item_key che hai inserito nell'iframe: è il link al progetto salvato.

studio-events.js

window.addEventListener("message", (event) => {
  // Always check the origin first
  if (event.origin !== "https://studio.fabrixa.com") return;

  if (event.data === "customizationFinished") {
    // Add to Cart → store the line keyed by your cart_item_key
    addToCart(cartItemKey);
  } else if (event.data === "closeButtonClicked") {
    // Back → close the editor / restore the product page
    closeStudio();
  }
});

Fase 3 — Anteprima

Mostra il progetto finito ovunque.

Una volta salvata una personalizzazione, recupera un'immagine renderizzata della stessa dall'endpoint di anteprima: basta impostarla come src di un <img>. Ideale per il carrello, il riepilogo dell'ordine o una pagina di conferma.

L'anteprima è sincronizzata con lo stesso cart_item_key, indicando la chiave dell'applicazione nella stringa di query.

cart-preview.html

<!-- Rendered preview of the saved customisation -->
<img
  src="https://api.fabrixa.com/v2/studio/customizations/CART_ITEM_KEY/preview?Application-Key=APPLICATION_KEY"
  alt="Customised product preview"
  style="max-width:100%;height:auto">

Fase 4 — Ordine

Effettuare l'ordine per riferimento.

Al momento del pagamento, POST l'ordine di /v2/integration/orders dal Suo backend. Per una linea disegnata da un cliente in Studio, invii il sku, il quantity e lo stesso cart_item_key che hai passato nell'iframe — quella chiave è il disegno salvato, quindi no sources È necessario il file. Fabrixa preleva la personalizzazione e la trasferisce in produzione.

cart_item_key è il riferimento di Studio: utilizzarlo solo per le linee personalizzate dal cliente in Studio. Ogni riga contiene o un cart_item_key (progettato in Studio) o a sources file (la Sua grafica — PDF, TIFF, JPG o PNG), mai entrambi. Tutto il resto dell'ordine è identico.

POST /v2/integration/orders

{
  "number": "NL2026063001",
  "purchased_at": "2026-06-30 12:00:00",
  "rows": [
    {
      "sku": "SB796162",
      "quantity": 1,
      "cart_item_key": "0cb76770-de2d-4524-aa48-47b6e5f0d8a5"
    }
  ],
  "customer":         { "first_name": "Maria", "email": "maria@example.com" },
  "shipping_address": { "...": "..." }
}

Chiavi e sicurezza

Application Key nel browser, Access Token nel backend.

Studio e l'endpoint di anteprima utilizzano il Suo Application Key, che è visibile nell'incorporamento per impostazione predefinita — limita l'ambito all'editor e visualizza le anteprime per il Suo canale. Per creare ordini è necessario il Application Access Token inoltre, e questo rimane sul Suo backend.

Nel browser

Studio e anteprima

application_key nell'URL dell'iframe di Studio
Application-Key nell'URL dell'immagine di anteprima
Visualizza l'editor e le anteprime dei progetti salvati per il Suo canale
Non è possibile effettuare ordini, visualizzare la fatturazione o consultare i dati di un altro canale

Solo backend

Creazione dell'ordine

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Crea e monitora gli ordini tramite POST /v2/integration/orders
Conservi l'Access Token sul lato server — non lo inserisca mai nel codice client

Accesso

Studio è abilitato per ogni account.

Crei un canale di vendita nella Sua dashboard per generare l'Application Key con cui l'embed effettua l'autenticazione, quindi sviluppi e testi il sistema su quel canale prima che inizi a ricevere ordini reali. Nel riferimento API è disponibile una demo live in cui può aprire Studio utilizzando il Suo SKU e la Sua chiave; i prezzi variano in base al livello di volume, quindi parli con il nostro team per ulteriori dettagli.

Pronti per l'integrazione?

Aggiunga Studio alla Sua vetrina.

Crei oggi stesso un canale di vendita per generare le Sue chiavi e integrare Studio. Ha bisogno di aiuto per configurare gli eventi o il flusso degli ordini? Si rivolga a un Solutions Engineer: riceverà una risposta entro un giorno lavorativo.

Contatti un Solutions Engineer Leggi la guida all'integrazione