AGP SDK Integration Examples

⚙️ Configuration

Enter the Contract ID and Bundle ID you want to use for testing:

💡 Tip: The IDs you enter here will be used by all the demo buttons below.

Contract Popup Mode

Opens a contract in a modal popup overlay

Usage:

// Simple contract popup
agp.initContractIframe('your-contract-id', {
    mode: 'popup'
});

// Contract popup with custom options
agp.initContractIframe('your-contract-id', {
    mode: 'popup',
    popupWidth: 1200,
    popupHeight: 900,
    popupTitle: 'Sign Contract',
    onMessage: (data, origin, iframe) => console.log('Message:', data),
    onClose: () => console.log('Popup closed')
});

// Backward compatible (uses initIframe - same as initContractIframe)
agp.initIframe('your-contract-id', {
    mode: 'popup'
});

Bundle Popup Mode

Opens a bundle (multiple contracts) in a modal popup overlay

Usage:

// Simple bundle popup
agp.initBundleIframe('your-bundle-id', {
    mode: 'popup'
});

// Bundle popup with custom options
agp.initBundleIframe('your-bundle-id', {
    mode: 'popup',
    popupWidth: 1200,
    popupHeight: 900,
    popupTitle: 'Sign Bundle',
    onMessage: (data, origin, iframe) => console.log('Message:', data),
    onClose: () => console.log('Popup closed')
});

Iframe Mode with Parent Element

Embeds AGP portal as an iframe within a specific container

Usage:

// Embed contract in specific element
agp.initContractIframe('your-contract-id', {
    mode: 'iframe',
    parentElement: '#agp-container', // or document.getElementById('agp-container')
    width: '100%',
    height: '600px'
});

// Embed bundle in specific element
agp.initBundleIframe('your-bundle-id', {
    mode: 'iframe',
    parentElement: '#agp-container',
    width: '100%',
    height: '600px'
});

Advanced Usage

Available Methods:

// Contract-specific method
agp.initContractIframe(contractId, options)

// Bundle-specific method
agp.initBundleIframe(bundleId, options)

// Backward compatible method (same as initContractIframe)
agp.initIframe(contractId, options)

Available Options:

agp.initContractIframe('contract-id', {
    mode: 'iframe' | 'popup',           // Integration mode
    parentElement: '#selector' | element, // Parent element for iframe mode
    noPreview: false,                   // Set to true to show only sign button
    width: '100%',                      // iframe width
    height: '800px',                    // iframe height
    border: 'solid 1px #ccc',          // iframe border
    baseUrl: 'http://localhost:3000',   // AGP base URL
    popupWidth: 800,                    // Popup width in pixels
    popupHeight: 600,                   // Popup height in pixels
    popupTitle: 'AGP Portal',           // Popup title
    onMessage: function(data, origin, iframe) {}, // Message handler
    onClose: function() {}              // Close handler (popup only)
});

Return Value:

// Iframe mode returns:
{
    iframe: HTMLIFrameElement,
    destroy: function() // Remove iframe
}

// Popup mode returns:
{
    popup: HTMLDivElement,
    iframe: HTMLIFrameElement,
    close: function(), // Close popup
    destroy: function() // Same as close
}