Interactive Demo
Embedded Renderer Demo
Test the OpenAttestation embedded credential renderer with sample credentials. Try different templates and see the postMessage API in action.
Try It Out
Rendered Credential
Click on rendered fields to trigger OBFUSCATE messages.
Message Log
// Messages will appear here...
Quick Reference
Host → Renderer
-
RENDER_DOCUMENTSend credential to display -
SELECT_TEMPLATESwitch template -
GET_TEMPLATESList available templates -
PRINTTrigger print dialog
Renderer → Host
-
RENDERER_READYIframe loaded -
UPDATE_HEIGHTContent height changed -
UPDATE_TEMPLATESTemplate list response -
OBFUSCATEField clicked for hiding
Embed in Your Application
<iframe src="https://aho.com/render/frame" id="renderer"></iframe>
<script>
const iframe = document.getElementById('renderer');
window.addEventListener('message', (event) => {
if (event.data.type === 'RENDERER_READY') {
iframe.contentWindow.postMessage({
type: 'RENDER_DOCUMENT',
payload: { document: yourCredential }
}, '*');
}
if (event.data.type === 'OBFUSCATE') {
console.log('Hide field:', event.data.payload);
}
});
</script>