Boards › Sheet materials › Chipboard 18 mm, white

Chipboard 18 mm, white

18 mm thick · full sheet 2800 × 2070 mm · cut to your sizes, priced live

Sold by Demo Panel Shop. Enter your part sizes, see the cutting plan and the price, and add the cut to the cart — four ways to put that on a product page. The tab marked your setting is how Demo Panel Shop's configurator embeds by default (console → Keys & embedding); a page can always choose another with the mode attribute.

Inline — a section of the product page, the board already selected. The cart listens for cutoptim:order.

Copy-paste: inline

<!-- release 0.2.1-65344b23f244, pinned: integrity = the browser refuses a changed byte (manifest: https://cfg.cutoptim.com/embed/assets/0.2.1-65344b23f244/manifest.json).
     Always the newest instead (no integrity, its bytes change): https://cfg.cutoptim.com/embed/assets/latest/cutoptim-configurator.js -->
<script type="module" src="https://cfg.cutoptim.com/embed/assets/0.2.1-65344b23f244/cutoptim-configurator.js" integrity="sha384-SlRiJthzUDKlLz8VAAQXiSvHUY90UFKOwgryvcw0B1JsbKwAkJerjYKWCqsLXULb" crossorigin="anonymous"></script>

<cutoptim-configurator mode="inline" key="pk_test_PUHg_STjpKQQePUQjmlU3aPgzaOwKnTQ" api="https://cfg.cutoptim.com" lang="hu" material="mfc-18-white">
</cutoptim-configurator>

<script>
  document.addEventListener('cutoptim:order', (e) => {
    // e.detail.orderId, e.detail.order (the signed order.v1) → your cart
  });
</script>

Pop-up — a launcher button opens the configurator in a modal dialog with this board preselected.

Copy-paste: pop-up

<!-- release 0.2.1-65344b23f244, pinned: integrity = the browser refuses a changed byte (manifest: https://cfg.cutoptim.com/embed/assets/0.2.1-65344b23f244/manifest.json).
     Always the newest instead (no integrity, its bytes change): https://cfg.cutoptim.com/embed/assets/latest/cutoptim-configurator.js -->
<script type="module" src="https://cfg.cutoptim.com/embed/assets/0.2.1-65344b23f244/cutoptim-configurator.js" integrity="sha384-SlRiJthzUDKlLz8VAAQXiSvHUY90UFKOwgryvcw0B1JsbKwAkJerjYKWCqsLXULb" crossorigin="anonymous"></script>

<button data-cutoptim-open="#cut" data-material="mfc-18-white">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="pk_test_PUHg_STjpKQQePUQjmlU3aPgzaOwKnTQ" api="https://cfg.cutoptim.com" lang="hu">
</cutoptim-configurator>

Drawer — the same, as a panel that slides in from the side; the product page stays visible behind it.

Copy-paste: drawer

<!-- release 0.2.1-65344b23f244, pinned: integrity = the browser refuses a changed byte (manifest: https://cfg.cutoptim.com/embed/assets/0.2.1-65344b23f244/manifest.json).
     Always the newest instead (no integrity, its bytes change): https://cfg.cutoptim.com/embed/assets/latest/cutoptim-configurator.js -->
<script type="module" src="https://cfg.cutoptim.com/embed/assets/0.2.1-65344b23f244/cutoptim-configurator.js" integrity="sha384-SlRiJthzUDKlLz8VAAQXiSvHUY90UFKOwgryvcw0B1JsbKwAkJerjYKWCqsLXULb" crossorigin="anonymous"></script>

<button data-cutoptim-open="#cut" data-material="mfc-18-white">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="drawer" key="pk_test_PUHg_STjpKQQePUQjmlU3aPgzaOwKnTQ" api="https://cfg.cutoptim.com" lang="hu">
</cutoptim-configurator>

Separate page — a link to the configurator's own page (also usable from an e-mail, a QR code or a kiosk). After the order it shows the confirmation, then sends the customer back to the shop's cart with the order reference (the shop's Return to shop URL; here it returns to this demo cart).

Open the configurator page

Copy-paste: separate page

<!-- a link (also for an e-mail, a QR code, a menu entry) -->
<a href="https://cfg.cutoptim.com/embed/sbx-12c05f17?key=pk_test_PUHg_STjpKQQePUQjmlU3aPgzaOwKnTQ&lang=hu">Configure your cut</a>

<!-- or a launcher button: with the shop setting "Separate page" it opens the same page -->
<!-- release 0.2.1-65344b23f244, pinned: integrity = the browser refuses a changed byte (manifest: https://cfg.cutoptim.com/embed/assets/0.2.1-65344b23f244/manifest.json).
     Always the newest instead (no integrity, its bytes change): https://cfg.cutoptim.com/embed/assets/latest/cutoptim-configurator.js -->
<script type="module" src="https://cfg.cutoptim.com/embed/assets/0.2.1-65344b23f244/cutoptim-configurator.js" integrity="sha384-SlRiJthzUDKlLz8VAAQXiSvHUY90UFKOwgryvcw0B1JsbKwAkJerjYKWCqsLXULb" crossorigin="anonymous"></script>
<button data-cutoptim-open data-key="pk_test_PUHg_STjpKQQePUQjmlU3aPgzaOwKnTQ" data-api="https://cfg.cutoptim.com">Configure your cut</button>

<!-- Console → Keys & embedding → "Return to shop URL", e.g.
     https://your-shop.example/cart?cutoptim={orderId}&total={total}&currency={currency}
     After a successful order the page shows the confirmation, then sends the customer there. -->

Your cart

Your cart is empty. Configure a cut in any of the four tabs and add it to the cart.

What the shop receives

Inline, pop-up, drawer: a cutoptim:order event on the page with the order id and the signed order document (cut list, plan, price, quote token).
Separate page: a redirect to the shop's return URL with {orderId}, {quoteId}, {total}, {currency} filled in.
Neither proves anything by itself. Before charging, the shop's server checks the quote with its secret key:

Server-side check

# The redirect (or a browser event) proves NOTHING on its own. Before you charge:
curl -X POST https://cfg.cutoptim.com/cfg/v1/quote/verify \
  -H "Authorization: Bearer cfg_sk_…your secret key…" \
  -H "Content-Type: application/json" \
  -d '{"quoteToken":"<e.detail.order.quote.quoteToken>"}'