> ## Documentation Index
> Fetch the complete documentation index at: https://filecheck.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Presentation & Filecheck.mount

> Choose inline or dialog presentation, or use Filecheck.mount for zero-JS plugin integration.

## 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.

```js theme={null}
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.

```js theme={null}
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](/docs/concepts/3d-proofs) 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](/docs/server/verify-jobs).

### Show the proof in the product gallery

When the Workflow shows its proof on a [3D Scene](/docs/configuration/3d-scenes), `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.

```js theme={null}
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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.