diff --git a/dev/js/spec/pluginSpec.js b/dev/js/spec/pluginSpec.js
index 31ee790..41589ec 100644
--- a/dev/js/spec/pluginSpec.js
+++ b/dev/js/spec/pluginSpec.js
@@ -1,4 +1,4 @@
-define(['plugin/server','plugin/widget','panel', 'panel/query', 'panel/result'], function (pluginServerClass, widgetClass, panelClass, queryPanelClass, resultPanelClass) {
+define(['plugin/server','plugin/widget','panel', 'panel/query', 'panel/result', 'plugin/service'], function (pluginServerClass, widgetClass, panelClass, queryPanelClass, resultPanelClass, serviceClass) {
 
   describe('KorAP.Plugin.Server', function () {
 
@@ -27,6 +27,29 @@
       manager.destroy();
     });
 
+    it('should add a service', function () {
+      var manager = pluginServerClass.create();
+
+      var e = manager.element();
+
+      document.body.appendChild(e);
+
+      expect(document.getElementById("services")).toBeTruthy();
+      
+      expect(e.getAttribute("id")).toBe("services");
+      expect(e.children.length).toBe(0);
+
+      var id = manager.addService('Example 1', 'about:blank');
+      expect(id).toMatch(/^id-/);
+
+      expect(e.children.length).toBe(1);
+
+      manager.destroy();
+
+      expect(document.getElementById("services")).toBeFalsy();
+
+    });
+
     it('should close a widget', function () {
       var manager = pluginServerClass.create();
       var panel = panelClass.create();
@@ -39,7 +62,8 @@
 
       expect(panelE.getElementsByClassName('view').length).toEqual(1);
 
-      var widget = manager.widget(id);
+      var widget = manager.service(id);
+      expect(widget.isWidget).toBeTruthy();
       widget.close();
 
       expect(panelE.getElementsByClassName('view').length).toEqual(0);
@@ -131,7 +155,7 @@
   
   describe('KorAP.Plugin.Widget', function () {
     it('should be initializable', function () {
-      expect(function () { widgetClass.create() }).toThrow(new Error("Widget not well defined"));
+      expect(function () { widgetClass.create() }).toThrow(new Error("Service not well defined"));
 
       widget = widgetClass.create("Test", "https://example", 56);
       expect(widget).toBeTruthy();
@@ -180,6 +204,30 @@
     });
   });
 
+  describe('KorAP.Plugin.Service', function () {
+    it('should be initializable', function () {
+      expect(function () { serviceClass.create() }).toThrow(new Error("Service not well defined"));
+
+      let service = serviceClass.create("Test", "https://example", 56);
+      expect(service).toBeTruthy();
+      expect(service.id).toEqual(56);
+      expect(service.name).toEqual("Test");
+      expect(service.src).toEqual("https://example");
+    });
+
+    it('should be loadable', function () {
+      let service = serviceClass.create("Test", "https://example", 56);
+      expect(service).toBeTruthy();
+
+      let i = service.load();
+      expect(i.tagName).toEqual("IFRAME");
+      expect(i.getAttribute("allowTransparency")).toEqual("true");
+      expect(i.getAttribute("frameborder")).toEqual(''+0);
+      expect(i.getAttribute("name")).toEqual(''+service.id);
+      expect(i.getAttribute("src")).toEqual(service.src);
+    });
+  });
+  
   describe('KorAP.Plugin.QueryPanel', function () {
     it('should establish a query plugin', function () {
       var queryPanel = queryPanelClass.create();
diff --git a/dev/js/src/plugin/client.js b/dev/js/src/plugin/client.js
index 4e6ec3c..8c73625 100644
--- a/dev/js/src/plugin/client.js
+++ b/dev/js/src/plugin/client.js
@@ -44,6 +44,10 @@
     _init : function () {
       this.widgetID = window.name;
       this.server = cs.getAttribute('data-server') || '*';
+
+      // Establish the 'message' hook.
+      this._listener = this._receiveMsg.bind(this);
+      window.addEventListener("message", this._listener);
       return this;
     },
 
@@ -53,6 +57,24 @@
       window.parent.postMessage(data, this.server);
     },
 
+    // Receive a call from the embedded platform.
+    _receiveMsg : function (e) {
+      // Get event data
+      let d = e.data;
+
+      // If no data given - fail
+      // (probably check that it's an assoc array)
+      if (!d)
+        return;
+
+      // TODO:
+      //   check e.origin and d["originID"]!!!
+      //   probably against window.parent!
+
+      if (this.onMessage)
+        this.onMessage(d)
+    },
+    
     /**
      * Send a log message to the embedding KorAP
      */
@@ -86,7 +108,15 @@
   // Create plugin on windows load
   window.onload = function () {
     window.KorAPlugin = window.KorAPlugin || obj.create();
+
+    // TODO:
+    //   Only do this in case of the client being opened
+    //   as a widget!
     window.KorAPlugin.resize();
+
+    if (window.pluginit)
+      window.pluginit(window.KorAPlugin);
   };
+
 })();
 
diff --git a/dev/js/src/plugin/server.js b/dev/js/src/plugin/server.js
index 163a315..1c46dbe 100644
--- a/dev/js/src/plugin/server.js
+++ b/dev/js/src/plugin/server.js
@@ -1,6 +1,6 @@
 /**
  * The plugin system is based
- * on registered widgets (iframes) from
+ * on registered services (iframes) from
  * foreign services.
  * The server component spawns new iframes and
  * listens to them.
@@ -8,15 +8,15 @@
  * @author Nils Diewald
  */
 
-define(["plugin/widget", "util"], function (widgetClass) {
+define(["plugin/widget", 'plugin/service', 'state', "util"], function (widgetClass, serviceClass, stateClass) {
   "use strict";
 
   KorAP.Panel = KorAP.Panel || {};
 
-  // Contains all widgets to address with
+  // Contains all servicess to address with
   // messages to them
-  var widgets = {};
-  var plugins = {};
+  var services = {};
+  var plugins  = {};
 
   // TODO:
   //   These should better be panels and every panel
@@ -33,7 +33,7 @@
   var buttonsSingle = {
     query : [],
     result : []
-  }
+  } 
   
   // This is a counter to limit acceptable incoming messages
   // to a certain amount. For every message, this counter will
@@ -85,6 +85,17 @@
      *         'action' : 'addWidget',
      *         'template' : 'https://localhost:5678/?match={matchid}',
      *       }
+     *     },{
+     *       'title' : 'glemm',
+     *       'panel' : 'query',
+     *       'onClick' : {
+     *         'action' : 'toggle',
+     *         'state' : 'glemm',
+     *         'service' : {
+     *           'id' : 'glemm',
+     *           'template' : 'https://localhost:5678/'
+     *         }
+     *       }
      *     }]
      *   });
      *
@@ -103,7 +114,8 @@
         name : name,
         desc : obj["desc"],
         about : obj["about"],
-        widgets : []
+        widgets : [],
+        services : []
       };
 
       if (typeof obj["embed"] !== 'object')
@@ -111,37 +123,41 @@
  
       // Embed all embeddings of the plugin
       var that = this;
-      for (var i in obj["embed"]) {
-        var embed = obj["embed"][i];
+      for (let i in obj["embed"]) {
+        let embed = obj["embed"][i];
 
         if (typeof embed !== 'object')
           throw new Error("Embedding of plugin is no object");
 
-        var panel = embed["panel"];
-        
-        if (!panel || !(buttons[panel] || buttonsSingle[panel]))
-          throw new Error("Panel for plugin is invalid");
-        var onClick = embed["onClick"];
-
         // Needs to be localized as well
-        var title = embed["title"];
+        let title = embed["title"];        
+        let panel = embed["panel"];
+        let onClick = embed["onClick"];
+
+
+        if (!panel || !(buttons[panel] || buttonsSingle[panel]))
+          throw new Error("Panel for plugin is invalid");        
 
         // The embedding will open a widget
         if (!onClick["action"] || onClick["action"] == "addWidget") {
 
-          var cb = function (e) {
+          
+          let cb = function (e) {
 
             // "this" is bind to the panel
 
             // Get the URL of the widget
-            var url = onClick["template"];
+            let url = onClick["template"];
             // that._interpolateURI(onClick["template"], this.match);
 
             // Add the widget to the panel
-            var id = that.addWidget(this, name, url);
+            let id = that.addWidget(this, name, url);
             plugin["widgets"].push(id);
           };
 
+          // TODO:
+          //   Create button class to be stored and loaded in button groups!
+
           // Add to dynamic button list (e.g. for matches)
           if (buttons[panel]) {
             buttons[panel].push([title, embed["classes"], cb]);
@@ -156,11 +172,53 @@
           else {
             buttonsSingle[panel].push([title, embed["classes"], cb]);
           }
+        }
+
+        else if (onClick["action"] == "toggle") {
+
+          // Todo: Initially false
+          let state = stateClass.create(false);
+
+          // TODO:
+          //   Lazy registration (see above!)
+          KorAP.Panel[panel].actions.addToggle("Title",["title"], state);
+
+          // Get the URL of the service
+
+          // TODO:
+          //   Use the "service" keyword
+          let url = onClick["template"];
+          
+          // Add the service
+          let id = this.addService(name, url);
+
+          // TODO:
+          //   This is a bit stupid to get the service window
+          let iframe = services[id].load();
+          let win = iframe.contentWindow;
+
+          // Create object to communicate the toggle state
+          // once the iframe is loaded.
+          iframe.onload = function () {
+            let sendToggle = {
+              setState : function (val) {
+                win.postMessage({
+                  action: 'state',
+                  key : onClick['state'],
+                  value : val
+                }, '*'); // TODO: Fix origin
+              }
+            };
+
+            // Associate object with the state
+            state.associate(sendToggle);          
+          };
+
+          plugin["services"].push(id);
         };
       };
     },
 
-
     // TODO:
     //   Interpolate URIs similar to https://tools.ietf.org/html/rfc6570
     //   but as simple as possible
@@ -191,17 +249,11 @@
         buttonsSingle[name] = [];
       }
     },
-    
-    /**
-     * Open a new widget view in a certain panel and return
-     * the id.
-     */
-    addWidget : function (panel, name, src) {
 
-      if (!src)
-        return;
+    // Optionally initialize the service mechanism and get an ID
+    _getServiceID : function () {
 
-      // Is it the first widget?
+      // Is it the first service?
       if (!this._listener) {
 
         /*
@@ -210,7 +262,7 @@
         this._listener = this._receiveMsg.bind(this);
         window.addEventListener("message", this._listener);
         
-        // Every second increase the limits of all registered widgets
+        // Every second increase the limits of all registered services
         this._timer = window.setInterval(function () {
           for (var i in limits) {
             if (limits[i]++ >= maxMessages) {
@@ -220,14 +272,51 @@
         }, 1000);
       };
 
-      // Create a unique random ID per widget
-      var id = 'id-' + this._randomID();
+      // Create a unique random ID per service
+      return 'id-' + this._randomID();
+    },
+    
+    /**
+     * Add a service in a certain panel and return the id.
+     */
+    addService : function (name, src) {
+      if (!src)
+        return;
+
+      let id = this._getServiceID();
+
+      // Create a new service
+      let service = serviceClass.create(name, src, id);
+      
+      // TODO!
+      // Store the service based on the identifier
+      services[id] = service;
+      limits[id] = maxMessages;
+
+      // widget._mgr = this;
+
+      // Add service to panel
+      this.element().appendChild(
+        service.load()
+      );
+      
+      return id;
+    },
+
+    
+    /**
+     * Open a new widget view in a certain panel and return
+     * the id.
+     */
+    addWidget : function (panel, name, src) {
+
+      let id = this._getServiceID();
 
       // Create a new widget
       var widget = widgetClass.create(name, src, id);
 
       // Store the widget based on the identifier
-      widgets[id] = widget;
+      services[id] = widget;
       limits[id] = maxMessages;
 
       widget._mgr = this;
@@ -240,14 +329,14 @@
 
 
     /**
-     * Get widget by identifier
+     * Get service by identifier
      */
-    widget : function (id) {
-      return widgets[id];
+    service : function (id) {
+      return services[id];
     },
 
     
-    // Receive a call from an embedded iframe.
+    // Receive a call from an embedded service.
     // The handling needs to be very careful,
     // as this can easily become a security nightmare.
     _receiveMsg : function (e) {
@@ -268,46 +357,60 @@
       if (!id)
         return;
 
-      // Get the widget
-      var widget = widgets[id];
+      // Get the service
+      let service = services[id];
 
-      // If the addressed widget does not exist - fail
-      if (!widget)
+      // If the addressed service does not exist - fail
+      if (!service)
         return;
 
       // Check for message limits
       if (limits[id]-- < 0) {
 
-        // Kill widget
-        KorAP.log(0, 'Suspicious action by widget', widget.src);
+        // Kill service
+        KorAP.log(0, 'Suspicious action by service', service.src);
 
         // TODO:
         //   Potentially kill the whole plugin!
 
-        // This removes all connections before closing the widget 
-        this._closeWidget(widget.id);
-        widget.close();
+        // This removes all connections before closing the service 
+        this._closeService(service.id);
+
+        // if (service.isWidget)
+        service.close();
+     
         return;
       };
 
       // Resize the iframe
-      if (d.action === 'resize') {
-        widget.resize(d);
-      }
+      switch (d.action) {
+      case 'resize':
+        if (service.isWidget)
+          service.resize(d);
+        break;
 
       // Log message from iframe
-      else if (d.action === 'log') {
-        KorAP.log(d.code, d.msg,  widget.src);
+      case 'log':
+        KorAP.log(d.code, d.msg,  service.src);
+        break;
       };
 
       // TODO:
       //   Close
     },
 
-    // Close the widget
-    _closeWidget : function (id) {
+    // Close the service
+    _closeService : function (id) {
       delete limits[id];
-      delete widgets[id];
+
+      // Close the iframe
+      if (services[id] && services[id]._closeIframe) {
+        services[id]._closeIframe();
+
+        // Remove from list
+        delete services[id];
+      };
+
 
       // Remove listeners in case no widget
       // is available any longer
@@ -328,19 +431,39 @@
       this._listener = undefined;
     },
 
+    /**
+     * Return the service element.
+     */
+    element : function () {
+      if (!this._element) {
+        this._element = document.createElement('div');
+        this._element.setAttribute("id", "services");
+      }
+      return this._element;
+    },
+    
     // Destructor, just for testing scenarios
     destroy : function () {
       limits = {};
-      for (let w in widgets) {
-        widgets[w].close();
+      for (let s in services) {
+        services[s].close();
       };
-      widgets = {};
+      services = {};
       for (let b in buttons) {
         buttons[b] = [];
       };
       for (let b in buttonsSingle) {
         buttonsSingle[b] = [];
       };
+
+      if (this._element) {
+        let e = this._element;
+        if (e.parentNode) {
+          e.parentNode.removeChild(e);
+        };
+        this._element = null;
+      };
+      
       this._removeListener();
     }
   };
diff --git a/dev/js/src/plugin/service.js b/dev/js/src/plugin/service.js
new file mode 100644
index 0000000..a02e945
--- /dev/null
+++ b/dev/js/src/plugin/service.js
@@ -0,0 +1,59 @@
+define(function () {
+  "use strict";
+  return {
+    create : function (name, src, id) {
+      return Object.create(this)._init(name, src, id);
+    },
+
+    // Initialize service
+    _init : function (name, src, id) {
+      if (!name || !src || !id)
+        throw Error("Service not well defined");
+      this.name = name;
+      this.src = src;
+      this.id = id;
+
+      // There is no close method defined yet
+      if (!this.close) {
+        this.close = function () {
+          this._closeIframe();
+        }
+      }
+      
+      return this;
+    },
+
+    /**
+     * The element of the service as embedded in the panel
+     */
+    load : function () {
+      if (this._load)
+        return this._load;
+      
+      // Spawn new iframe
+      let e = document.createElement('iframe');
+      e.setAttribute('allowTransparency',"true");
+      e.setAttribute('frameborder', 0);
+      e.setAttribute('sandbox','allow-scripts');
+      e.style.height = '0px';
+      e.setAttribute('name', this.id);
+      e.setAttribute('src', this.src);
+      
+      this._load = e;
+      return e;
+    },
+
+    // onClose : function () {},
+
+    /**
+     * Close the service iframe.
+     */
+    _closeIframe : function () {
+      var e = this._load;
+      if (e && e.parentNode) {
+        e.parentNode.removeChild(e);
+      };
+      this._load = null;
+    }
+  };
+});
diff --git a/dev/js/src/plugin/widget.js b/dev/js/src/plugin/widget.js
index b8aa49e..403954c 100644
--- a/dev/js/src/plugin/widget.js
+++ b/dev/js/src/plugin/widget.js
@@ -8,7 +8,7 @@
  * @author Nils Diewald
  */
 
-define(["view","util"], function (viewClass) {
+define(["view","plugin/service","util"], function (viewClass, serviceClass) {
   "use strict";
 
   return {
@@ -17,16 +17,12 @@
      * Create new widget
      */
     create : function (name, src, id) {
-      return Object.create(viewClass)._init(['widget']).upgradeTo(this)._init(name, src, id);
+      return Object.create(viewClass)._init(['widget']).upgradeTo(serviceClass)._init(name, src, id).upgradeTo(this)._init();
     },
 
     // Initialize widget
-    _init : function (name, src, id) {
-      if (!name || !src || !id)
-        throw Error("Widget not well defined");
-      this.name = name;
-      this.src = src;
-      this.id = id;
+    _init : function () {
+      this.isWidget = true;
       return this;
     },
 
@@ -35,23 +31,16 @@
      */
     show : function () {
 
-      if (this._show)
-        return this._show;
+      if (this._load)
+        return this._load;
 
-      // Spawn new iframe
-      var i = document.createElement('iframe');
-      i.setAttribute('allowTransparency',"true");
-      i.setAttribute('frameborder', 0);
-      i.setAttribute('sandbox','allow-scripts');
-      i.style.height = '0px';
-      i.setAttribute('name', this.id);
-      i.setAttribute('src', this.src);
+      let obj = this.load();
 
       // Per default there should at least be a button
       // for settings, if the plugin requires settings.
       // Otherwise a button indicating this is a plugin
       // is a nice idea as well.
-
+      
       this.actions.add(
         this.name, ['button-icon', 'plugin'], function (e) {
 
@@ -59,8 +48,7 @@
           window.alert("Basic information about this plugin");
       }.bind(this));
       
-      this._show = i;
-      return i;
+      return obj;
     },
 
     // Resize iframe
@@ -72,7 +60,7 @@
     // On closing the widget view
     onClose : function () {
       if (this._mgr) {
-        this._mgr._closeWidget(this._id);
+        this._mgr._closeService(this._id);
         this._mgr = undefined;
       };
     }
diff --git a/dev/js/src/view.js b/dev/js/src/view.js
index 4885afa..fa830d6 100644
--- a/dev/js/src/view.js
+++ b/dev/js/src/view.js
@@ -78,14 +78,17 @@
      * Close the view.
      */
     close : function () {
+
+      // Close embedded things before
+      if (this.onClose)
+        this.onClose();
+
       var e = this.element();
       if (e.parentNode) {
         e.parentNode.removeChild(e);
       };
       this.panel.delView(this);
       this._shown = false;
-      if (this.onClose)
-        this.onClose();
     },
 
     /**