Integration demo
One script tag puts a style's 3D model on your page with its fabric, leather, finish and nail options. Your JavaScript sets the shopper's picks and reads the finished selection back. This page is a working example of both.
1 Embed it
Drop one tag where the viewer should appear. It sizes itself to your container.
<script src=".../embed.js"
data-style="002910bd"
data-api-key="YOUR-KEY" defer></script>
2 Drive it
Set the shopper's choices by option group and swatch title, at any time.
await CraftmasterEmbed.setOption('Body', 'Nomad-10');
await CraftmasterEmbed.reset();
3 Read it back
Get the active selection whenever it changes, with the grade on every swatch.
CraftmasterEmbed.on('change', ({ build }) => {
console.log(build.options); // group, selection, grade
});
Waiting for the viewer to report ready…
Option groups
setOption()
Loading the catalog…
The whole selection
setOptions() · reset()
Selected options
getBuild().options
| Group | Selection | Grade | Source |
|---|---|---|---|
| Waiting for the viewer… | |||
Live payload
getBuild()
// waiting for the first change event…
Build your tag
copy this into your page
Every control on this page goes through window.CraftmasterEmbed.
Nothing here reaches into the iframe, so anything that works here works from your own domain.
The sectional builder has its own demo:
the configurator embed →
