Embed widget

Use the browser widget when a shopper personalizes locked artwork before saving a product to cart.

Data attribute API

<script src="https://cdn.stackfill.com/widget/v1.js" async></script>
<button
  data-stackfill-open
  data-stackfill-key="stackfill_live_pk_REPLACE_ME"
  data-stackfill-product="business-card"
  data-stackfill-variant="standard"
  data-stackfill-cart="cart_123"
  data-stackfill-customer-email="customer@example.com">
  Personalize
</button>

Current lifecycle

The current production widget saves personalization and emits stackfill:saved. Store the returned fill.id on your cart or order. Final print output should be generated later from your server using authenticated render or production workflow endpoints.

window.addEventListener("stackfill:saved", (event) => {
  const { embed_session, fill } = event.detail;
  cart.attach({
    stackfill_fill_id: fill.id,
    stackfill_template_id: fill.template_id,
    external_product_id: embed_session.external_product_id,
  });
});

Common errors

If the modal opens but cannot load a form, check the product mapping, publishable key, allowed origins, and template status.

If the save fails, show the shopper a retry action and keep the cart line item unpersonalized until a fill.id is returned.

See Create guest embed session and Widget events.