Desarrolladores · Fabrixa Studio

Sus clientes diseñan sus productos — bajo su marca.

Fabrixa Studio es un marca blanca el configurador que incrusta en la página de su producto como un iframe. Sus clientes crean o suben sus propios diseños y los ven en tiempo real sobre el producto; el editor lleva su imagen de marca, no la nuestra, por lo que nunca ven Fabrixa. Cuando hayan terminado, realizas el pedido basándose en la personalización guardada; no hay que subir ni almacenar ningún archivo de diseño.

Guía de integración → Abrir la referencia API

Marca blanca · Shopify, WooCommerce y soluciones personalizadas · Vista previa en directo · Pedido por referencia

Fabrixa Studio · Demostración en directo

Prueba el editor aquí mismo.

Este es precisamente el editor que tendrías que integrar: ábralo, añade el diseño y crea un producto real de nuestro catálogo. No hay que instalar nada ni crear una cuenta.

Es el mismo editor que utilizan sus clientes para diseñar a través de los módulos de Shopify y WooCommerce o de API. Esta página es una demostración en tiempo real: el proceso de pedido se realiza en la plataforma una vez que registrarse.

Ver el editor

Su imagen de marca. El diseño de su cliente. Un único lienzo.

Studio integrado en un escaparate: una biblioteca de diseño, herramientas de texto, formas, imágenes y capas, y una vista previa en tiempo real de la repetición del diseño en el producto. Funciona con marca blanca, por lo que sus clientes ven su tienda, nunca Fabrixa.

yourshop.com/personalizar

El editor Fabrixa Studio integrado en una tienda online: biblioteca de diseños, herramientas de texto, formas, imágenes y capas, y una vista previa en tiempo real de la repetición del estampado en un edredón, con marca blanca bajo la marca del comerciante.

A qué se dedica Studio

Un configurador de marca blanca, integrado en su proceso de pago.

Studio permite a sus clientes personalizar productos en tiempo real —crear un diseño o subir uno propio— y verlo aplicado al producto antes de comprarlo, todo ello con su imagen de marca.

Marca blanca, bajo su marca

El editor lleva su imagen de marca, no la nuestra: sus clientes personalizan y ven una vista previa de los productos en tiempo real sin ver nunca Fabrixa.

Crear o subir diseños

Crean un diseño en Studio o suben su propio material gráfico y, a continuación, lo colocan en el producto en el editor.

Visualización del producto en tiempo real

Studio muestra el diseño aplicado al producto real, de modo que los clientes pueden ver lo que recibirán antes de añadirlo al carrito.

Ahorro por artículo del carrito

Cada personalización se almacena en relación con un cart_item_key Debe proporcionar un valor único por cada línea del carrito por su parte.

Vista previa de la imagen bajo demanda

Obtener una imagen de vista previa renderizada de cualquier cart_item_key para mostrarlo en el carrito, en el resumen del pedido o en cualquier otra parte de su tienda.

Sin gestión de archivos

Nunca se deben modificar los archivos de diseño. Utilice como referencia el cart_item_key al realizar el pedido, Fabrixa adjunta automáticamente el diseño guardado.

Paso 1 — Incrustar

Un iframe en la página de su producto.

¿Vende en Shopify o WooCommerce? Studio está integrado en esos módulos de tienda: solo tiene que activarlo, sin necesidad de programar. Para tiendas y plataformas personalizadas, incorpórelo usted mismo: Studio se aloja en studio.fabrixa.com y se añadió con un iframe. Introduzca tres valores en la URL; el resto se gestiona desde el editor, que se muestra con marca blanca bajo su imagen de marca.

application_key — su clave de aplicación, limita la integración a su canal de ventas
sku — la variante de producto SKU, extraída de la integración API
cart_item_key — un valor único que generas por cada línea del carrito; Studio guarda la personalización asociada a ella

página-del-producto.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>

Paso 2 — Escuchar

Studio responde mediante postMessage.

Studio envía dos mensajes a la ventana principal. customizationFinished se activa cuando el cliente hace clic Añadir al carrito; closeButtonClicked se dispara cuando hacen clic Atrás. Presta atención a los sonidos que se oyen en el dispositivo principal y comprueba siempre event.origin.

El customizationFinished, añada el artículo a su carrito utilizando el mismo cart_item_key que has introducido en el iframe: ese es el enlace al diseño 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();
  }
});

Paso 3 — Vista previa

Muestra el diseño terminado donde quieras.

Una vez guardada una personalización, obtén una imagen renderizada de la misma desde el endpoint de vista previa; solo tiene que establecerla como la src de un <img>. Ideal para el carrito, el resumen del pedido o una página de confirmación.

La vista previa se basa en el mismo cart_item_key, con su clave de aplicación en la cadena 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">

Paso 4 — Realizar el pedido

Realiza el pedido indicando la referencia.

Al finalizar la compra, POST la orden de /v2/integration/orders desde su backend. Para una línea diseñada por un cliente en Studio, envíe el sku, el quantity y lo mismo cart_item_key que pasaste al iframe — esa clave es el diseño guardado, así que no sources Se necesita el archivo. Fabrixa extrae la personalización y la incorpora a la producción.

cart_item_key es la referencia de Studio: utilízala únicamente para las líneas que el cliente haya personalizado en Studio. Cada fila contiene o bien un cart_item_key (diseñado en Studio) o a sources archivo (su propio diseño — PDF, TIFF, JPG o PNG), nunca ambos. El resto de los datos del pedido son idénticos.

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

Llaves y seguridad

Clave de aplicación en el navegador, token de acceso en su backend.

Studio y el endpoint de vista previa utilizan su Application Key, que, por diseño, es visible en el código incrustado: solo afecta al editor y muestra vistas previas de su canal. Para crear pedidos se necesita el Application Access Token además, y eso se queda en su servidor.

En el navegador

Estudio y vista previa

application_key en la URL del iframe de Studio
Application-Key en la URL de la imagen de vista previa
Muestra el editor y las vistas previas de los diseños guardados para su canal
No se pueden realizar pedidos, consultar la facturación ni consultar los datos de otro canal

Solo backend

Creación de pedidos

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Crea y realiza el seguimiento de los pedidos a través de POST /v2/integration/orders
Guarda el token de acceso en el servidor; nunca lo incluyas en el código del cliente.

Acceso

Studio está habilitado por cuenta.

Cree un canal de ventas en su panel de control para generar la clave de aplicación con la que se autentica la aplicación integrada; a continuación, desarrolle y pruebe la aplicación con ese canal antes de que empiece a gestionar pedidos reales. En la documentación de referencia de API hay una demostración en vivo en la que puede abrir Studio con su propio SKU y su clave; los precios varían según el nivel de volumen, así que póngase en contacto con nuestro equipo para obtener más detalles.

¿Estás listo para la integración?

Añada Studio a su tienda.

Cree un canal de ventas para generar sus claves e integrar Studio hoy mismo. ¿Necesita ayuda para configurar los eventos o el flujo de pedidos? Hable con un ingeniero de soluciones: le responderemos en el plazo de un día laborable.

Contactar a un ingeniero de soluciones Lea la guía de integración