Integration demo
One script tag puts the builder on your page. Your JavaScript sets the options and reads the finished configuration back. This page is a working example of both.
1 Embed it
Drop one tag where the builder should appear. Nothing else to install.
<script src=".../embed.js"
data-style="f9-sect"
data-api-key="YOUR-KEY"
data-embed-mode="builder" defer></script>
2 Drive it
Set the customer's choices from your own controls, at any time.
await CraftmasterEmbed.setOptions({ arm: '2' });
await CraftmasterEmbed.setFabric('body', 'Nomad-10');
3 Read it back
Get the active build whenever it changes, as SKUs, quantities and fabrics.
CraftmasterEmbed.on('change', ({ build }) => {
console.log(build.lines); // style numbers, qty, fabrics
});
Waiting for the builder to report ready…
Design options
setOptions()
Add pieces
addPiece()
Edit the build
removePiece() · setPower()
Order lines
getBuild().lines
| Style number | Piece | Qty | Positions |
|---|---|---|---|
| Nothing placed yet. | |||
Live payload
getBuild()
// waiting for the first change event…
Build your tag
copy this into your page
