diff --git a/dev/demo/plugin-client.html b/dev/demo/plugin-client.html
index e06b38f..52f35de 100644
--- a/dev/demo/plugin-client.html
+++ b/dev/demo/plugin-client.html
@@ -5,10 +5,21 @@
     <link type="text/css" rel="stylesheet" href="/css/kalamar.css" />
 
     <!-- load client javascript library -->
-    <script src="/js/src/plugin/client.js"></script>
+    <script src="/js/src/plugin/client.js" data-server="http://localhost:3003/"></script>
+    <style>
+      body, html {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+      border-width: 0;
+      }
+    </style>
   </head>
-  <body>
+  <body style="background-color: yellow">
     <h2>Example Widget!</h2>
-    <a onclick="KorAPlugin.log(333, 'Huhu!')">Send log!</a>
+    <ul>
+      <li><a onclick="KorAPlugin.log(333, 'Huhu!')">Send log!</a></li>
+      <li><a onclick="KorAPlugin.resize()">Resize</a></li>
+    </ul>
   </body>
 </html>
diff --git a/dev/demo/plugin-serverdemo.js b/dev/demo/plugin-serverdemo.js
index d1e6e20..563f302 100644
--- a/dev/demo/plugin-serverdemo.js
+++ b/dev/demo/plugin-serverdemo.js
@@ -7,10 +7,12 @@
 
 define(['app/en','plugin/server','lib/domReady','init','hint/foundries/cnx'], function (lang, pluginClass, domReady) {
   domReady(function () {
-    console.log("Los geht's");
     var p = pluginClass.create();
 
     // Open widget!
-    p.addWidget(document.getElementById('container'), 'http://localhost:3003/demo/plugin-client.html');
+    p.addWidget(
+      document.getElementById('container'),
+      'http://localhost:3003/demo/plugin-client.html'
+    );
   });
 });
diff --git a/dev/js/src/plugin/client.js b/dev/js/src/plugin/client.js
index f14a7f7..6918da4 100644
--- a/dev/js/src/plugin/client.js
+++ b/dev/js/src/plugin/client.js
@@ -8,6 +8,19 @@
  * @author Nils Diewald
  */
 
