Presentation & Filecheck.mount

Inline vs dialog

inline (default): the widget renders in the page flow where you mount it.
dialog: the widget opens behind a trigger button. Call intake.focus() to open it programmatically.

const intake = fc.elements.create('intake', {
  workflowId: 'wf_…',
  presentation: 'dialog'
});
intake.mount('#fc-slot');

Filecheck.mount (zero-JS integration)

For plugins where all configuration is known server-side, Filecheck.mount handles mounting, cart-button gating, the proof gallery, and optional CSS/JS injection in a single call. It returns the intake element so you can attach listeners.

function whenReady(cb, timeout = 10000) {
  const start = Date.now();
  (function tick() {
    if (window.Filecheck && window.Filecheck.mount) return cb();
    if (Date.now() - start > timeout) return;
    setTimeout(tick, 50);
  })();
}

whenReady(() => {
  const el = window.Filecheck.mount({
    publishableKey: 'pk_live_…',
    workflowId:     'wf_…',
    presentation:   'inline',       // or 'dialog'
    mountSelector:  '#fc-slot',     // fallback if #fc-inline is absent
    connectorId:    'cntr_…',       // optional, fetched server-side
    cartButtonSelector: '.my-btn',  // optional extra cart selector
  });

  if (el) {
    el.on('status', (e) => {
      document.getElementById('fc_job_id').value = e.jobId || '';
    });
  }
});

What Filecheck.mount handles for you

Resolves the mount target (#fc-inline → mountSelector → next to the cart button).
Creates and positions the dialog trigger button when presentation: 'dialog'.
Gates all cart buttons matching the built-in selectors plus cartButtonSelector on canProceed.
Wires the built-in proof gallery (no host code required).
Injects optional customCss / customJs.
Shows the 3D Proof in the product gallery when galleryProof is on.

The only thing left to you is platform-specific work, such as writing jobId into a hidden field for server-side verification.

Show the proof in the product gallery

When the Workflow shows its proof on a 3D Scene, Filecheck.mount can put that proof in place of the product’s photo gallery once every uploaded file has its proof. The photos come back if a file is removed or replaced. Approval stays in the proof popup.

window.Filecheck.mount({
  publishableKey: 'pk_live_…',
  workflowId:     'wf_…',
  galleryProof:    true,                 // off by default
  gallerySelector: '.product-gallery',   // optional
});

Option	Type	Description
`galleryProof`	`boolean`	Show the 3D Proof in the product gallery. Default `false`. The store plugins set it from Settings → Element → 3D Proof in Product Gallery.
`gallerySelector`	`string`	CSS selector of the gallery’s container. Only needed when the built-in selectors for Shopify, WooCommerce, PrestaShop, OpenCart and Magento themes miss your theme.

If no gallery is found on the page, nothing changes: the proof is still in the popup.

The Element

Store plugins

Custom integrations

Official libraries

Server-side

Reference

Presentation & Filecheck.mount

Inline vs dialog

Filecheck.mount (zero-JS integration)

What Filecheck.mount handles for you

Show the proof in the product gallery

​Inline vs dialog

​Filecheck.mount (zero-JS integration)

​What Filecheck.mount handles for you

​Show the proof in the product gallery

Inline vs dialog

Filecheck.mount (zero-JS integration)

What Filecheck.mount handles for you

Show the proof in the product gallery