🔌 Embed widget (1 line)

The PrintWearAI widget integrates on any web page with a single line of code.

Basic snippet

<script src="https://printwearai.com/embed.js"
        data-key="YOUR_KEY"
        data-sku="JERSEY-001"></script>

Paste this snippet where you want the configurator to appear. The widget mounts an inline iframe into a container (#pwai-configurator by default, or the element you set with data-target). Copy the ready-made snippet from Tenant workspace → Integration.

Available data-* attributes

Attribute	Type	Default	Description
data-key	string	—	Required. Your public embed key fk_… (Tenant workspace → Integration).
data-product	string	—	Product slug → opens straight on that model. If absent, the configurator opens on the product picker (category tabs + product grid).
data-sku	string	—	External SKU. Resolved against the product's SKU / reference field via /api/resolve.
data-autodetect	bool	true	Auto-detects the SKU from the page (Shopify, schema.org, meta). Set "false" on custom sites.
data-target	string	#pwai-configurator	CSS selector of the container that hosts the iframe.
data-height	number	700	Iframe height in px (auto-grows via resize messages).
data-locale	string	auto	ISO language: en, fr, es, de, it.
data-config	string	—	Reopen a previously saved configuration by its id.
data-no-consent	bool	false	Set "true" if your site already handles cookie consent.

SKU auto-detection

The widget automatically recognizes the product in 7 cases:

1. Explicit data-sku
2. Global variable window.PWAI_PRODUCT
3. Meta tag <meta name="pwai:sku" content="...">
4. Shopify Analytics (ShopifyAnalytics.meta.product)
5. JSON-LD application/ld+json with @type: Product
6. Single-product microformat (data-product-id)
7. Open Graph product:retailer_item_id

Choose your own container

<div id="pwai-configurator"></div>
<script src="https://printwearai.com/embed.js"
        data-key="YOUR_KEY"
        data-sku="JERSEY-001"
        data-target="#pwai-configurator"></script>

The configurator always mounts as an inline iframe inside the target element. To open it as a modal or on click, mount it into a container you show/hide yourself (see the cart callback below and the custom site guide).

Open on the product picker

Omit data-product/data-sku (and set data-autodetect="false") to open the configurator on its choice screen: your brand header, category tabs (per sport) and a product grid. Great for a generic “Design yours” button.

Cart add callback

On custom sites there is no automatic add-to-cart (that is built in for Shopify/WooCommerce/PrestaShop). Register your own handler with PwaiEmbed.onAddToCart():

PwaiEmbed.onAddToCart(function (m) {
  // m.config_id                → saved configuration id (keep it: links to production)
  // m.product.name             → product name
  // m.product.flare_id         → internal PrintWearAI id
  // m.quantity                 → quantity
  // m.sizes                    → { "M": 3, "L": 2, ... } size breakdown
  // m.customization.thumbnail  → preview image URL
  // m.customization.patron_svg → production pattern SVG (raw)
  // m.customization.config     → full raw design config
  // m.bat.zones                → [{zone, color, pantone, gradient, pattern}] named zones
  // m.share_token / m.export_url / m.bat_url → server-side design links
  //   (the design is auto-saved server-side, even for guests)
  // m.sku                      → SKU if any
  console.log('Added to cart:', m);
  // → push it into your own cart flow here
});

Design saved callback (no purchase)

Visitors can save a design without ordering (no account needed). Your page gets notified — perfect for lead capture and follow-up:

PwaiEmbed.onDesignSaved(function (m) {
  // m.config_id    → saved design id (reopen later with data-config)
  // m.share_token  → public token
  // m.export_url   → server-side JSON export (config, preview, texts, colors)
  // m.bat_url      → printable proof page (bon à tirer)
  // m.thumbnail    → preview image
  console.log('Design saved:', m);
});

Your backend also receives the design.saved webhook with the same links, plus guest_email when provided.

Security

The data-key key is public: it can appear in the HTML without risk. It gives no read/write access to your private data — only the right to launch a configurator linked to your tenant. For sensitive operations (order creation, reading stats), use the REST API with a secret key.