React, Vue and plain HTML

React

import { Configurator } from '@duor/embed';

export function KitchenPage() {
  return (
    <Configurator
      catalog="kitchen-terra"
      publicKey={import.meta.env.VITE_DUOR_KEY}
      locale="en"
      style={{ height: 640 }}
      onLead={(lead) => crm.createLead(lead)}
    />
  );
}

The component cleans up after itself on unmount. Mounting two on one page is fine; each keeps its own scene.

Vue

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';

const el = ref(null);
let cfg;

onMounted(() => {
  cfg = DuorEmbed.createConfigurator('kitchen-terra', el.value, {
    publicKey: import.meta.env.VITE_DUOR_KEY,
  });
});
onBeforeUnmount(() => cfg?.destroy());
</script>

<template><div ref="el" style="height: 640px" /></template>

Anything else

<div id="cfg" style="height:640px"></div>
<script src="https://cdn.duor.io/sdk/v1.js"></script>
<script>
  DuorEmbed.createConfigurator('kitchen-terra', document.getElementById('cfg'), {
    publicKey: 'pk_live_…',
  });
</script>

Making it look like yours

Two options change the widget’s appearance, and deliberately only two:

{ accent: '#1f6feb', font: 'Inter' }

accent repaints every call to action; font swaps the interface face. The dimensions stay in a monospace face whatever you pass, because 1 and 7 in a proportional face at 11px is a guess, and these are millimetres somebody will cut wood by.

There is no stylesheet override and there will not be one: a widget whose internals a host can restyle is a widget that breaks on the host’s next deploy, and the support ticket comes to us.