The Configurator is one script plus one HTML element. You do not install anything on your server to embed it. Everything below can be rehearsed in a sandbox before you go live.
The code
The console’s Embedding code category writes the snippet for you in the form you pick: plain HTML (four variants), WordPress, a WooCommerce SKU button, or a standalone link with a QR code. Its shape is:
<script type="module" src="https://cfg.cutoptim.com/embed/assets/latest/cutoptim-configurator.js"></script>
<cutoptim-configurator mode="inline" key="YOUR_PUBLISHABLE_KEY"
api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>The key, the service address and the language come from your console. A pop-up or side panel uses a button to open it:
<button data-cutoptim-open="#cut" data-material="MDF-18">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="YOUR_PUBLISHABLE_KEY"
api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>Modes and attributes
| Attribute | Meaning |
|---|---|
mode |
inline (default), modal (pop-up) or drawer (side panel) |
key |
your publishable key |
lang |
the customer-facing language |
material |
a board of your catalogue, by id or exact name; the flow then starts on the cut list |
thickness |
narrows material in millimetres; on its own it selects nothing |
template |
a furniture template to start from |
start |
catalog, cutlist or template |
project |
a saved project to load |
customer-token |
your own opaque reference to the logged-in customer, up to 128 characters |
width, height |
the size of the host box, as plain CSS lengths |
A pop-up or side panel loads nothing until it is first opened, so a product grid with many buttons stays light. Several Configurators on one page work independently. An attribute with an invalid value is dropped, never half-applied.
From script, the element offers open(), close(), setMaterial(), loadProject() and setCustomerToken(). It raises events on itself: cutoptim:ready, step, quote, order, project, error, open and close.
Standalone page, QR and iframe
The same Configurator can run as a page of its own: link to it, print the QR code for a shop counter or a kiosk, or send it to a customer. A page that cannot load a script can show that page in an iframe; only the domains you list may frame it, and messages between the frame and your page are accepted only from those domains.
Allowed domains
The publishable key works only from the domains listed for it. You list the domains of your shop, including any staging domain, when you create the key in the Keys & embedding category; a request from any other origin is refused.
Branding
Colours, corner radius, type, light or dark, and all customer-visible texts in ten languages are set in the console and apply without editing your page. The page can also style parts of the widget through CSS ::part selectors.
A pinned version, with integrity
By default the snippet loads the moving latest build. Where the service retains releases, the console can instead offer a pinned snippet: a specific numbered release with a integrity hash, so the browser refuses a file that has been changed. A stricter variant also pins the lazy-loaded parts. The releases are signed, a published release never changes, and an earlier release stays available so you can pin it for as long as you need. For a strict Content Security Policy, the console shows the directives to allow. Pinned snippets need the service to be keeping releases; until then the console offers only the moving snippet.
Saved projects
A customer can save a cut list and come back to it. The first save creates a private token that the browser keeps, so by default a project is available on that browser only. There is no sign-in-based sync across devices, and the customer cannot delete a saved project; unordered projects are cleared after your retention period.
Returning to your cart
When the customer orders, the Configurator raises the order event on your page. On the standalone page it can also send the customer back to your shop after a successful order: you set a return address (https only, on your own domain) and the customer sees a short confirmation with a Back to the shop button. The price must never be taken from the browser or from the return address: your server verifies the quote first. How, is on the orders page; a ready plug-in for WooCommerce is on its own page and the reference code for any other shop is on the custom platform page.