Vai al contenuto principale
L'editor Fabrixa Studio: uno strumento di personalizzazione dei prodotti in white label integrato in una vetrina online
Sviluppatori · Fabrixa Studio

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

Fabrixa Studio è un 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.

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 copripiumino, in white label con il marchio del rivenditoreL'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 copripiumino, 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.

01
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.

02
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.

03
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.

04
Salvataggio per articolo nel carrello

Ogni personalizzazione viene associata a un cart_item_key che Lei fornisce — un valore unico per ogni riga del carrello da parte Sua.

05
Anteprima dell'immagine on demand

Recuperi 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.

06
Nessuna gestione dei file

Non deve mai toccare i file grafici. Faccia riferimento al cart_item_key nell'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.

Quando il customizationFinished quando si verifica l'evento, aggiungi la riga al carrello con lo stesso codice cart_item_key che hai passato nell'iframe. Quella chiave collega la riga 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 checkout, invii l'ordine con un POST a /v2/integration/orders dal Suo backend. Per una linea progettata da un cliente in Studio, invia il solito sku e quantity più lo stesso cart_item_key che hai passato all’iframe. Quella chiave rappresenta il design salvato, quindi no sources . 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) oppure un file denominato sources (la Sua grafica: PDF, TIFF, JPG o PNG), mai entrambe le cose. 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.

Domande frequenti

Fabrixa Studio, ha risposto

A cosa serve Fabrixa Studio?

Fabrixa Studio è uno strumento di personalizzazione dei prodotti in white label che i commercianti integrano nella pagina dei propri prodotti sotto forma di iframe. I clienti creano o caricano i propri disegni e ne visualizzano l’anteprima in tempo reale sul prodotto, con il marchio del commerciante anziché quello di Fabrixa. L’ordine viene quindi effettuato in base alla personalizzazione salvata, quindi non è necessario caricare o archiviare alcun file grafico.

Come posso integrare Fabrixa Studio nella pagina del mio prodotto?

Aggiungi un iframe che punti a studio.fabrixa.com e inserisci tre valori nell'URL: application_key per limitare l'incorporamento al Suo canale di vendita, sku per la variante del prodotto e cart_item_key, un valore univoco che generi per ogni riga del carrello e in base al quale Studio salva la personalizzazione. Tutto il resto, compreso il branding dell’editor, viene gestito all’interno di Studio.

Fabrixa Studio avvisa il mio negozio online quando un cliente completa un progetto?

Studio invia due messaggi alla finestra principale tramite postMessage: “customizationFinished”, che viene attivato quando il cliente fa clic su “Aggiungi al carrello”, e “closeButtonClicked”, che viene attivato quando fa clic su “Indietro”. La Sua pagina dovrebbe verificare event.origin prima di agire su entrambi i messaggi, quindi aggiungere la riga al carrello utilizzando come chiave lo stesso cart_item_key passato all’iframe.

Come si collega un progetto di Studio a un ordine?

Quando invia una richiesta POST a /v2/integration/orders, inserisca come riga dell’ordine lo stesso cart_item_key che ha passato all’iframe di Studio, insieme allo sku e alla quantità. Quella chiave corrisponde al design salvato, quindi per quella riga non è necessario alcun file sources: ogni riga dell’ordine contiene o un cart_item_key o un file sources, mai entrambi.

È sicuro inserire la chiave dell'applicazione utilizzata in Fabrixa Studio nel browser?

Sì, la chiave dell'applicazione è visibile nell'embed di Studio per impostazione predefinita: limita l'ambito di applicazione dell'editor e dell'anteprima alle immagini del Suo canale di vendita e non consente di effettuare ordini, leggere i dati di fatturazione o accedere ai dati di un altro canale. Per creare ordini è necessario anche un token di accesso all'applicazione separato, che rimane sul Suo backend e viene inviato come token Bearer.

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.