Aller au contenu
← Documentation

Premier Customizer

Créez votre premier customizer en 5 minutes

1Créer un Produit

Créez d'abord un produit dans votre dashboard ou via API:

import { LuneoClient } from '@luneo/sdk';

const client = new LuneoClient({
  apiKey: process.env.NEXT_PUBLIC_LUNEO_API_KEY
});

// Créer un produit personnalisable
const product = await client.products.create({
  name: 'T-Shirt Personnalisé',
  baseImage: '/images/tshirt-blanc.png',
  customizable: true
});

2Intégrer le Composant

Ajoutez le composant React dans votre page:

import { ProductCustomizer } from '@luneo/react';

export default function CustomizePage() {
  return (
    <ProductCustomizer
      productId="prod_xxx"
      productImage="/images/tshirt.png"
      productName="T-Shirt"
      onSave={(design) => {
        logger.info('Design saved:', design);
      }}
    />
  );
}

3Configuration Optionnelle

Personnalisez le comportement du customizer:

const config = {
  canvas: {
    width: 800,
    height: 1000,
    backgroundColor: '#ffffff'
  },
  tools: {
    text: true,
    images: true,
    cliparts: true,
    shapes: true
  },
  export: {
    formats: ['png', 'svg', 'pdf'],
    dpi: 300
  }
};

Résultat

Votre customizer est maintenant opérationnel ! Vos clients peuvent:

  • Ajouter du texte
  • Uploader des images
  • Choisir des cliparts
  • Exporter leur design