Syntaq Falcon

Appearance

Embed BuildCustom in iFrame - Developer Guide ​

Quick Start ​

Embed the Syntaq.Falcon form builder in your application with minimal setup.

Basic Integration ​

html
<iframe 
    src="https://your-syntaq-domain.com/Falcon/Forms/BuildCustom?OriginalId=form-guid"
    width="100%" 
    height="800px"
    frameborder="0"
    allowfullscreen>
</iframe>

Message Handler Setup ​

javascript
window.addEventListener('message', function(event) {
    // Security: Validate origin in production
    // if (event.origin !== 'https://your-syntaq-domain.com') return;
    
    const message = event.data;
    
    switch(message.type) {
        case 'formBuilderReady':
            console.log('Builder ready:', message.formId);
            break;
        case 'formSaved':
            console.log('Form saved:', message.formId);
            // Close modal, update UI, etc.
            break;
        case 'formSaveError':
            console.error('Save failed:', message.error);
            // Show error to user
            break;
        case 'formBuilderClosed':
            console.log('Builder closed');
            // Clean up resources
            break;
    }
});

Complete Example ​

html
<!DOCTYPE html>
<html>
<head>
    <title>Form Builder Integration</title>
    <style>
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
        }
        .modal-content {
            position: relative;
            width: 90%;
            height: 90%;
            margin: 2% auto;
            background: white;
            border-radius: 8px;
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1000;
            background: #dc3545;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="openFormBuilder()">Create Form</button>
    
    <div id="formBuilderModal" class="modal">
        <div class="modal-content">
            <button class="close-btn" onclick="closeFormBuilder()">×</button>
            <iframe 
                id="formBuilderFrame"
                src=""
                width="100%" 
                height="100%"
                frameborder="0"
                allowfullscreen>
            </iframe>
        </div>
    </div>

    <script>
        const SYNTACQ_DOMAIN = 'https://your-syntaq-domain.com';
        const FORM_ID = 'your-form-guid'; // Optional: for editing existing form
        
        function openFormBuilder() {
            const modal = document.getElementById('formBuilderModal');
            const iframe = document.getElementById('formBuilderFrame');
            
            // Set iframe source
            const url = new URL('/Falcon/Forms/BuildCustom', SYNTACQ_DOMAIN);
            if (FORM_ID) {
                url.searchParams.set('OriginalId', FORM_ID);
            }
            iframe.src = url.toString();
            
            modal.style.display = 'block';
        }
        
        function closeFormBuilder() {
            document.getElementById('formBuilderModal').style.display = 'none';
            document.getElementById('formBuilderFrame').src = '';
        }
        
        // Message handler
        window.addEventListener('message', function(event) {
            // Security: Validate origin
            if (event.origin !== SYNTACQ_DOMAIN) {
                console.warn('Rejected message from unauthorized origin:', event.origin);
                return;
            }
            
            const message = event.data;
            
            switch(message.type) {
                case 'formBuilderReady':
                    console.log('Form builder is ready:', message.formId);
                    break;
                    
                case 'formSaved':
                    console.log('Form saved successfully:', message.formId);
                    // Close modal and update your application
                    closeFormBuilder();
                    // Optionally refresh your form list or update UI
                    alert('Form saved successfully!');
                    break;
                    
                case 'formSaveError':
                    console.error('Form save failed:', message.error);
                    alert('Failed to save form: ' + message.error);
                    break;
                    
                case 'formBuilderClosed':
                    console.log('Form builder closed');
                    closeFormBuilder();
                    break;
            }
        });
    </script>
</body>
</html>

API Reference ​

URL Parameters ​

ParameterTypeRequiredDescription
OriginalIdstringNoForm GUID to edit existing form
VersionstringNoForm version (defaults to "live")

Message Types ​

TypeDescriptionPayload
formBuilderReadyBuilder interface loaded{type, status, formId, originalId, version, timestamp}
formSavedForm saved successfully{type, status, formId, originalId, version, timestamp}
formSaveErrorSave operation failed{type, status, error, timestamp}
formBuilderClosedBuilder interface closed{type, status, timestamp}

Security Best Practices ​

1. Origin Validation ​

javascript
// Always validate message origin in production
if (event.origin !== 'https://your-syntaq-domain.com') {
    console.warn('Rejected message from unauthorized origin:', event.origin);
    return;
}

2. Authentication ​

  • Users must be authenticated in Syntaq.Falcon
  • Authentication cookies are shared with the iframe
  • Handle session timeouts gracefully

3. HTTPS Only ​

  • Always use HTTPS for both parent and iframe
  • Mixed content warnings may break functionality

Error Handling ​

Common Issues ​

IssueCauseSolution
Builder won't loadInvalid URL or authenticationCheck URL format and user login
Save button not workingJavaScript errors or network issuesCheck browser console and network
Messages not receivedOrigin validation or event listenerVerify origin and event handler setup

Debug Mode ​

javascript
// Enable debug logging
window.addEventListener('message', function(event) {
    console.log('Received message:', event.origin, event.data);
    // ... your message handling code
});

Integration Patterns ​

javascript
function openInModal(formId = null) {
    const modal = document.getElementById('modal');
    const iframe = document.getElementById('iframe');
    
    const url = new URL('/Falcon/Forms/BuildCustom', SYNTACQ_DOMAIN);
    if (formId) url.searchParams.set('OriginalId', formId);
    
    iframe.src = url.toString();
    modal.style.display = 'block';
}

Tab Integration ​

javascript
function openInTab(formId = null) {
    const url = new URL('/Falcon/Forms/BuildCustom', SYNTACQ_DOMAIN);
    if (formId) url.searchParams.set('OriginalId', formId);
    
    window.open(url.toString(), '_blank');
}
javascript
function openInSidebar(formId = null) {
    const sidebar = document.getElementById('sidebar');
    const iframe = document.createElement('iframe');
    
    const url = new URL('/Falcon/Forms/BuildCustom', SYNTACQ_DOMAIN);
    if (formId) url.searchParams.set('OriginalId', formId);
    
    iframe.src = url.toString();
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';
    
    sidebar.innerHTML = '';
    sidebar.appendChild(iframe);
}

Testing ​

Local Development ​

javascript
// For local development, you might need to disable origin validation
window.addEventListener('message', function(event) {
    // Only validate origin in production
    if (window.location.hostname !== 'localhost' && 
        event.origin !== SYNTACQ_DOMAIN) {
        return;
    }
    // ... handle message
});

Cross-Browser Testing ​

  • Test in Chrome, Firefox, Safari, and Edge
  • Verify iframe communication works in all browsers
  • Check mobile responsiveness if needed

Performance Considerations ​

Loading Optimization ​

javascript
// Preload the iframe for faster opening
function preloadFormBuilder() {
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = `${SYNTACQ_DOMAIN}/Falcon/Forms/BuildCustom`;
    document.body.appendChild(iframe);
}

Memory Management ​

javascript
// Clean up iframe when not needed
function cleanupFormBuilder() {
    const iframe = document.getElementById('formBuilderFrame');
    if (iframe) {
        iframe.src = '';
        iframe.remove();
    }
}

Troubleshooting Checklist ​

  • [ ] User is authenticated in Syntaq.Falcon
  • [ ] URL is correct and accessible
  • [ ] Origin validation is properly configured
  • [ ] Message event listener is set up
  • [ ] All message types are handled
  • [ ] Error handling is implemented
  • [ ] HTTPS is used (if required)
  • [ ] Cross-browser compatibility verified

Support ​

For detailed documentation, see Custom Form Builder View Guide.

For technical support:

  1. Check browser console for errors
  2. Verify network connectivity
  3. Test with different browsers
  4. Contact your system administrator

Version History ​

  • v1.0 (January 2025): Initial release
  • Compatible with Syntaq.Falcon v1.0+

Syntaq Falcon user documentation

Copyright © 2026 Syntaq Solutions