Example

The following example shows a typical online viewer intgration with a web application.
<!DOCTYPE html>
<html>
 
<head>
</head>
 
<style>
    iframe { width: 100%; height: 100%; position: absolute; top: 50px; left: 0; }
</style>
 
<body>
    <div class="inputs">
        <input type="text" placeholder="access token" id="accessToken">
        <input type="text" placeholder="document guid" id="documentGuid" value="8c68619e-1d94-4040-9838-03856316b365">
        <button id="go"> GO </button>
    </div>
 
    <script>
        const goButton = document.getElementById('go');
        const viewerElem = document.createElement('iframe');
        viewerElem.src = "https://wap.sealdoc.com/mobile/v";
 
        goButton.onclick = () => {
            document.body.appendChild(viewerElem);
 
            window.addEventListener('message', (event) => {
                if (!event.data || !event.data.id) {
                    return;
                }
 
                switch (event.data.id) {
                    case 'VIEWER:READY':
                        const accessToken = document.getElementById('accessToken').value;
                        const documentGuid = document.getElementById('documentGuid').value;
                        viewerElem.contentWindow.postMessage({ id: 'PARENT:INIT', context: { accessToken, documentGuid } }, '*');
                        break;
 
                    case 'VIEWER:INVALID_ACCESS_TOKEN':
                        viewerElem.contentWindow.postMessage({ id: 'PARENT:SET_ACCESS_TOKEN', context: { accessToken: 'new_access_token' } }, '*');
                        break;
 
                    case 'VIEWER:DOCUMENT_NOT_FOUND':
                        break;
 
                    case 'VIEWER:NO_PERMISSION_FOR_RECIPIENT':
                        break;
 
                    case 'VIEWER:PERMISSION_EXPIRED':
                        break;
 
                    case 'VIEWER:PRINT_PERMISSION_REQUEST':
                        break;
 
                    case 'VIEWER:UNEXPECTED_ERROR':
                        break;
                }
            });
        };
    </script>
</body>
 
</html>