Desenvolvedores · Fabrixa Studio

Os seus clientes desenham os produtos — sob a sua marca.

Q: Como posso integrar a Fabrixa Studio na página do meu produto?

Adicione um iframe que aponte para studio.fabrixa.com e inclua três valores no URL: application_key para limitar a incorporação ao seu canal de vendas, sku para a variante do produto e cart_item_key, um valor único que gera por cada linha do carrinho e ao qual o Studio associa a personalização. Tudo o resto, incluindo a identidade visual do editor, é gerido no Studio.

A Fabrixa Studio é um marca branca personalizador que incorpora na página do seu produto como um iframe. Os seus clientes criam ou carregam os seus próprios designs e visualizam-nos em tempo real no produto — o editor apresenta a sua marca, não a nossa, pelo que nunca vêem a Fabrixa. Quando terminarem, você efetua a encomenda com base na personalização guardada — sem necessidade de carregar ou armazenar ficheiros de arte final.

Guia de integração → Abrir a referência API

Marca branca · Shopify, WooCommerce e soluções personalizadas · Pré-visualização em tempo real · Encomenda por referência

Fabrixa Studio · Demonstração ao vivo

Experimenta o editor aqui mesmo.

Este é exatamente o editor que iria incorporar — abra-o, insira a imagem e crie um produto real a partir do nosso catálogo. Não é preciso instalar nada, nem criar uma conta.

É o mesmo editor que os seus clientes utilizam para criar os seus designs através dos módulos do Shopify e do WooCommerce ou da API. Esta página é uma demonstração em tempo real — a encomenda é efetuada na plataforma assim que registar-se.

Ver o editor

A sua marca. O design do seu cliente. Uma única tela.

Studio integrado numa montra — uma biblioteca de design, ferramentas de texto, formas, imagens e camadas, e uma pré-visualização em tempo real da repetição no produto. Funciona em marca branca, pelo que os seus clientes vêem a sua loja, nunca a Fabrixa.

yourshop.com/personalizar

O editor Fabrixa Studio integrado numa loja online — biblioteca de designs, ferramentas de texto, formas, imagens e camadas, e uma pré-visualização em tempo real da repetição do padrão numa capa de edredão, white-label sob a marca do comerciante

O que o Studio faz

Um configurador de marca branca, integrado no seu processo de finalização da compra.

O Studio permite que os seus clientes personalizem os produtos em tempo real — criem um design ou carreguem o seu próprio — e vejam o resultado no produto antes de o comprarem, tudo com a sua marca.

Marca branca, com a sua marca

O editor apresenta a sua marca, não a nossa — os seus clientes personalizam e visualizam os produtos em tempo real sem nunca verem a Fabrixa.

Criar ou carregar designs

Criam um desenho no Studio ou carregam a sua própria imagem e, em seguida, posicionam-na no produto no editor.

Visualização do produto em tempo real

A Studio aplica o design ao produto real, para que os clientes possam ver o que irão receber antes de o adicionarem ao carrinho.

Poupança por artigo do carrinho

Cada personalização é guardada associada a um cart_item_key deve fornecer — um valor único por linha do carrinho da sua parte.

Pré-visualização da imagem a pedido

Obter uma imagem de pré-visualização renderizada para qualquer cart_item_key para apresentar no carrinho, no resumo da encomenda ou em qualquer parte da sua loja.

Sem gestão de ficheiros

Nunca se deve alterar os ficheiros de arte final. Consulte o cart_item_key na encomenda, e a Fabrixa anexa automaticamente o desenho guardado.

Passo 1 — Incorporar

Um iframe na página do seu produto.

Vende no Shopify ou no WooCommerce? O Studio está integrado nesses módulos de loja — basta ativá-lo, sem necessidade de código. Para lojas e plataformas personalizadas, pode incorporá-lo você mesmo: o Studio é fornecido a partir de studio.fabrixa.com e acrescentou com um iframe. Passe três valores na URL — tudo o resto é tratado no editor, que apresenta uma versão «white-label» com a sua marca.

application_key — a sua Chave de Aplicação, limita a integração ao seu canal de vendas
sku — a variante do produto SKU, obtida a partir da integração API
cart_item_key — um valor único que gera por cada linha do carrinho; o Studio guarda a personalização associada a essa linha

página-do-produto.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>

Passo 2 — Ouvir

O Studio responde através do `postMessage`.

O Studio envia duas mensagens para a janela principal. customizationFinished é acionado quando o cliente clica em Adicionar ao carrinho; closeButtonClicked dispara quando clicam em Voltar. Esteja atento a esses sinais na janela principal e verifique sempre event.origin.

Quando o customizationFinished Quando o evento for acionado, adicione a linha ao seu carrinho com a mesma chave cart_item_key que passaste para o iframe. Essa chave associa a linha ao desenho guardado.

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

Passo 3 — Pré-visualização

Mostra o design final em qualquer lugar.

Assim que uma personalização for guardada, obtenha uma imagem renderizada da mesma a partir do ponto final de pré-visualização — basta defini-la como o src de um <img>. Ideal para o carrinho, o resumo da encomenda ou uma página de confirmação.

