Developer Documentation
Everything you need to integrate our 3D configurator
Quick Start Guide
1. Include the Script
Add our web component script to your HTML:
<!-- Add to your HTML <head> -->
<link rel="modulepreload" crossorigin="anonymous"
href="https://configuratorwebcomponent.netlify.app/assets/preload-helper.D3MTsGSl.js">
<script type="module" crossorigin="anonymous"
src="https://configuratorwebcomponent.netlify.app/assets/main.js"></script>2. Add the Component
Place the configurator component where you want it to appear:
<product-configurator
data-layout="classic"
data-mobile-layout="mobile-bottom-nav"
data-theme="light"
data-tenant-secret="your-tenant-secret"
></product-configurator>3. Configure Your Options
Customize the configurator to match your needs using data attributes.
Component Attributes
data-layout
Controls the overall layout of the configurator
Type: string
Options: "classic", "modern", "minimal"
Default: "classic"
data-mobile-layout
Layout for mobile devices
Type: string
Options: "mobile-bottom-nav", "mobile-side-nav", "mobile-overlay"
Default: "mobile-bottom-nav"
data-theme
Color theme of the configurator
Type: string
Options: "light", "dark", "ocean", "sunset", "forest", "royal", "red"
Default: "light"
data-tenant-secret
Your unique API key (required)
Type: string (UUID)
Required: Yes
data-product-id
Specific product to display (optional)
Type: string
JavaScript API
Accessing the Configurator
Get a reference to the configurator element:
const configurator = document.querySelector('product-configurator');Changing Theme Programmatically
// Change theme
configurator.setAttribute('data-theme', 'dark');
// Or use the method (if available)
configurator.setTheme('ocean');Listening to Events
// Listen for configuration changes
configurator.addEventListener('configuration-changed', (event) => {
console.log('New configuration:', event.detail);
});
// Listen for add to cart
configurator.addEventListener('add-to-cart', (event) => {
console.log('Added to cart:', event.detail);
// Integrate with your e-commerce system
});Getting Current Configuration
// Get current product configuration
const config = configurator.getConfiguration();
console.log(config);
// Returns:
// {
// productId: "abc123",
// selectedOptions: {
// color: "red",
// size: "large",
// material: "wood"
// },
// price: 299.99
// }Framework Integration
React / Next.js
import { useEffect, useRef } from 'react';
function ProductPage() {
const configuratorRef = useRef(null);
useEffect(() => {
const configurator = configuratorRef.current;
const handleAddToCart = (event) => {
console.log('Add to cart:', event.detail);
// Your cart logic here
};
configurator?.addEventListener('add-to-cart', handleAddToCart);
return () => {
configurator?.removeEventListener('add-to-cart', handleAddToCart);
};
}, []);
return (
<product-configurator
ref={configuratorRef}
data-layout="classic"
data-theme="light"
data-tenant-secret="your-secret"
/>
);
}Vue.js / Nuxt
<template>
<product-configurator
ref="configurator"
data-layout="classic"
data-theme="light"
data-tenant-secret="your-secret"
@add-to-cart="handleAddToCart"
/>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const configurator = ref(null);
const handleAddToCart = (event) => {
console.log('Add to cart:', event.detail);
};
onMounted(() => {
// Additional setup if needed
});
</script>Vanilla JavaScript
<product-configurator
id="myConfigurator"
data-layout="classic"
data-theme="light"
data-tenant-secret="your-secret"
></product-configurator>
<script>
const configurator = document.getElementById('myConfigurator');
configurator.addEventListener('add-to-cart', (event) => {
console.log('Add to cart:', event.detail);
// Add to your shopping cart
});
</script>