Skip to main content

​
Overview

The SuperSeeded Embed Script provides a complete, ready-to-use upload widget that you can add to your platform with minimal code. It handles the entire upload flow including the UI, resumable uploads, and event callbacks.

Drop-in Integration

Single script tag with zero build dependencies

Resumable Uploads

Built for reliable large file uploads

Customizable

Theming, headless mode, and CSS variables

Event-Driven

Lifecycle callbacks for complete control

​
Quick Start

Add the script to your page and initialize the widget: 
<script src="https://cdn.superseeded.ai/embed.min.js"></script>
<div id="superseeded-upload"></div>
<script>
  SuperSeed.init({
    container: '#superseeded-upload',
    tokenEndpoint: '/api/get-upload-token',
    onComplete: (result) => {
      console.log('Upload complete:', result);
    }
  });
</script>
Your backend must implement the token endpoint to call our delegate-upload API. The widget fetches a fresh token before each upload.

​
Configuration Options

OptionTypeDefaultDescription
containerstringRequiredCSS selector for the widget container
tokenEndpointstringRequiredYour backend endpoint that returns { token: "..." }
allowedFileTypesstring[]['.csv', '.xlsx', '.xls']Accepted file extensions
maxFileSizenumber104857600Maximum file size in bytes (default: 100MB)
themestring'light''light' or 'dark'
headlessbooleanfalseDisable built-in UI for custom implementations
autoProceedbooleantrueStart upload immediately after file selection
chunkSizenumber5242880TUS chunk size in bytes (default: 5MB)
retryDelaysnumber[][0, 1000, 3000, 5000]Retry timing after upload failures
onTokenReceivedfunction-Callback when delegation token is received (store for processing call)

​
Events

Subscribe to upload lifecycle events through callback options: 
SuperSeed.init({
  container: '#superseeded-upload',
  tokenEndpoint: '/api/get-upload-token',
  
  onFileAdded: (file) => {
    console.log('File selected:', file.name);
  },
  
  onProgress: (progress) => {
    console.log(`Upload progress: ${progress.percentage}%`);
  },
  
  onComplete: (result) => {
    console.log('Upload complete:', result.uploadId);
    console.log('File URL:', result.fileUrl);
    // Call the verify-pot-sizes endpoint with the file URL to process and get enriched data
  },
  
  onError: (error) => {
    console.error('Upload failed:', error.message);
  }
});

​
Event Reference

EventPayloadDescription
onFileAdded{ name, size, type }File selected by user
onProgress{ percentage, bytesUploaded, bytesTotal }Upload progress updates
onComplete{ uploadId, fileName, fileUrl }Upload finished successfully. Use fileUrl to call /v1/verify-pot-sizes
onError{ message, code }Upload failed
onRetry{ attempt, maxAttempts }Retry attempt started
onTokenReceivedstringDelegation token received (store for processing call)

​
Headless Mode

For complete UI control, enable headless mode and build your own interface: 
<script src="https://cdn.superseeded.ai/embed.min.js"></script>
<input type="file" id="file-input" accept=".csv,.xlsx,.xls" />
<div id="progress"></div>

<script>
  const uploader = SuperSeed.init({
    container: '#superseeded-upload',
    tokenEndpoint: '/api/get-upload-token',
    headless: true,
    
    onProgress: ({ percentage }) => {
      document.getElementById('progress').textContent = `${percentage}%`;
    },
    
    onComplete: (result) => {
      document.getElementById('progress').textContent = 'Complete!';
      // result.fileUrl contains the uploaded file URL
      // Call /v1/verify-pot-sizes to process and get enriched data
    }
  });

  document.getElementById('file-input').addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (file) {
      uploader.upload(file);
    }
  });
</script>

​
Headless API

MethodDescription
uploader.upload(file)Start upload for a File object
uploader.pause()Pause the current upload
uploader.resume()Resume a paused upload
uploader.cancel()Cancel and reset the upload

​
Theming

​
Built-in Themes

SuperSeed.init({
  container: '#superseeded-upload',
  tokenEndpoint: '/api/get-upload-token',
  theme: 'dark' // or 'light'
});

​
CSS Variables

Override the default styling with CSS custom properties: 
#superseeded-upload {
  --superseeded-primary: #F69AC0;
  --superseeded-primary-hover: #F881AE;
  --superseeded-background: #ffffff;
  --superseeded-surface: #f5f5f5;
  --superseeded-text: #1a1a1a;
  --superseeded-text-muted: #666666;
  --superseeded-border: #e0e0e0;
  --superseeded-border-radius: 8px;
  --superseeded-font-family: system-ui, sans-serif;
}

​
Dark Theme Variables

#superseeded-upload {
  --superseeded-background: #1a1a1a;
  --superseeded-surface: #2a2a2a;
  --superseeded-text: #ffffff;
  --superseeded-text-muted: #999999;
  --superseeded-border: #3a3a3a;
}

​
Backend Setup

The embed script requires your backend to provide an upload token endpoint. This endpoint calls the SuperSeeded delegate-upload API and returns the token to the frontend.

​
Example Token Endpoint

// Express.js example
app.post('/api/get-upload-token', async (req, res) => {
  const { merchant_id } = req.body;
  
  const response = await fetch('https://api.superseeded.ai/v1/auth/delegate-upload', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.SUPERSEED_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ merchant_id })
  });
  
  const data = await response.json();
  res.json({ token: data.token });
});
Never expose your Platform API key to the frontend. The token endpoint must be a server-side route that securely calls our API.

​
Versioning

For production stability, pin to a specific version: 
<!-- Latest (auto-updates) -->
<script src="https://cdn.superseeded.ai/embed.min.js"></script>

<!-- Version-pinned -->
<script src="https://cdn.superseeded.ai/v1/embed.min.js"></script>

​
Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>Upload Documents</title>
  <style>
    #superseeded-upload {
      --superseeded-primary: #4f46e5;
      max-width: 500px;
      margin: 2rem auto;
    }
  </style>
</head>
<body>
  <h1>Upload Your Price List</h1>
  <div id="superseeded-upload"></div>
  
  <script src="https://cdn.superseeded.ai/embed.min.js"></script>
  <script>
    // Store the delegation token for use after upload
    let delegationToken = null;
    
    SuperSeed.init({
      container: '#superseeded-upload',
      tokenEndpoint: '/api/get-upload-token',
      theme: 'light',
      allowedFileTypes: ['.csv', '.xlsx'],
      maxFileSize: 50 * 1024 * 1024, // 50MB
      
      onTokenReceived: (token) => {
        // Store the token for processing call
        delegationToken = token;
      },
      
      onComplete: async (result) => {
        // Call verify-pot-sizes with the file URL to process and get enriched data
        const response = await fetch('https://api.superseeded.ai/v1/verify-pot-sizes', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${delegationToken}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ file_url: result.fileUrl })
        });
        
        const data = await response.json();
        console.log('Enriched data:', data.enriched_data);
        alert('File processed successfully!');
      },
      
      onError: (error) => {
        alert('Upload failed: ' + error.message);
      }
    });
  </script>
</body>
</html>