Session Customization

Tailor the FaceSign verification experience to match your brand and user experience requirements. Customize colors, fonts, messaging, and UI behavior to create a seamless integration.

Overview

Session customization allows you to control various aspects of the verification interface to match your application's look and feel. Customizations are applied when creating a session and affect the entire user journey.

Customization Options

Branding

Customize the visual appearance to match your brand:

UI Controls

Control which UI elements are shown or hidden:

Messaging

Customize text and instructions shown to users:

Implementation

Include customization options when creating a session:

const session = await client.sessions.create({
  clientReferenceId: 'user-123',
  metadata: { userId: '123' },
  modules: [
    { type: 'identityVerification' },
    { type: 'documentAuthentication' }
  ],
  customization: {
    branding: {
      primaryColor: '#007bff',
      secondaryColor: '#6c757d',
      logoUrl: 'https://your-domain.com/logo.png',
      backgroundColor: '#ffffff',
      textColor: '#333333'
    },
    ui: {
      showProgressBar: true,
      showSkipButton: false,
      showHelpButton: true,
      allowCameraSwitch: true,
      showTorchButton: true
    },
    messaging: {
      welcomeMessage: 'Welcome to our secure verification process',
      completionMessage: 'Verification completed successfully!',
      errorMessages: {
        cameraPermission: 'Please allow camera access to continue',
        networkError: 'Connection error. Please check your internet.'
      }
    }
  }
})

Advanced Customization

Custom CSS

For advanced styling, you can inject custom CSS:

customization: {
  css: `
    .facesign-container {
      font-family: 'Your Custom Font', sans-serif;
      border-radius: 12px;
    }
    .facesign-button {
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
  `
}

Responsive Design

Customize appearance for different screen sizes:

customization: {
  responsive: {
    mobile: {
      fontSize: '14px',
      padding: '16px'
    },
    desktop: {
      fontSize: '16px',
      padding: '24px'
    }
  }
}

Best Practices

• Test customizations on different devices and browsers
• Ensure sufficient color contrast for accessibility
• Keep custom messages clear and actionable
• Use high-quality logos and images
• Consider your brand guidelines when choosing colors
• Test with users to ensure the customized experience is intuitive

Examples

Minimal Branding

customization: {
  branding: {
    primaryColor: '#2563eb',
    logoUrl: 'https://example.com/logo.svg'
  }
}

Full Customization

customization: {
  branding: {
    primaryColor: '#059669',
    secondaryColor: '#d1fae5',
    logoUrl: 'https://example.com/logo.svg',
    backgroundColor: '#f9fafb',
    textColor: '#111827'
  },
  ui: {
    showProgressBar: true,
    showHelpButton: true,
    allowCameraSwitch: true
  },
  messaging: {
    welcomeMessage: 'Let\'s verify your identity securely',
    completionMessage: 'All set! Your identity has been verified.'
  }
}