+/*
+* TODO:
+*   Some methods require bidirectional
+*   calling, like
+*   - getKoralQuery()
+*   this probably should be done using a callback,
+*   like fetch({data}, function () {}, '*'), that will
+*   add a unique ID to the message and will call on the cb
+*   once the answer to that message arrives.
+*/
+
+var cs = document.currentScript;
+
 (function () {
   "use strict";
 
@@ -24,16 +37,18 @@
      * Initialize plugin
      */
     _init : function () {
-      console.log('Init');
+      this.widgetID = window.name;
+      this.server = cs.getAttribute('data-server') || '*';
       this.resize();
       return this;
     },
 
     // Send a message
     _sendMsg : function (data) {
+      data["originID"] = this.widgetID;
 
       // TODO: This should send a correct origin
-      window.parent.postMessage(data, '*');
+      window.parent.postMessage(data, this.server);
     },
 
     /**
@@ -54,8 +69,6 @@
     resize : function () {
       var body = document.body;
 
-      console.log('Resize');
-
       // recognize margin of first element
       // (don't know why in FF)
       var cs = getComputedStyle(body.children[0]);
diff --git a/dev/js/src/plugin/server.js b/dev/js/src/plugin/server.js
index 01dddac..db59422 100644
--- a/dev/js/src/plugin/server.js
+++ b/dev/js/src/plugin/server.js
@@ -8,9 +8,20 @@
  * @author Nils Diewald
  */
 
-define(["util"], function () {
+define(["plugin/widget", "util"], function (widgetClass) {
   "use strict";
 
+  // TODO:
+  //   This is a counter to limit acceptable incoming messages
+  //   to hundred. For every message, this will be decreased
+  //   (down to 0), for every second this will be increased
+  //   (up to 100).
+  var c = 100;
+
+  // Contains all widgets to address with
+  // messages to them
+  var widgets = {};
+
   return {
 
     /**
@@ -35,17 +46,22 @@
 
     /**
      * Open a new widget on a certain element
-     * TODO: and register
      */
     addWidget : function (element, src) {
 
-      // Spawn new iframe
-      var iframe = element.addE('iframe');
-      iframe.setAttribute('allowTransparency',"true");
-      iframe.setAttribute('frameborder',0);
-      iframe.setAttribute('sandbox','allow-scripts');
-      iframe.classList.add('widget');
-      iframe.setAttribute('src', src);
+      // Create a unique random ID per widget
+      var id = 'id-' + this._randomID();
+
+      // Create a new widget
+      var widget = widgetClass.create(src, id);
+
+      // Store the widget based on the identifier
+      widgets[id] = widget;
+
+      // Open widget in frontend
+      element.appendChild(
+        widget.element()
+      );
     },
 
     // Receive a call from an embedded iframe
@@ -53,30 +69,37 @@
       // Get event data
       var d = e.data;
 
-      // TODO: Check for e.origin!
+      // e.origin is probably set and okay
 
-      // TODO: Deal with mad iframes
-   
+      // TODO:
+      //   Deal with mad iframes
+
+      // Get the widget
+      var widget = widgets[d["originID"]];
+
+      // If the addressed widget does not exist - fail
+      if (!widget)
+        return;
+
+
       // Resize the iframe
       if (d.action === 'resize') {
 
-        // TODO: Check which iframe it was
-        // var iframe = document.getElementById('?');
-
-        // this.resize(iframe, d);
-        console.log('Resizing not yet implemented');
+        widget.resize(d);
       }
 
       // Log message from iframe
       else if (d.action === 'log') {
         KorAP.log(d.code, d.msg);
-      }
+      };
+
+      // TODO:
+      //   Close
     },
 
-
-    // Resize the calling iframe
-    resize : function (iframe, d) {
-      iframe.style.height = d.height + 'px';
+    // Get a random identifier
+    _randomID : function () {
+      return randomID(20);
     }
   }
 });
diff --git a/dev/js/src/plugin/widget.js b/dev/js/src/plugin/widget.js
new file mode 100644
index 0000000..4c2f09c
--- /dev/null
+++ b/dev/js/src/plugin/widget.js
@@ -0,0 +1,54 @@
+/**
+ * The plugin system is based
+ * on registered widgets (iframes) from
+ * foreign services.
+ * The widget component represents a single iframe.
+ *
+ * @author Nils Diewald
+ */
+
+define(["util"], function () {
+  "use strict";
+
+  return {
+
+    /**
+     * Create new widget
+     */
+    create : function (src, id) {
+      return Object.create(this)._init(src, id);
+    },
+
+    _init : function (src, id) {
+      this.src = src;
+      this.id = id;
+      return this;
+    },
+
+    /**
+     * The element of the widget
+     */
+    element : function () {
+
+      if (this._element)
+        return this._element;
+
+      // Spawn new iframe
+      var i = document.createElement('iframe');
+      i.setAttribute('allowTransparency',"true");
+      i.setAttribute('frameborder', 0);
+      i.setAttribute('sandbox','allow-scripts');
+      i.classList.add('widget');
+      i.setAttribute('name', this.id);
+      i.setAttribute('src', this.src);
+      this._element = i;
+
+      return i;
+    },
+
+    // Resize iframe
+    resize : function (data) {
+      this._element.style.height = data.height + 'px';
+    }
+  }
+});
diff --git a/dev/js/src/util.js b/dev/js/src/util.js
index 5b6c8f8..80f6364 100644
--- a/dev/js/src/util.js
+++ b/dev/js/src/util.js
@@ -59,6 +59,24 @@
   return e.keyCode;
 };
 
+function _dec2hex (dec) {
+  return ('0' + dec.toString(16)).substr(-2)
+};
+
+
+/**
+ * Create random identifiers
+ */
+/*
+ * code based on
+ * https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript#8084248
+ */
+function randomID (len) {
+  var arr = new Uint8Array((len || 40) / 2)
+  window.crypto.getRandomValues(arr)
+  return Array.from(arr, _dec2hex).join('')
+};
+
 
 define(function () {
   // Todo: That's double now!