Kehittäjät · Fabrixa Studio

Asiakkaasi suunnittelevat omat tuotteensa — omalla brändilläsi.

Q: Mihin Fabrixa Studioa käytetään?

Fabrixa Studio on white-label-tuotteiden muokkauspalvelu, jonka verkkokauppiaat upottavat tuotesivuilleen iframe-kehyksenä. Asiakkaat luovat tai lataavat omia mallejaan ja voivat esikatsella niitä reaaliaikaisesti tuotteessa, jolloin tuotteessa näkyy verkkokauppiaan brändi Fabrixa-yhtiön sijaan. Tilaus tehdään sitten tallennetun räätälöinnin perusteella, joten kuvatiedostoja ei tarvitse ladata tai tallentaa.

Q: Miten voin upottaa Fabrixa Studion tuotesivulleni?

Lisää iframe, joka viittaa osoitteeseen studio.fabrixa.com, ja välitä URL-osoitteessa kolme arvoa: application_key, jolla rajoitat upotuksen myyntikanavaasi, sku tuotevariantin tunnuksena sekä cart_item_key, joka on jokaiselle ostoskorin riville luomasi yksilöllinen arvo, johon Studio tallentaa mukautukset. Kaikki muu, mukaan lukien editorin brändäys, hoidetaan Studion sisällä.

Fabrixa Studio on white-label mukautustyökalu, jonka upotat tuotesivullesi iframe-kehyksenä. Asiakkaasi luovat tai lataavat omat mallinsa ja esikatselevat niitä reaaliaikaisesti tuotteessa — muokkausohjelma on brändätty sinun brändilläsi, ei meidän, joten he eivät näe Fabrixa-yhtiötä missään vaiheessa. Kun he ovat valmiita, teet tilauksen viittaamalla tallennettuun mukautukseen — painotiedostoja ei tarvitse ladata tai tallentaa.

Integrointiohje → Avaa API-viite

White-label · Shopify, WooCommerce ja räätälöidyt ratkaisut · Reaaliaikainen esikatselu · Tilaus viitenumeron mukaan

Fabrixa Studio · Live-esittely

Kokeile editoria suoraan tästä.

Tämä on juuri se editori, jonka voit upottaa sivustollesi – avaa se, lisää kuva ja suunnittele oikea tuote valikoimastamme. Mitään ei tarvitse asentaa, eikä käyttäjätiliä tarvita.

Se on sama editori, jolla asiakkaasi luovat sisältöä Shopify- ja WooCommerce-moduulien tai API:n kautta. Tämä sivu on reaaliaikainen kokeiluversio — tilaus tehdään alustalla, kun olet rekisteröidy.

Katso editori

Sinun brändisi. Asiakkaasi suunnittelema. Yksi työpinta.

Myymälätilaan integroitu Studio — suunnittelukirjasto, teksti-, muoto-, kuva- ja tasotyökalut sekä reaaliaikainen toistokuvaus tuotteesta. Se toimii white label -periaatteella, joten asiakkaasi näkevät vain oman verkkokauppasi, eivät koskaan Fabrixa-yhtiötä.

yourshop.com/customise

Verkkokauppaan integroitu Fabrixa Studio -editori – suunnittelukirjasto, teksti-, muoto-, kuva- ja tasotyökalut sekä reaaliaikainen kuvion toistumisen esikatselu pussilakanassa, white label -periaatteella myyjän tuotemerkin alla

Mitä Studio tekee

Valkoisen etiketin mukautustyökalu, joka on integroitu kassaprosessiin.

Studio-palvelun avulla asiakkaasi voivat räätälöidä tuotteita reaaliajassa – luoda oman mallin tai ladata oman kuvansa – ja nähdä lopputuloksen tuotteessa ennen ostamista, kaikki brändisi nimissä.

White-label-ratkaisu, omalla tuotemerkilläsi

Editori heijastaa teidän brändiänne, ei meidän – asiakkaanne voivat muokata ja esikatsella tuotteita reaaliajassa näkemättä koskaan Fabrixa-yhtiötä.

Luo tai lataa malleja

He luovat mallin Studio-ohjelmassa tai lataavat oman painotiedostonsa ja sijoittavat sen sitten tuotteeseen editorissa.

Tuotteen reaaliaikainen visualisointi

Studio näyttää mallin todellisessa tuotteessa, joten asiakkaat näkevät, mitä he saavat, ennen kuin lisäävät tuotteen ostoskoriin.

Tallennettu ostoskorin tuotetta kohden