A pré-visualização é baseada no mesmo cart_item_key, com a sua chave de aplicação na cadeia de consulta.

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

Passo 4 — Encomenda

Efetue a encomenda por referência.

No momento do pagamento, POST a encomenda para /v2/integration/orders a partir do seu backend. Para uma linha criada por um cliente no Studio, envie o habitual sku e quantity mais o mesmo cart_item_key que passaste para o iframe. Essa chave corresponde ao design guardado, por isso não sources não é necessário. A Fabrixa extrai a personalização e coloca-a em produção.

cart_item_key é a referência do Studio — utilize-a apenas para linhas que o cliente tenha personalizado no Studio. Cada linha contém ou um cart_item_key (criado no Studio) ou um ficheiro com o nome sources (o seu próprio material gráfico: PDF, TIFF, JPG ou PNG), nunca ambos. Todo o resto do pedido é idêntico.

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

Chaves e segurança

Chave de aplicação no navegador, token de acesso no seu backend.

O Studio e o ponto final de pré-visualização utilizam o seu Application Key, que é visível na incorporação por definição — limita-se apenas ao editor e apresenta pré-visualizações para o seu canal. A criação de encomendas requer o Application Access Token também, e isso fica no seu backend.

No navegador

Estúdio e pré-visualização

application_key na URL do iframe do Studio
Application-Key na URL da imagem de pré-visualização
Apresenta o editor e as pré-visualizações dos designs guardados para o seu canal
Não é possível efetuar encomendas, consultar a faturação nem aceder aos dados de outro canal

Apenas backend

Criação de encomendas

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Criar e acompanhar encomendas através de POST /v2/integration/orders
Guarde o token de acesso no lado do servidor — nunca o inclua no código do cliente

Acesso

O Studio está ativado por conta.

Crie um canal de vendas no seu painel de controlo para gerar a Chave de Aplicação com a qual a integração se autentica; em seguida, desenvolva e teste a aplicação nesse canal antes de este começar a receber encomendas reais. Existe uma demonstração ao vivo na documentação de referência da API, onde pode abrir o Studio com o seu próprio SKU e chave — os preços variam consoante o nível de volume, por isso fale com a nossa equipa para obter mais detalhes.

Perguntas frequentes

Fabrixa Studio, respondeu

Para que serve a Fabrixa Studio?

A Fabrixa Studio é um personalizador de produtos de marca branca que os comerciantes incorporam na sua página de produtos como um iframe. Os clientes criam ou carregam os seus próprios designs e visualizam-nos em tempo real no produto, sob a marca do comerciante e não da Fabrixa. A encomenda é então efetuada com base na personalização guardada, pelo que não é necessário carregar nem armazenar qualquer ficheiro gráfico.

Como posso integrar a Fabrixa Studio na página do meu produto?

Adicione um iframe com o endereço studio.fabrixa.com e inclua três valores no URL: application_key para restringir a incorporação ao seu canal de vendas, sku para a variante do produto e cart_item_key, um valor único que gera por cada linha do carrinho e ao qual o Studio associa a personalização. Tudo o resto, incluindo a identidade visual do editor, é gerido no Studio.

A Fabrixa Studio notifica a minha loja quando um cliente conclui um design?

O Studio envia duas mensagens para a janela principal através do postMessage: «customizationFinished», que é acionada quando o cliente clica em «Adicionar ao carrinho», e «closeButtonClicked», que é acionada quando clica em «Voltar». A sua página deve verificar o `event.origin` antes de agir em qualquer uma das mensagens e, em seguida, adicionar a linha ao carrinho com a mesma chave `cart_item_key` passada para o iframe.

Como posso associar um projeto do Studio a uma encomenda?

Envie o mesmo `cart_item_key` que passou para o iframe do Studio como uma linha do pedido, juntamente com o SKU e a quantidade, quando efetuar o pedido POST para /v2/integration/orders. Essa chave corresponde ao design guardado, pelo que não é necessário qualquer ficheiro «sources» para essa linha — cada linha de encomenda contém ou um «cart_item_key» ou um ficheiro «sources», nunca ambos.

É seguro expor no navegador a chave de aplicação utilizada no Fabrixa Studio?

Sim — a Chave de Aplicação é visível na integração do Studio por definição — limita-se apenas ao editor e à imagem de pré-visualização do seu canal de vendas e não permite efetuar encomendas, consultar faturação nem aceder aos dados de outro canal. A criação de encomendas requer também um Token de Acesso à Aplicação separado, que permanece no seu backend e é enviado como um token «Bearer».

Pronto para a integração?

Adicione o Studio à sua loja online.

Crie um canal de vendas para gerar as suas chaves e integrar o Studio ainda hoje. Precisa de ajuda para configurar os eventos ou o fluxo de encomendas? Fale com um engenheiro de soluções — receberá uma resposta no prazo de um dia útil.

Contactar um engenheiro de soluções Ler o guia de integração