```
## Multi-Process Workflows
### Seamless Multi-Step Process
For complex workflows with multiple steps, you can chain processes together seamlessly:
```javascript
// Multi-process workflow configuration
const processes = [
{ id: 'personal-info', name: 'Personal Information' },
{ id: 'employment', name: 'Employment Details' },
{ id: 'documents', name: 'Document Upload' },
{ id: 'references', name: 'References' },
{ id: 'background', name: 'Background Check' },
{ id: 'medical', name: 'Medical Information' },
{ id: 'emergency', name: 'Emergency Contacts' },
{ id: 'benefits', name: 'Benefits Selection' },
{ id: 'payroll', name: 'Payroll Information' },
{ id: 'final', name: 'Final Review' }
];
let currentProcessIndex = 0;
function loadProcess(processIndex) {
if (processIndex >= processes.length) {
// All processes complete
showFinalSuccess();
return;
}
const process = processes[processIndex];
const iframe = document.getElementById('workflow-iframe');
// Load process with hidden completion message
iframe.src = `/workflow/${process.id}?debug=false&hideComplete=true`;
currentProcessIndex = processIndex;
// Update progress indicator
updateProgress(processIndex + 1, processes.length);
}
// Listen for completion and auto-advance
window.addEventListener('message', (event) => {
if (event.data.type === 'workflow-complete') {
console.log(`Process ${event.data.processName} completed`);
if (event.data.hideCompletionMessage) {
// Seamlessly move to next process
setTimeout(() => {
loadProcess(currentProcessIndex + 1);
}, 100);
}
} else if (event.data.type === 'workflow-error') {
console.error('Process failed:', event.data.error);
showErrorMessage(event.data.error);
}
});
// Start the first process
loadProcess(0);
```
## Error Handling
### Comprehensive Error Management
```javascript
// Enhanced error handling
window.addEventListener('message', (event) => {
if (event.data.type === 'workflow-complete') {
handleWorkflowComplete(event.data);
} else if (event.data.type === 'workflow-error') {
handleWorkflowError(event.data);
}
});
function handleWorkflowComplete(data) {
console.log('Workflow completed:', data);
// Store completion data
localStorage.setItem('workflow-completion', JSON.stringify(data));
// Update UI
updateCompletionUI(data);
// Auto-advance if configured
if (data.hideCompletionMessage) {
setTimeout(() => {
loadNextProcess();
}, 100);
}
}
function handleWorkflowError(data) {
console.error('Workflow error:', data);
// Log error for debugging
console.error('Error details:', {
processId: data.processId,
processName: data.processName,
error: data.error,
timestamp: data.timestamp
});
// Show user-friendly error message
showErrorMessage(data.error);
// Optionally retry or allow manual restart
showRetryOptions();
}
function showErrorMessage(error) {
// Create error notification
const errorDiv = document.createElement('div');
errorDiv.className = 'error-notification';
errorDiv.innerHTML = `
⚠️ An error occurred
${error}
`;
document.body.appendChild(errorDiv);
}
function retryCurrentProcess() {
const iframe = document.getElementById('workflow-iframe');
iframe.src = iframe.src; // Reload current process
}
function skipCurrentProcess() {
// Move to next process
loadNextProcess();
}
```
## Security Considerations
### Cross-Origin Communication
When integrating iframes, consider these security aspects:
1. **Origin Validation**: Verify message origin
2. **Content Security Policy**: Configure appropriate CSP headers
3. **Sandbox Attributes**: Use iframe sandbox for additional security
```html
```
### Message Validation
```javascript
// Validate message origin
window.addEventListener('message', (event) => {
// Verify origin (replace with your domain)
if (event.origin !== 'https://your-workflow-domain.com') {
console.warn('Message from unauthorized origin:', event.origin);
return;
}
// Validate message structure
if (!event.data || typeof event.data.type !== 'string') {
console.warn('Invalid message structure:', event.data);
return;
}
// Process valid message
handleWorkflowMessage(event.data);
});
```
## Examples
### Customer Portal Integration
```html
Welcome, {{ customer.name }}
Complete Your Application
Step 1 of 5
```
### Employee Onboarding System
```html
Employee Onboarding
Personal Info
Employment
Documents
Benefits
Final
```
## Troubleshooting
### Common Issues and Solutions
#### 1. Iframe Not Loading
**Problem**: Iframe shows blank or doesn't load
**Solution**: Check URL parameters and CORS settings
```javascript
// Debug iframe loading
const iframe = document.getElementById('workflow-iframe');
iframe.onload = () => {
console.log('Iframe loaded successfully');
};
iframe.onerror = () => {
console.error('Iframe failed to load');
};
```
#### 2. Messages Not Received
**Problem**: Parent iframe not receiving completion messages
**Solution**: Verify event listener and origin settings
```javascript
// Debug message reception
window.addEventListener('message', (event) => {
console.log('Message received:', event.data);
// Your message handling logic
});
```
#### 3. Cross-Origin Issues
**Problem**: CORS errors when loading iframe
**Solution**: Configure proper CORS headers on the workflow server
```nginx
# Nginx configuration example
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type";
```
#### 4. URL Parameter Issues
**Problem**: URL parameters not working as expected
**Solution**: Verify parameter encoding
```javascript
// Proper URL construction
const baseUrl = '/workflow/process-id';
const params = new URLSearchParams({
debug: 'false',
hideComplete: 'true'
});
const fullUrl = `${baseUrl}?${params.toString()}`;
```
### Debug Checklist
- [ ] Iframe source URL is correct
- [ ] URL parameters are properly encoded
- [ ] Event listener is attached to window
- [ ] Origin validation is configured
- [ ] CORS headers are set on server
- [ ] Console shows no JavaScript errors
- [ ] Network tab shows successful iframe load
### Support
For additional support with iframe integration:
1. Check the browser console for error messages
2. Verify network connectivity to the workflow server
3. Test with different browsers
4. Review server logs for any backend issues
5. Contact support with specific error details
---
This documentation provides comprehensive guidance for integrating Corrad workflows into external applications. The iframe system is designed to be flexible, secure, and easy to implement while providing a seamless user experience.