A website product configurator you embed with one line of code
The CutOptim Configurator is a website product configurator for sheet material that runs inside your own shop pages. You paste one script tag and one element; the configurator opens on the page, as a pop-up, as a side panel or as its own page, and hands the order back to your shop.
Four ways to open it
Choose how the configurator appears; the same code serves all four, and the shop setting decides the default.
- — On the page (inline): the configurator is part of the product page.
- — Pop-up (modal): a button such as "Cut this board to size" opens it over the page.
- — Side panel (drawer): it slides in from the side and keeps the product page in view.
- — Its own page: a full-page configurator that returns the customer to your cart when they order.
Four ways to show it in your shop
The same line of code — pick how it opens.
One script and one element
The configurator is a web component: one script tag loads it, and a <cutoptim-configurator> element with your publishable key places it. A button with data-cutoptim-open opens a pop-up or side panel, and can preselect the board of the product page the customer is on.
<script type="module" src="https://cfg.cutoptim.com/embed/assets/cutoptim-configurator.js"></script>
<button data-cutoptim-open="#cut">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="pk_your_publishable_key" lang="en">
</cutoptim-configurator>Your brand, your texts
Colours, fonts, corners and the light or dark theme follow your brand. Named ::part anchors let your own stylesheet adjust buttons, cards and fields, and every customer-facing text can be changed per language. The configurator runs in its own isolated layer, so your page styles do not break it and it does not break your page.
The order comes back to your shop
When the customer orders, the page receives a cutoptim:order event with the order and its signed quote, so your shop can put it in the cart. Your server can check the signature at /cfg/v1/quote/verify before it accepts the price. In the own-page mode the customer is sent back to your cart with the order.
Safe by default
Your key only works on the web addresses you list, so another site cannot embed your configurator with your prices. Prices are computed and signed on our side, never in the browser.
Before you embed it, open the demo shop: it shows the exact code for each of the four ways to open the configurator.
Frequently asked questions
How do I add the configurator to my website?
Does it work with my shop platform?
Can I make it look like my shop?
Will it slow my product page down?
Can someone else embed my configurator?
More about the configurator
The cut-to-size product configurator for your webshop — live cutting plan, live price, orders into your shop.
Enter parts in a demo shop and watch the cutting plan and price update as you type.
Per sheet, per m², per metre of cut, edge banding, machining, VAT and minimums — your prices, live.
Verify the signed quote and the signed webhook on your own server, with Node and PHP examples.
Start from a cabinet, shelf or wardrobe: the parts, the plan and the price follow the size.
Board merchants, panel cutters and sheet-material shops: customers order online, with a live plan and your prices.
A cut to size button on your WooCommerce products; only a verified quote becomes a cart line.
Embed, verify on your server, receive the signed webhook: three steps.
Only need the cutting engine? See the Engine API
LegalConfigurator terms ·Data processing agreement ·Shopper privacy notice ·Third-party licences