diff --git a/web/TODO.md b/web/TODO.md
index 4778b6cf..19f82191 100644
--- a/web/TODO.md
+++ b/web/TODO.md
@@ -1,8 +1,5 @@
critical features:
-- improve iframe
- - add default attrs
- - auto height
- get settings from outside
- get path from url or by params
- get siteid by params
diff --git a/web/app/embed.js b/web/app/embed.js
new file mode 100644
index 00000000..1934a198
--- /dev/null
+++ b/web/app/embed.js
@@ -0,0 +1,44 @@
+if (document.readyState !== 'interactive') {
+ document.addEventListener('DOMContentLoaded', initEmbed);
+} else {
+ initEmbed();
+}
+
+function initEmbed() {
+ remark_config = remark_config || {}
+
+ const siteId = remark_config.site_id || 'remark42';
+ const node = document.getElementById(siteId);
+
+ if (!node) {
+ console.error('Remark42: Can\'t find root node.');
+ return;
+ }
+
+ node.innerHTML = `
+
+ `;
+
+ const iframe = node.getElementsByTagName('iframe')[0];
+
+ window.addEventListener('message', updateIframeHeight);
+
+ function updateIframeHeight(event) {
+ try {
+ const data = JSON.parse(event.data);
+ iframe.style.height = `${data.remarkIframeHeight}px`;
+ } catch (e) {}
+ }
+}
+
diff --git a/web/app/app.js b/web/app/remark.js
similarity index 72%
rename from web/app/app.js
rename to web/app/remark.js
index 89a8e9b0..30fa677d 100644
--- a/web/app/app.js
+++ b/web/app/remark.js
@@ -1,5 +1,4 @@
import 'babel-polyfill'; // TODO: remove it
-
import 'common/polyfills'; // TODO: check it
import { h, render } from 'preact';
@@ -7,13 +6,9 @@ import Root from './components/root';
import { id } from './common/settings';
-if (document.readyState !== 'complete') {
- window.addEventListener('DOMContentLoaded', initApp);
-} else {
- initApp();
-}
+init();
-function initApp() {
+function init() {
const node = document.getElementById(id);
if (!node) {
diff --git a/web/iframe.html b/web/iframe.html
index 27a7b05a..55d25cfa 100644
--- a/web/iframe.html
+++ b/web/iframe.html
@@ -9,5 +9,14 @@
+