diff --git a/web/app/configs/widget/whiteboard/whiteboard.widget.component.html b/web/app/configs/widget/whiteboard/whiteboard.widget.component.html
new file mode 100644
index 0000000..49e80b1
--- /dev/null
+++ b/web/app/configs/widget/whiteboard/whiteboard.widget.component.html
@@ -0,0 +1,18 @@
+<my-widget-config [widgetComponent]="this">
+    <ng-template #widgetParamsTemplate let-widget="widget">
+        <label class="label-block">
+            Whiteboard Name
+            <input type="text" class="form-control"
+                   placeholder="{{ defaultName }}"
+                   [(ngModel)]="widget.dimension.newName" name="widget-name-{{widget.id}}"
+                   [disabled]="isUpdating"/>
+        </label>
+        <label class="label-block">
+            Whiteboard URL
+            <input type="text" class="form-control"
+                   placeholder=""
+                   [(ngModel)]="widget.dimension.newUrl" name="widget-url-{{widget.id}}"
+                   [disabled]="isUpdating"/>
+        </label>
+    </ng-template>
+</my-widget-config>
diff --git a/web/app/configs/widget/whiteboard/whiteboard.widget.component.scss b/web/app/configs/widget/whiteboard/whiteboard.widget.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/web/app/configs/widget/whiteboard/whiteboard.widget.component.ts b/web/app/configs/widget/whiteboard/whiteboard.widget.component.ts
new file mode 100644
index 0000000..e10cd98
--- /dev/null
+++ b/web/app/configs/widget/whiteboard/whiteboard.widget.component.ts
@@ -0,0 +1,46 @@
+import { WidgetComponent } from "../widget.component";
+import { Component } from "@angular/core";
+import { EditableWidget, WIDGET_WHITEBOARD } from "../../../shared/models/widget";
+import * as url from "url";
+import { SessionStorage } from "../../../shared/SessionStorage";
+import { NameService } from "../../../shared/services/name.service";
+import { FE_WhiteBoardWidget } from "../../../shared/models/integration";
+
+@Component({
+    templateUrl: "whiteboard.widget.component.html",
+    styleUrls: ["whiteboard.widget.component.scss"],
+})
+export class WhiteboardWidgetComponent extends WidgetComponent {
+    private whiteBoardWidget: FE_WhiteBoardWidget = <FE_WhiteBoardWidget>SessionStorage.editIntegration;
+
+    constructor(private nameService: NameService) {
+        super(WIDGET_WHITEBOARD, "Whiteboard", "generic", "whiteboard", "boardName");
+    }
+    protected OnWidgetsDiscovered(widgets: EditableWidget[]): void {
+        console.log(widgets);
+        for (const widget of widgets) {
+            if (!widget.dimension.newUrl.startsWith("http://") && !widget.dimension.newUrl.startsWith("https://")) {
+                const parsedUrl = url.parse(widget.url, true);
+                const boardName = parsedUrl.query["boardName"];
+
+                // Set the new URL so that it unpacks correctly
+                widget.url = `https://dev-whiteboard.nordeck.net/?whiteboardid=${boardName}`;
+            }
+        }
+    }
+
+    protected OnNewWidgetPrepared(widget: EditableWidget): void {
+        const name = this.nameService.getHumanReadableName();
+
+        let template = "https://dev-whiteboard.nordeck.net/?whiteboardid=$roomId_$boardName";
+        if (this.whiteBoardWidget.options && this.whiteBoardWidget.options.defaultUrl) {
+            template = this.whiteBoardWidget.options.defaultUrl;
+        }
+
+        template = template.replace("$roomId", encodeURIComponent(SessionStorage.roomId));
+        template = template.replace("$boardName", encodeURIComponent(name));
+
+        widget.dimension.newUrl = template;
+        widget.dimension.newName = name;
+    }
+}