Embed SDK

Add the TruCustom widget to any website with our JavaScript SDK.

Quick Start

Add the SDK script and a container element to your page:

<!-- Container for the customizer -->
<div id="customizer"
     data-pc-product-id="YOUR_PRODUCT_ID"
     data-pc-store-id="YOUR_STORE_ID">
</div>

<!-- Load the SDK -->
<script src="https://trucustom.net/sdk/product-customizer.js" data-pc-auto-init></script>

Installation Methods

1. Auto-Init (Recommended)

The SDK automatically initializes customizers based on data attributes:

<div data-pc-product-id="prod_123"
     data-pc-store-id="store_456"
     data-pc-mode="inline"
     data-pc-on-finalize="handleFinalize">
</div>

<script src="https://trucustom.net/sdk/product-customizer.js" data-pc-auto-init></script>

<script>
  ProductCustomizer.registerCallback('handleFinalize', function(data) {
    // Add to cart
    console.log('Design:', data.design);
    console.log('Preview:', data.previewUrl);
  });
</script>

2. JavaScript API

For more control, use the JavaScript API:

<div id="customizer"></div>
<script src="https://trucustom.net/sdk/product-customizer.js"></script>

<script>
  const instance = ProductCustomizer.init({
    container: '#customizer',
    storeId: 'store_456',
    productId: 'prod_123',
    mode: 'inline',
    templateId: 'tmpl_789',  // Optional: pre-load template
    variantId: 'var_abc',    // Optional: select variant
    sessionToken: 'token',   // Optional: resume session

    // Callbacks
    onReady: function(instance) {
      console.log('Customizer ready');
    },
    onDesignChange: function(data) {
      console.log('Design changed');
    },
    onFinalize: function(data) {
      addToCart(data.design, data.previewUrl);
    },
    onError: function(error) {
      console.error('Error:', error);
    },
    onClose: function() {
      console.log('Customizer closed');
    }
  });
</script>

3. Button Trigger (Modal)

Open the customizer in a modal when clicking a button:

<button data-pc-open
        data-pc-product-id="prod_123"
        data-pc-store-id="store_456"
        data-pc-mode="modal">
  Customize This Product
</button>

<script src="https://trucustom.net/sdk/product-customizer.js" data-pc-auto-init></script>

Configuration Options

Theming

Customize the look of the widget:

ProductCustomizer.init({
  // ... other options
  theme: {
    primaryColor: '#4f46e5',
    primaryHover: '#4338ca',
    fontFamily: 'Inter, sans-serif',
    borderRadius: '8px'
  }
});

Display Modes

Inline

Embed directly in your page layout:

<div id="customizer" style="width: 100%; height: 700px;"></div>
<script>
  ProductCustomizer.init({
    container: '#customizer',
    mode: 'inline',
    // ...
  });
</script>

Modal

Open in a centered modal overlay:

ProductCustomizer.open({
  mode: 'modal',
  productId: 'prod_123',
  storeId: 'store_456',
  onFinalize: function(data) {
    // Handle completion
    ProductCustomizer.close();
  }
});

Fullscreen

Take over the entire viewport:

ProductCustomizer.open({
  mode: 'fullscreen',
  // ...
});

JavaScript API

Methods

Events