Scellio
PricingDocumentationSDKsFAQContact
Sign inFree trial
Developer Documentation

Scell.io Onboarding Web Component

Embed a fully compliant company verification and e-invoicing onboarding flow in your application with just one line of code. SIREN validation, VAT verification, and legal representative confirmation included.

Get StartedAPI Reference
Install in 30 seconds
index.html
html
<script src="https://cdn.scell.io/widget/v1/onboarding.js"></script>
<scell-onboarding
  publishable-key="pk_test_xxxx"
  environment="sandbox"
></scell-onboarding>

Quick Start

Sandbox Mode Available: Use your own test publishable key pk_test_* (from your dashboard) to test the component in sandbox mode. Test data is not persisted.

The Scell.io onboarding component handles the entire company verification flow: SIREN/SIRET lookup, VAT number validation, address verification, and legal representative confirmation.

Step 1: Include the script

html
<script src="https://cdn.scell.io/widget/v1/onboarding.js"></script>

Step 2: Add the component

html
<scell-onboarding
  api-key="pk_live_your_api_key"
  environment="production"
  theme="auto"
  locale="fr"
></scell-onboarding>

Step 3: Handle events

javascript
document.querySelector('scell-onboarding')
  .addEventListener('onboarding:completed', (e) => {
    console.log('Company verified:', e.detail.company_id);
    // Redirect to dashboard or update UI
  });

Live Demo

This demo uses a test publishable key. Create your account to get your own pk_test_* key and test the widget with your data.

Test the Scell.io Onboarding component directly below. This widget allows your users to verify their company (SIREN, VAT, legal representative) and complete their registration.

This widget runs in sandbox mode. To integrate it, see the Quick Start guide above.

API Reference

Attributes

Configure the component behavior using HTML attributes.

AttributeTypeRequiredDescription
publishable-keystringYesYour publishable key (pk_live_xxx or pk_test_xxx)
environment"sandbox" | "production"NoEnvironment. Default: "sandbox"
external-idstringNoYour internal identifier for this sub-tenant (link with your system)
callback-urlstringNoURL to redirect after onboarding completion
theme"light" | "dark" | "auto"NoColor theme. Default: "light"
locale"fr" | "en"NoWidget language. Default: "fr"
widthstringNoWidget width. Default: "100%"
heightstringNoWidget height. Default: "600px"

Events

Listen to component events to react to user actions and state changes.

EventPayloadDescription
onboarding:started{ sessionId: string }Onboarding session has been initialized
onboarding:step{ step: string, progress: number }User navigated to a new step (siret, verify, documents, complete)
onboarding:siret-verified{ companyName: string, siret: string }SIRET has been successfully verified
onboarding:documents-uploaded{ count: number }KYB documents have been uploaded
onboarding:completed{ authorizationCode: string, externalId?: string }Onboarding completed — exchange the code via POST /onboarding/exchange
onboarding:error{ code: string, message: string }An error occurred during onboarding

Integration Modes

Choose the integration method that best fits your architecture.

Recommended

Web Component

Embed directly in your frontend. Best for SPAs and modern web apps.

  • Fastest integration
  • Full customization
  • Real-time events
  • Works everywhere
Simple

Redirect Flow

Redirect users to Scell.io hosted page. Best for server-rendered apps.

  • No frontend code
  • Hosted by Scell.io
  • OAuth-style flow
  • PCI compliant
Advanced

API Only

Build your own UI. Full control over the verification flow.

  • Complete control
  • Custom UX
  • Backend-first
  • White label

API REST Example

javascript
// Create onboarding session via API
const response = await fetch('https://api.scell.io/api/v1/onboarding/sessions', {
  method: 'POST',
  headers: {
    'X-API-Key': 'sk_live_xxxx',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    company_id: 'comp_xxxx',
    redirect_url: 'https://yourapp.com/callback',
    webhook_url: 'https://yourapp.com/webhooks/scell',
    metadata: {
      user_id: 'user_123',
      plan: 'enterprise'
    }
  })
});
const { session_id, session_url, expires_at } = await response.json();
// Redirect user to session_url or embed Web Component with session_id

Redirect Flow Example

javascript
// 1. Create session on your backend
const session = await scellApi.createOnboardingSession({
  company_id: companyId,
  redirect_url: 'https://yourapp.com/onboarding/callback',
  success_url: 'https://yourapp.com/dashboard?verified=true',
  cancel_url: 'https://yourapp.com/dashboard?verified=false'
});
// 2. Redirect user to Scell.io hosted page
window.location.href = session.session_url;
// 3. Handle callback on your redirect URL
// Query params: ?session_id=xxx&status=completed&signature=xxx

Framework Examples

Copy-paste examples for popular frameworks.

ScellOnboarding.tsx
tsx
import { useEffect, useRef } from 'react';
// Declare the custom element type
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'scell-onboarding': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          'api-key'?: string;
          'mode'?: 'sandbox' | 'production';
          'company-id'?: string;
          'redirect-url'?: string;
          'theme'?: 'light' | 'dark' | 'auto';
          'locale'?: string;
        },
        HTMLElement
      >;
    }
  }
}
export function ScellOnboarding({ apiKey, companyId, onComplete, onError }) {
  const ref = useRef<HTMLElement>(null);
  useEffect(() => {
    // Load the Web Component script
    const script = document.createElement('script');
    script.src = 'https://cdn.scell.io/widget/v1/onboarding.js';
    script.async = true;
    document.head.appendChild(script);
    return () => {
      document.head.removeChild(script);
    };
  }, []);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const handleComplete = (e: CustomEvent) => onComplete?.(e.detail);
    const handleError = (e: CustomEvent) => onError?.(e.detail);
    el.addEventListener('onboarding:completed', handleComplete);
    el.addEventListener('onboarding:error', handleError);
    return () => {
      el.removeEventListener('onboarding:completed', handleComplete);
      el.removeEventListener('onboarding:error', handleError);
    };
  }, [onComplete, onError]);
  return (
    <scell-onboarding
      ref={ref}
      api-key={apiKey}
      company-id={companyId}
      environment="production"
      theme="auto"
    />
  );
}

Webhooks

Receive real-time notifications when onboarding events occur. Configure your webhook URL in the dashboard.

Security: Always verify the webhook signature using the secret key from your dashboard. The signature is included in the x-scell-signature header.

Example Webhook Payload

onboarding.completed
json
// Example webhook payload for onboarding.completed
{
  "event": "onboarding.completed",
  "created_at": "2024-01-15T10:30:00Z",
  "data": {
    "session_id": "sess_xxxx",
    "company_id": "comp_xxxx",
    "status": "verified",
    "verification": {
      "siren_verified": true,
      "vat_verified": true,
      "address_verified": true,
      "legal_rep_verified": true
    },
    "company": {
      "name": "ACME Corporation",
      "siren": "123456789",
      "vat_number": "FR12345678901",
      "address": {
        "street": "123 Rue de Paris",
        "city": "Paris",
        "postal_code": "75001",
        "country": "FR"
      }
    }
  },
  "signature": "sha256=xxxxx"
}

Available Webhook Events

EventDescription
onboarding.startedUser started the onboarding flow
onboarding.step_completedUser completed a verification step
onboarding.completedAll verification steps completed successfully
onboarding.failedVerification failed (invalid data, timeout, etc.)
onboarding.cancelledUser cancelled the onboarding

Ready to integrate?

Create your account and get your API keys in minutes. Start with 100 free credits.

Get API KeysContact Sales