Kehittäjät · Fabrixa Studio

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

Fabrixa Studio on white-label mukautustyökalu, jonka upotat tuotesivullesi iframe. 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 tallennetun muokkauksen perusteella — kuvatiedostoja 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öityä.

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 peitossa, valkoisella etiketillä 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 kuvamateriaalinsa 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 cart_item_key toimitatte — yhden yksilöllisen arvon kutakin ostoskorin riviä kohden omalta puoleltanne.

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ä

Älä koskaan muokkaa kuvamateriaalia sisältäviä tiedostoja. 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 niitä napsautetaan Takaisin. Kuuntele niitä vanhemman laitteesta ja tarkista aina event.origin.

Päivämäärä customizationFinished, lisää tuote ostoskoriin käyttämällä samaa avainta cart_item_key jonka olet välittänyt iframe-kehykseen — se on linkki 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ä sku, se quantity ja sama cart_item_key jonka välitit iframeen — 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 Studiossa mukauttamiin viivoihin. Jokaisessa rivissä on joko cart_item_key (suunniteltu Studio-ohjelmalla) tai a sources tiedosto (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 esikatselupäätepiste 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 teidän taustajärjestelmässänne.

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 sovelluksen 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 Studion omalla SKU-tunnuksellasi ja avaimellasi — hinnoittelu vaihtelee volyymitasojen mukaan, joten ota yhteyttä tiimiimme saadaksesi tarkempia tietoja.

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