Agent IFrame SDK Integration

Integrate Video agent portal using IFrame WebSDK for seamless agent interactions

Overview

The Agent IFrame SDK Integration allows you to embed the Video agent portal directly into your existing web application using an iframe. This enables agents to conduct Video sessions without leaving your application, providing a seamless user experience.

Key Features

Seamless Integration: Embed agent portal directly into your application
Real-time Communication: Live video and audio communication capabilities
Document Verification: Built-in document capture and verification tools
Session Management: Complete session lifecycle management
Customizable UI: Adapt to your application's design and branding

Basic Implementation

IFrame Code Structure

<iframe 
    allow="camera;microphone;geolocation;display-capture"
    src="http://base_url/?d=<domain>&a=<agent_id>&p=<password>"
    height="<height>" 
    width="<width>">
</iframe>

Required Parameters

Parameter	Description	Required	Example
`base_url`	The Video service base URL	Yes	`https://vkyc.kwikid.com`
`domain`	Your organization's domain identifier	Yes	`yourcompany.com`
`agent_id`	Unique identifier for the agent	Yes	`agent_12345`
`password`	Agent authentication password	Yes	`secure_password_123`
`height`	Height of the iframe in pixels	Yes	`600`
`width`	Width of the iframe in pixels	Yes	`800`

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Agent Portal</title>
    <style>
        .vkyc-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
        }
        
        .vkyc-iframe {
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="vkyc-container">
        <iframe 
            class="vkyc-iframe"
            allow="camera;microphone;geolocation;display-capture"
            src="https://vkyc.kwikid.com/?d=yourcompany.com&a=agent_12345&p=secure_password_123"
            height="600" 
            width="800">
        </iframe>
    </div>
</body>
</html>

Required Permissions

The iframe requires specific browser permissions to function properly:

Camera Permission

Purpose: Enable video capture for face verification and liveness detection
Usage: Real-time video streaming during KYC sessions
Implementation: Automatically requested when iframe loads

Microphone Permission

Purpose: Enable audio communication between agent and customer
Usage: Two-way voice communication during sessions
Implementation: Required for voice-based verification

Geolocation Permission

Purpose: Capture customer's location for compliance and verification
Usage: Location-based verification and audit trails
Implementation: Used for regulatory compliance

Display Capture Permission

Purpose: Enable screen sharing and recording capabilities
Usage: Document sharing and screen recording for verification
Implementation: Required for document verification workflows

Advanced Configuration

Responsive Design

For responsive implementation, use percentage-based dimensions:

<iframe 
    allow="camera;microphone;geolocation;display-capture"
    src="https://vkyc.kwikid.com/?d=yourcompany.com&a=agent_12345&p=secure_password_123"
    style="width: 100%; height: 100vh; border: none;">
</iframe>

Custom Styling

.vkyc-iframe {
    width: 100%;
    max-width: 1200px;
    height: 80vh;
    border: 2px solid #007bff;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 123, 255, 0.2);
    transition: all 0.3s ease;
}
 
.vkyc-iframe:hover {
    box-shadow: 0 12px 24px rgba(0, 123, 255, 0.3);
    transform: translateY(-2px);
}

Dynamic Loading

// Load iframe dynamically
function loadAgentPortal(agentId, password) {
    const iframe = document.createElement('iframe');
    iframe.allow = "camera;microphone;geolocation;display-capture";
    iframe.src = `https://vkyc.kwikid.com/?d=yourcompany.com&a=${agentId}&p=${password}`;
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    
    document.getElementById('vkyc-container').appendChild(iframe);
}
 
// Usage
loadAgentPortal('agent_12345', 'secure_password_123');

Security Considerations

Authentication

Always use secure, encrypted passwords
Implement proper session management
Use HTTPS for all communications

Data Protection

Ensure compliance with data protection regulations
Implement proper data encryption
Regular security audits

Access Control

Implement role-based access control
Monitor agent activities
Log all session activities

Integration Best Practices

1. Error Handling

// Handle iframe load errors
const iframe = document.querySelector('.vkyc-iframe');
 
iframe.addEventListener('load', function() {
    console.log('Agent portal loaded successfully');
});
 
iframe.addEventListener('error', function() {
    console.error('Failed to load agent portal');
    // Implement fallback or retry logic
});

2. Performance Optimization

<!-- Lazy load iframe for better performance -->
<iframe 
    loading="lazy"
    allow="camera;microphone;geolocation;display-capture"
    src="https://vkyc.kwikid.com/?d=yourcompany.com&a=agent_12345&p=secure_password_123"
    height="600" 
    width="800">
</iframe>

Troubleshooting

Common Issues

Permission Denied
- Ensure all required permissions are granted
- Check browser settings for camera/microphone access
- Verify HTTPS is being used
Iframe Not Loading
- Check network connectivity
- Verify URL parameters are correct
- Ensure domain is whitelisted
Audio/Video Issues
- Check device permissions
- Verify microphone and camera are working
- Test with different browsers

Debug Mode

Enable debug mode for troubleshooting:

<iframe 
    allow="camera;microphone;geolocation;display-capture"
    src="https://vkyc.kwikid.com/?d=yourcompany.com&a=agent_12345&p=secure_password_123&debug=true"
    height="600" 
    width="800">
</iframe>

API Reference

URL Parameters

Parameter	Type	Required	Description
`d`	string	Yes	Domain identifier
`a`	string	Yes	Agent ID
`p`	string	Yes	Agent password
`debug`	boolean	No	Enable debug mode
`theme`	string	No	UI theme (light/dark)
`lang`	string	No	Language code

Support and Documentation

For additional support or technical assistance:

Technical Support: Contact our development team
API Documentation: Refer to the complete API reference
Integration Guide: Follow the step-by-step integration guide
Best Practices: Review security and performance guidelines

Note: This document and its contents are confidential. Do not share without prior permission from Think Analytics India Pvt. Ltd.

Agent IFrame SDK Integration

On this page