diff --git a/src/components/CoolFrame.vue b/src/components/CoolFrame.vue
index 6723ea4484..607b921821 100644
--- a/src/components/CoolFrame.vue
+++ b/src/components/CoolFrame.vue
@@ -28,6 +28,7 @@
 
 import { generateCSSVarTokens, getUITheme } from '../helpers/coolParameters.js'
 import { getCoolServerUrl } from '../helpers/url.js'
+import PostMessageService from '../services/postMessage.tsx'
 
 export default {
 	name: 'CoolFrame',
@@ -59,9 +60,16 @@ export default {
 			formAction: '',
 			cssVariables: generateCSSVarTokens(),
 			uiTheme: getUITheme(),
+			postMessage: null,
 		}
 	},
 	mounted() {
+		this.postMessage = new PostMessageService({
+			parent: window.parent,
+		})
+
+		window.addEventListener('message', this.handlePostMessage)
+
 		// Ensure publicWopiUrl is used to construct formAction
 		if (this.publicWopiUrl) {
 			this.formAction = getCoolServerUrl(this.publicWopiUrl)
@@ -79,6 +87,22 @@ export default {
 			}
 		})
 	},
+	beforeDestroy() {
+		window.removeEventListener('message', this.handlePostMessage)
+	},
+	methods: {
+		handlePostMessage(event) {
+			try {
+				const data = event.data
+				if (data.MessageId === 'Iframe_Height') {
+					document.getElementById(this.iframeName).height = data.Values.ContentHeight
+				}
+			} catch (e) {
+				console.error('Something went wrong with post message', e)
+			}
+		},
+	},
+
 }
 </script>
 
@@ -86,7 +110,9 @@ export default {
   .cool-frame-iframe {
     width: 100%;
     border: none;
-	height: 60vh;
-	overflow-y: auto;
+		overflow-y: auto;
+		box-sizing: border-box;
+		padding: 0;
+		margin: 0;
   }
   </style>