Skip to content
Duor

The widget in five minutes

Paste two lines. The catalogue, the 3D and the AR button come with them.

<script src="https://app.duor.digital/sdk/v1.js"></script>
<div id="cfg"></div>
<script>
  DuorEmbed.createConfigurator('demo-kitchen', document.getElementById('cfg'), {
    origin: 'https://app.duor.digital',
    apiKey: 'pk_test_demo',
    locale: 'en',
  });
</script>

That key is the shared sandbox. It serves a demo catalogue, it is not billed, and it needs no account — see the sandbox. Your own key is on the Embedding screen of the cabinet, already substituted into the snippet.

What the three arguments are

Section titled “What the three arguments are”
'demo-kitchen' the catalogue slug — one shop can publish several
the element where it mounts. Give it a height, or the widget takes 640px
options origin and apiKey are required; everything else has a default

If you have a build step

Section titled “If you have a build step”
Terminal window
npm i @duordigital/embed
import { useDuorConfigurator } from '@duordigital/embed/react';


function Kitchen() {
  const { ref, configurator } = useDuorConfigurator('demo-kitchen', {
    origin: 'https://app.duor.digital',
    apiKey: 'pk_test_demo',
    locale: 'en',
  });


  useEffect(
    () => configurator?.on('lead', (lead) => analytics.track('lead', lead)),
    [configurator],
  );


  return <div ref={ref} />;
}

If your site builder will not run scripts

Section titled “If your site builder will not run scripts”

Tilda, Wix, Squarespace and most shop themes will take an iframe:

<iframe
  src="https://app.duor.digital/embed?catalog=demo-kitchen&key=pk_test_demo&locale=en"
  style="width:100%;height:640px;border:0"
  allow="xr-spatial-tracking; camera"
></iframe>

allow is not optional. Without xr-spatial-tracking the Android AR button is there and does nothing, which is worse than not offering it — the iframe is refused the permission and the failure happens in the visitor’s hands.

Then what

Section titled “Then what”