diff --git a/angular.json b/angular.json
index 0172a8d..87f81cd 100644
--- a/angular.json
+++ b/angular.json
@@ -32,9 +32,68 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "./node_modules/prismjs/themes/prism-okaidia.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "./node_modules/prismjs/prism.js",
+              "./node_modules/prismjs/components/prism-typescript.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ]
+            }
+          }
+        },
+        "build_ghpages": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "baseHref": "/ngx-mailto/",
+            "deployUrl": "/ngx-mailto/",
+            "outputPath": "dist/ngx-mailto-demo/browser",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "./node_modules/prismjs/themes/prism-okaidia.css",
+              "src/styles.scss"
+            ],
+            "scripts": [
+              "./node_modules/prismjs/prism.js",
+              "./node_modules/prismjs/components/prism-typescript.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -174,6 +233,19 @@
             "production": {}
           }
         },
+        "prerender_ghpages": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "browserTarget": "ngx-mailto-demo:build_ghpages:production",
+            "serverTarget": "ngx-mailto-demo:server:production",
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {}
+          }
+        },
         "deploy": {
           "builder": "angular-cli-ghpages:deploy",
           "options": {}
@@ -225,4 +297,4 @@
   "cli": {
     "analytics": "ea3f6664-7a5f-4480-9efa-1f3058c7c180"
   }
-}
\ No newline at end of file
+}
diff --git a/projects/ngx-mailto/src/lib/mailto.ts b/projects/ngx-mailto/src/lib/mailto.ts
new file mode 100644
index 0000000..e5d37aa
--- /dev/null
+++ b/projects/ngx-mailto/src/lib/mailto.ts
@@ -0,0 +1,14 @@
+/**
+ * @author Anthony Nahas
+ * @since 25.11.2020
+ * @version 1.0
+ *
+ * All properties are optional
+ */
+export interface Mailto {
+  receiver?: string | string[];
+  subject?: string;
+  cc?: string | string[];
+  bcc?: string | string[];
+  body?: string;
+}
diff --git a/projects/ngx-mailto/src/lib/ngx-mailto.component.spec.ts b/projects/ngx-mailto/src/lib/ngx-mailto.component.spec.ts
deleted file mode 100644
index 5b509a7..0000000
--- a/projects/ngx-mailto/src/lib/ngx-mailto.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NgxMailtoComponent } from './ngx-mailto.component';
-
-describe('NgxMailtoComponent', () => {
-  let component: NgxMailtoComponent;
-  let fixture: ComponentFixture<NgxMailtoComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ NgxMailtoComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NgxMailtoComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/projects/ngx-mailto/src/lib/ngx-mailto.component.ts b/projects/ngx-mailto/src/lib/ngx-mailto.component.ts
deleted file mode 100644
index bba943a..0000000
--- a/projects/ngx-mailto/src/lib/ngx-mailto.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-ngx-mailto',
-  template: `
-    <p>
-      ngx-mailto works!
-    </p>
-  `,
-  styles: [
-  ]
-})
-export class NgxMailtoComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/projects/ngx-mailto/src/lib/ngx-mailto.module.ts b/projects/ngx-mailto/src/lib/ngx-mailto.module.ts
index 3126091..ef63fbf 100644
--- a/projects/ngx-mailto/src/lib/ngx-mailto.module.ts
+++ b/projects/ngx-mailto/src/lib/ngx-mailto.module.ts
@@ -1,12 +1,16 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NgxMailtoComponent } from './ngx-mailto.component';
-
+import { NgxMailtoPipe } from './ngx-mailto.pipe';
 
 
 @NgModule({
-  declarations: [NgxMailtoComponent],
-  imports: [
+  declarations: [NgxMailtoPipe],
+  exports: [
+    NgxMailtoPipe
   ],
-  exports: [NgxMailtoComponent]
+  imports: [
+    CommonModule
+  ]
 })
-export class NgxMailtoModule { }
+export class NgxMailtoModule {
+}
diff --git a/projects/ngx-mailto/src/lib/ngx-mailto.pipe.spec.ts b/projects/ngx-mailto/src/lib/ngx-mailto.pipe.spec.ts
new file mode 100644
index 0000000..0d6611b
--- /dev/null
+++ b/projects/ngx-mailto/src/lib/ngx-mailto.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { NgxMailtoPipe } from './ngx-mailto.pipe';
+
+describe('NgxMailtoPipe', () => {
+  it('create an instance', () => {
+    const pipe = new NgxMailtoPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/projects/ngx-mailto/src/lib/ngx-mailto.pipe.ts b/projects/ngx-mailto/src/lib/ngx-mailto.pipe.ts
new file mode 100644
index 0000000..615f409
--- /dev/null
+++ b/projects/ngx-mailto/src/lib/ngx-mailto.pipe.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Mailto } from './mailto';
+import { NgxMailtoService } from './ngx-mailto.service';
+
+@Pipe({
+  name: 'mailto'
+})
+export class NgxMailtoPipe implements PipeTransform {
+
+  constructor(private ngxMailtoService: NgxMailtoService) {
+  }
+
+  transform(value: Mailto): string | void {
+    console.log('transform', value);
+    return this.ngxMailtoService.compose(value);
+  }
+
+}
diff --git a/projects/ngx-mailto/src/lib/ngx-mailto.service.ts b/projects/ngx-mailto/src/lib/ngx-mailto.service.ts
index 6e751bf..10a7a78 100644
--- a/projects/ngx-mailto/src/lib/ngx-mailto.service.ts
+++ b/projects/ngx-mailto/src/lib/ngx-mailto.service.ts
@@ -1,9 +1,73 @@
-import { Injectable } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { Mailto } from './mailto';
 
 @Injectable({
   providedIn: 'root'
 })
 export class NgxMailtoService {
 
-  constructor() { }
+  // tslint:disable-next-line:ban-types
+  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
+  }
+
+  isClientSide(): boolean {
+    return isPlatformBrowser(this.platformId);
+  }
+
+  compose(value: Mailto): string | void {
+    console.log('compose -->', value);
+
+    let link = 'mailto:';
+
+    if (!value) {
+      return link;
+    }
+    const properties = [];
+    if (this.isClientSide()) {
+      if (value?.receiver) {
+        if (typeof value?.receiver === 'string') {
+          link += value?.receiver;
+        } else {
+          link += value?.receiver.join();
+        }
+      }
+      if (value?.cc) {
+        if (typeof value?.cc === 'string') {
+          // link += `?cc=${value?.cc}`;
+          properties.push(`cc=${value?.cc}`);
+        } else {
+          // link += `?cc=${value?.cc.join()}`;
+          properties.push(`cc=${value?.cc.join()}`);
+        }
+      }
+      if (value?.bcc) {
+        if (typeof value?.bcc === 'string') {
+          // link += `?bcc=${value?.bcc}`;
+          properties.push(`bcc=${value?.bcc}`);
+        } else {
+          // link += `?bcc=${value?.bcc.join()}`;
+          properties.push(`bcc=${value?.bcc.join()}`);
+        }
+      }
+      if (value?.subject) {
+        // link += `?subject=${value?.subject}`;
+        properties.push(`subject=${encodeURIComponent(value?.subject)}`);
+      }
+      if (value?.body) {
+        // link += `?body=${value?.body}`;
+        properties.push(`body=${encodeURIComponent(value?.body)}`);
+      }
+      if (properties.length > 0) {
+        link += `?${properties.join('&')}`;
+      }
+      return link;
+    }
+  }
+
+  open(mailto: Mailto): void {
+    if (this.isClientSide()) {
+      window.location.href = this.compose(mailto) as string;
+    }
+  }
 }
diff --git a/projects/ngx-mailto/src/public-api.ts b/projects/ngx-mailto/src/public-api.ts
index 57535d1..8720455 100644
--- a/projects/ngx-mailto/src/public-api.ts
+++ b/projects/ngx-mailto/src/public-api.ts
@@ -3,5 +3,5 @@
  */
 
 export * from './lib/ngx-mailto.service';
-export * from './lib/ngx-mailto.component';
+export * from './lib/ngx-mailto.pipe';
 export * from './lib/ngx-mailto.module';
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ccae88a..13ce830 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -535,6 +535,8 @@ <h2>Usage</h2>
 
     <button class="try-me" mat-raised-button color="primary" (click)="open()">Try Me!</button>
 
+    <markdown src="assets/md/e1.md"></markdown>
+
     <p>For more info, please read the official readme - see the links above GITHUB - DOCS - NPM</p>
 
     <!--  </div>-->
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1d111b4..1d6c8f3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,3 +1,4 @@
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -8,6 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MarkdownModule } from 'ngx-markdown';
 import { NgxMailtoModule } from '../ngx-mailto/ngx-mailto.module';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -19,6 +21,8 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    MarkdownModule.forRoot(),
+    HttpClientModule,
     AppRoutingModule,
     ReactiveFormsModule,
     FormsModule,
diff --git a/src/assets/md/e1.md b/src/assets/md/e1.md
new file mode 100644
index 0000000..4af958f
--- /dev/null
+++ b/src/assets/md/e1.md
@@ -0,0 +1,29 @@
+```html
+<button class="try-me" mat-raised-button color="primary" (click)="open()">Try Me!</button>
+```
+
+```typescript
+
+ emails: string[] = ['your_email@domain.de'];
+  cc: string[] = [];
+  bcc: string[] = [];
+  subject!: string;
+  body!: string;
+
+  mailto: Mailto = {
+    receiver: this.emails,
+    cc: this.cc,
+    bcc: this.bcc,
+    subject: undefined,
+    body: undefined
+  };
+
+ constructor(private mailtoService: NgxMailtoService) {
+  }
+
+
+open(): void {
+    this.mailtoService.open(this.mailto);
+  }
+
+```