Jokainen mukautus tallennetaan avaimella cart_item_key — yksi yksilöllinen arvo, jonka toimitat kutakin ostoskorin riviä kohden omalta puoleltasi.

Esikatselukuva pyynnöstä

Hae renderoitu esikatselukuva mistä tahansa cart_item_key näytettäväksi ostoskoriin, tilausyhteenvetoon tai mihin tahansa verkkokaupassasi.

Ei tiedostojen käsittelyä

Et koskaan koske painotiedostoihin. Viittaa cart_item_key tilauksen yhteydessä, ja Fabrixa liittää tallennetun mallin automaattisesti.

Vaihe 1 — Upota

Yksi iframe tuotesivullasi.

Myytkö Shopify- tai WooCommerce-verkkokaupassa? Studio on integroitu näihin verkkokauppamoduuleihin – ota se käyttöön ilman koodausta. Mukautettujen verkkokauppasivustojen ja alustojen osalta voit upottaa sen itse: Studio toimitetaan osoitteesta studio.fabrixa.com ja siihen lisättiin iframe. Syötä kolme arvoa URL-osoitteeseen — kaikki muu hoidetaan editorin sisällä, joka näyttää white-label-sisällön brändisi nimissä.

application_key — sovelluksen avain, joka rajoittaa upotuksen koskemaan vain myyntikanavaasi
sku — tuotevariantti SKU, joka on haettu integraatiosta API
cart_item_key — jokaiselle ostoskorin riville määrittämäsi yksilöllinen arvo; Studio tallentaa kyseisen rivin mukaiset mukautukset

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

Vaihe 2 — Kuuntele

Studio vastaa postMessage-komennolla.

Studio lähettää kaksi viestiä pääikkunaan. customizationFinished laukeaa, kun asiakas napsauttaa Lisää ostoskoriin; closeButtonClicked laukeaa, kun asiakas napsauttaa Takaisin. Kuuntele niitä pääikkunassa ja tarkista aina event.origin.

Kun customizationFinished kun tapahtuma laukeaa, lisää rivi ostoskoriisi käyttämällä samaa avainta cart_item_key jonka olet välittänyt iframe-kehykseen. Tuo avain linkittää rivin tallennettuun malliin.

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();
  }
});

Vaihe 3 — Esikatselu

Esittele valmis suunnitelma missä tahansa.

Kun mukautus on tallennettu, hae siitä renderoitu kuva esikatselupisteestä — aseta se vain src jonkin <img>. Sopii erinomaisesti ostoskoriin, tilausyhteenvetoon tai vahvistussivulle.

Esikatselun taustaväri on sama kuin cart_item_key, ja lisää sovelluksen avain kyselymerkkijonoon.

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">

Vaihe 4 — Tilaus

Tee tilaus viitenumeron perusteella.

Maksuvaiheessa, POST määräys /v2/integration/orders taustajärjestelmästäsi. Kun asiakas on suunnitellut tuotteen Studio-ohjelmassa, lähetä tavalliseen tapaan sku ja quantity ja lisäksi sama cart_item_key jonka olet välittänyt iframe-kehykseen. Tuo avain on tallennettu malli, joten ei sources Tiedosto tarvitaan. Fabrixa hakee mukautukset ja siirtää ne tuotantokäyttöön.

cart_item_key on Studio-viite — käytä sitä vain asiakkaan Studio-ohjelmassa mukauttamiin riveihin. Jokaisessa rivissä on joko cart_item_key (suunniteltu Studio-ohjelmalla) tai tiedosto, jonka nimi on sources (oma kuvamateriaali: PDF, TIFF, JPG tai PNG), ei koskaan molempia. Kaikki muut tilauksen tiedot ovat samat.

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": { "...": "..." }
}

Avaimet ja turvallisuus

Sovelluksen avain selaimessa, pääsytunnus palvelimellasi.

Studio ja esikatselu-endpoint käyttävät Application Key, joka näkyy upotuksessa suunnittelun mukaisesti — se rajoittuu vain editorin alueelle ja näyttää esikatselukuvia kanavastasi. Tilausten luomiseen tarvitaan Application Access Token myös, ja se pysyy taustajärjestelmässäsi.

Selaimessa

Studio ja esikatselu

application_key Studio-iframe-URL:ssä
Application-Key esikatselukuvan URL-osoitteessa
Näyttää kanavasi muokkausnäkymän ja tallennettujen suunnitelmien esikatselukuvat
Tilauksia ei voi tehdä, laskutietoja ei voi tarkastella eikä toisen kanavan tietoja voi tarkastella

