diff --git a/web/app/configs/widget/etherpad/etherpad-config.component.ts b/web/app/configs/widget/etherpad/etherpad-config.component.ts
index 6b46bff..0400fb7 100644
--- a/web/app/configs/widget/etherpad/etherpad-config.component.ts
+++ b/web/app/configs/widget/etherpad/etherpad-config.component.ts
@@ -36,23 +36,21 @@ export class EtherpadWidgetConfigComponent extends WidgetComponent implements Mo
     }
 
     getPadURL(widget?: Widget): string {
+        let url: string;
         if (widget) {
             if (this.editUseCustomServer) {
-                const url = widget.data.newPadServer + this.roomId + "_" + widget.data.newPadName;
-                return url;
+                url = widget.data.newPadServer + this.roomId + "_" + widget.data.newPadName;
             } else {
-                const url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + widget.data.newPadName;
-                return url;
+                url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + widget.data.newPadName;
             }
         } else {
             if (this.useCustomServer) {
-                const url = this.newEtherpadServerUrl + this.roomId + "_" + this.newWidgetUrl;
-                return url;
+                url = this.newEtherpadServerUrl + this.roomId + "_" + this.newWidgetUrl;
             } else {
-                const url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + this.newWidgetUrl;
-                return url;
+                url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + this.newWidgetUrl;
             }
         }
+        return url;
     }
 
     private checkPadURL(url: string, widget?: Widget): boolean {
@@ -71,12 +69,8 @@ export class EtherpadWidgetConfigComponent extends WidgetComponent implements Mo
         }
     }
 
-    public wrapUrl(url: string): string {
-        return this.wrapperUrl + encodeURIComponent(url + "?userName=") + "$matrix_user_id";
-    }
-
     public validateAndAddWidget() {
-        const url = this.getPadURL();
+        const url = this.getPadURL() + "?userName=$matrix_user_id";
 
         if (this.checkPadURL(url)) {
             this.toaster.pop("warning", "Please enter a Pad Name");
@@ -94,7 +88,7 @@ export class EtherpadWidgetConfigComponent extends WidgetComponent implements Mo
     }
 
     public validateAndSaveWidget(widget: Widget) {
-        const url = this.getPadURL(widget);
+        const url = this.getPadURL(widget) + "?userName=$matrix_user_id";
 
         if (this.checkPadURL(url, widget)) {
             this.toaster.pop("warning", "Please enter a Pad Name");
diff --git a/web/app/configs/widget/widget.component.ts b/web/app/configs/widget/widget.component.ts
index ca82087..f3a966e 100644
--- a/web/app/configs/widget/widget.component.ts
+++ b/web/app/configs/widget/widget.component.ts
@@ -18,7 +18,7 @@ export class WidgetComponent {
     public newWidgetName: string = "";
 
     private toggledWidgetIds: string[] = [];
-    public wrapperUrl = "";
+    private wrapperUrl = "";
     private scalarWrapperUrls: string[] = [];
 
     constructor(protected toaster: ToasterService,
@@ -87,8 +87,17 @@ export class WidgetComponent {
         return url;
     }
 
-    public wrapUrl(url: string): string {
-        return this.wrapperUrl + encodeURIComponent(url);
+    private wrapUrl(url: string): string {
+        let encodedURL = this.wrapperUrl + encodeURIComponent(url);
+        
+        //don't URL encode $vars of the widget Spec
+        //TODO do the same with vars from the data object
+        encodedURL = encodedURL.replace(encodeURIComponent("$matrix_user_id"), "$matrix_user_id");
+        encodedURL = encodedURL.replace(encodeURIComponent("$matrix_room_id"), "$matrix_room_id");
+        encodedURL = encodedURL.replace(encodeURIComponent("$matrix_display_name"), "$matrix_display_name");
+        encodedURL = encodedURL.replace(encodeURIComponent("$matrix_avatar_url"), "$matrix_avatar_url");
+
+        return encodedURL;
     }
 
     private setWidgetUrl(widget: Widget) {