Vain taustapuoli

Tilauksen luominen

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Luo ja seuraa tilauksia seuraavien kautta POST /v2/integration/orders
Säilytä pääsytunnus palvelinpuolella — älä koskaan lähetä sitä asiakaskoodissa

Pääsy

Studio-ominaisuus otetaan käyttöön tilikohtaisesti.

Luo hallintapaneelissasi myyntikanava, jotta voit luoda Application Key -avaimen, jolla upotus todentaa itsensä. Kehitä ja testaa sitten sovellusta kyseisen kanavan avulla ennen kuin se alkaa käsitellä todellisia tilauksia. API-viiteosassa on live-esittely, jossa voit avata Studio-editorin omalla SKU-tunnuksellasi ja avaimellasi — hinnoittelu vaihtelee volyymitasojen mukaan, joten juttele tiimimme kanssa saadaksesi tarkempia tietoja.

Usein kysytyt kysymykset

Fabrixa Studio vastasi

Mihin Fabrixa Studioa käytetään?

Fabrixa Studio on white label -tuotteiden muokkauspalvelu, jonka verkkokauppiaat upottavat tuotesivuilleen iframe-kehyksenä. Asiakkaat luovat tai lataavat omia mallejaan ja voivat esikatsella niitä reaaliaikaisesti tuotteessa, jolloin tuotteessa näkyy verkkokauppiaan brändi Fabrixa-yhtiön sijaan. Tilaus tehdään sitten tallennetun räätälöinnin perusteella, joten kuvatiedostoja ei tarvitse ladata tai tallentaa.

Miten voin upottaa Fabrixa Studion tuotesivulleni?

Lisää iframe, joka osoittaa osoitteeseen studio.fabrixa.com, ja välitä URL-osoitteessa kolme arvoa: application_key, jolla upotus rajataan myyntikanavaasi, sku, joka viittaa tuotevariaatioon, sekä cart_item_key, joka on jokaiselle ostoskorin riville luomasi yksilöllinen arvo, jonka perusteella Studio tallentaa mukautukset. Kaikki muu, mukaan lukien editorin brändäys, hoidetaan Studion sisällä.

Ilmoittaako Fabrixa Studio verkkokaupalleni, kun asiakas on saanut suunnittelun valmiiksi?

Studio lähettää postMessage-toiminnolla kaksi viestiä pääikkunaan: customizationFinished, joka laukeaa, kun asiakas napsauttaa ”Lisää ostoskoriin” -painiketta, ja closeButtonClicked, joka laukeaa, kun asiakas napsauttaa ”Takaisin”-painiketta. Sivusi tulisi tarkistaa event.origin ennen kuin se reagoi kumpaankaan viestiin, ja lisätä sitten tuotteen ostoskoriin käyttäen samaa cart_item_key-avainta, joka on välitetty iframe-kehykseen.

Miten liitän Studio-suunnitelman tilaukseen?

Lähetä sama cart_item_key, jonka olet välittänyt Studio-iframeen, tilauksen rivinä yhdessä sku-tunnuksen ja määrän kanssa, kun lähetät POST-pyynnön osoitteeseen /v2/integration/orders. Tuo avain on tallennettu malli, joten kyseiselle riville ei tarvita sources-tiedostoa — jokaisella tilausrivillä on joko cart_item_key-avain tai sources-tiedosto, mutta ei koskaan molempia.

Onko Fabrixa Studiossa käytettävää sovelluksen avainta turvallista näyttää selaimessa?

Kyllä — sovelluksen avain näkyy Studio-upotuksessa suunnittelun mukaisesti — se rajoittaa editorin ja esikatselukuvan käytön vain myyntikanavaasi, eikä sillä voi tehdä tilauksia, tarkastella laskutustietoja tai käyttää toisen kanavan tietoja. Tilausten luomiseen tarvitaan lisäksi erillinen sovelluksen pääsytunnus, joka säilyy omassa taustajärjestelmässäsi ja lähetetään Bearer-tunnuksena.

Oletko valmis integrointiin?

Lisää Studio verkkokauppaasi.

Luo myyntikanava avainten luomista varten ja integroi Studio jo tänään. Tarvitsetko apua tapahtumien tai tilausprosessin määrittelyssä? Ota yhteyttä ratkaisusuunnittelijaan – saat vastauksen yhden työpäivän kuluessa.

Ota yhteyttä ratkaisusuunnittelijaan Lue integrointiohje