@chat21/chat21-web-widget 5.0.53-rc.2 → 5.0.53-rc.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.53-rc.3
+- added: html descriptions to index.html and index-dev.html
+- changed: script tag for style.css to link tag with rel="stylesheet"
+- changed: binding to tiledesk iframe from scr to srcdoc 
+- removed: base_script.html 
+- removed: jquery plugin
+- removed: relativeLinkResolution from forRoot in RooterModule
+
+
 ### 5.0.53-rc.2
 - added: angular 15 engine
 - added: custom tooltip directive

package/angular.json

@@ -46,7 +46,6 @@
             ],
             "scripts": [
               "src/assets/js/mqtt/4.2.6/mqtt.min.js",
-              "node_modules/jquery/dist/jquery.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js",
               "node_modules/popper.js/dist/umd/popper.min.js"
             ],
@@ -55,7 +54,8 @@
             "buildOptimizer": false,
             "allowedCommonJsDependencies": [
               "rxjs-compat",
-              "moment"
+              "moment",
+              "idb"
             ],
             "sourceMap": true,
             "optimization": false,
@@ -142,8 +142,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [

package/karma.conf.js

@@ -7,6 +7,7 @@ module.exports = function (config) {
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
+      require('karma-coverage'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.53-rc.2",
-  "license": "MIT License",
+  "version": "5.0.53-rc.3",
+  "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@angular/platform-browser": "^15.0.4",
     "@angular/platform-browser-dynamic": "^15.0.4",
     "@angular/router": "^15.0.4",
-    "@ctrl/ngx-emoji-mart": "^5.1.2",
+    "@ctrl/ngx-emoji-mart": "^7.1.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^4.0.0",
     "@popperjs/core": "^2.11.5",
@@ -38,7 +38,6 @@
     "file-saver": "^2.0.5",
     "firebase": "^8.6.7",
     "humanize-duration-ts": "^2.1.1",
-    "jquery": "^3.6.0",
     "marked": "^4.0.16",
     "moment": "^2.29.3",
     "ngx-logger": "^5.0.11",
@@ -62,12 +61,13 @@
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.20",
     "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "^2.2.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "4.8.4"
+    "typescript": "^4.8.4"
   }
 }

package/src/app/app-routing.module.ts

@@ -5,7 +5,7 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

package/src/assets/twp/index-dev.html

@@ -383,10 +383,10 @@
         }
     </script> -->
 
-    <meta property="og:title" content="Widget test page">
-    <meta property="og:description" content="">
+    <meta property="og:title" content="Try Tiledesk now!" />
+    <meta property="og:description" content="Qualify your leads to increase your sales faster. It's really easy to do it with the Tiledesk conversational form builder" />
+    <meta property="og:image" content="https://tiledesk.com/wp-content/uploads/2022/12/6029654-02-min.png" />
     <meta property="og:locale" content="en">
-    <meta property="og:image" content="">
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

package/src/assets/twp/index.html

@@ -217,10 +217,10 @@
         }
     </script> -->
 
-    <meta property="og:title" content="Widget test page">
-    <meta property="og:description" content="">
+    <meta property="og:title" content="Try Tiledesk now!" />
+    <meta property="og:description" content="Qualify your leads to increase your sales faster. It's really easy to do it with the Tiledesk conversational form builder" />
+    <meta property="og:image" content="https://tiledesk.com/wp-content/uploads/2022/12/6029654-02-min.png" />
     <meta property="og:locale" content="en">
-    <meta property="og:image" content="">
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
@@ -563,7 +563,7 @@
         <div class="b-agent-demo_powered_by">
             <a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;">
                 <span style="position: relative; top: 2px;">Powered by</span>
-                <img src="./tiledesk_widget_files/logo@2x-black.png">
+                <img src="./tiledesk_widget_files/logo@2x-black.png" alt="Tiledesk">
             </a>
         </div>
     </footer>

package/src/chat21-core/providers/abstract/notifications.service.ts

@@ -6,7 +6,7 @@ import { Injectable } from '@angular/core';
 export abstract class NotificationsService {
   
   private _tenant: string;
-  abstract BUILD_VERSION = environment.version
+  public BUILD_VERSION = environment.version
 
   public setTenant(tenant): void {
     this._tenant = tenant;

package/src/chat21-core/providers/firebase/firebase-notifications.ts

@@ -14,7 +14,7 @@ import { LoggerService } from '../abstract/logger.service';
 @Injectable()
 export class FirebaseNotifications extends NotificationsService {
     
-    public BUILD_VERSION: string;
+    // public BUILD_VERSION: string;
     private FCMcurrentToken: string;
     private userId: string;
     private tenant: string;

package/src/chat21-core/providers/mqtt/mqtt-notifications.ts

@@ -15,7 +15,7 @@ import { Chat21Service } from './chat-service';
 @Injectable()
 export class MQTTNotifications extends NotificationsService {
   
-  public BUILD_VERSION: string;
+  // public BUILD_VERSION: string;
   private FCMcurrentToken: string;
   private userId: string;
   private tenant: string;

package/src/launch.js

@@ -32,6 +32,7 @@ function loadIframe(tiledeskScriptBaseLocation) {
     var ifrm = document.createElement("iframe");
     ifrm.setAttribute("frameborder", "0");
     ifrm.setAttribute("border", "0");
+    ifrm.setAttribute("title", "Tiledesk Widget")
        
     var srcTileDesk = '<html lang="en">';
     srcTileDesk += '<head>';
@@ -46,7 +47,7 @@ function loadIframe(tiledeskScriptBaseLocation) {
     srcTileDesk += '<chat-root></chat-root>';
     srcTileDesk += '<script type="text/javascript" src="'+tiledeskScriptBaseLocation+'/runtime.js"></script>';
     srcTileDesk += '<script type="text/javascript" src="'+tiledeskScriptBaseLocation+'/polyfills.js"></script>';
-    srcTileDesk += '<script type="text/css" src="'+tiledeskScriptBaseLocation+'/styles.css"></script>';
+    srcTileDesk += '<link type="text/css" rel="stylesheet" href="'+tiledeskScriptBaseLocation+'/styles.css" media="all"></link>';
     srcTileDesk += '<script type="text/javascript" src="'+tiledeskScriptBaseLocation+'/vendor.js"></script>';
     srcTileDesk += '<script type="text/javascript" src="'+tiledeskScriptBaseLocation+'/main.js"></script>';
     srcTileDesk += '</body>';
@@ -163,11 +164,14 @@ function loadIframe(tiledeskScriptBaseLocation) {
 
     iDiv.appendChild(ifrm);
 
-    // ifrm.contentWindow.document.open();
-    ifrm.src = tiledeskScriptBaseLocation + '/base_script.html'
-    // ifrm.contentWindow.document.open();
-    // ifrm.contentWindow.document.write(srcTileDesk);
-    // ifrm.contentWindow.document.close();
+    if(tiledeskScriptBaseLocation.includes('localhost')){
+      ifrm.contentWindow.document.open();
+      ifrm.contentWindow.document.write(srcTileDesk);
+      ifrm.contentWindow.document.close();
+    }else {
+      ifrm.srcdoc = srcTileDesk
+    }
+   
 
 }
 

package/src/launch_old.js

@@ -0,0 +1,446 @@
+/** */
+ready(function() {
+    // console.log('DOM is ready, call initWidget');
+    if(!window.tileDeskAsyncInit){
+      initAysncEvents();
+    }
+    initWidget();
+});
+
+/** */
+function ready(callbackFunction){
+    if(document.readyState != 'loading')
+      callbackFunction()
+    else
+      document.addEventListener("DOMContentLoaded", callbackFunction)
+}
+       
+
+/** */
+function loadIframe(tiledeskScriptBaseLocation) {
+    var dev = window.location.hostname.includes('localhost')? true: false;
+
+    var containerDiv = document.createElement('div');
+    containerDiv.setAttribute('id','tiledesk-container');
+    containerDiv.classList.add("closed");
+    document.body.appendChild(containerDiv);
+    
+    var iDiv = document.createElement('div');
+    iDiv.setAttribute('id','tiledeskdiv');
+    containerDiv.appendChild(iDiv);
+
+    var ifrm = document.createElement("iframe");
+    ifrm.setAttribute("frameborder", "0");
+    ifrm.setAttribute("border", "0");
+    ifrm.setAttribute("title", "Tiledesk Widget")
+       
+    var srcTileDesk = '<html lang="en">';
+    srcTileDesk += '<head>';
+    srcTileDesk += '<meta charset="utf-8">';
+    srcTileDesk += '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
+    srcTileDesk += '<title>Tilechat Widget</title>';
+    srcTileDesk += '<base href="./">';
+    srcTileDesk += '<link rel="icon" type="image/x-icon" href="favicon.ico">';
+    srcTileDesk += '<link rel="stylesheet" type="text/css" href="' + tiledeskScriptBaseLocation +'/assets/styles/tiledesk_v1.scss" media="all">';
+    srcTileDesk += '</head>';
+    srcTileDesk += '<body>';
+    srcTileDesk += '<chat-root></chat-root>';
+    srcTileDesk += '<script type="text/javascript" src="'+tiledeskScriptBaseLocation+'/runtime.js"></script>';
+    srcTileDesk += '<script type="text/javascript" src="'+tiledeskScriptBaseLocation+'/polyfills.js"></script>';
+    srcTileDesk += '<link type="text/css" rel="stylesheet" href="'+tiledeskScriptBaseLocation+'/styles.css" media="all"></link>';
+    srcTileDesk += '<script type="text/javascript" src="'+tiledeskScriptBaseLocation+'/vendor.js"></script>';
+    srcTileDesk += '<script type="text/javascript" src="'+tiledeskScriptBaseLocation+'/main.js"></script>';
+    srcTileDesk += '</body>';
+    srcTileDesk += '</html>';
+    
+    ifrm.setAttribute('id','tiledeskiframe');
+    ifrm.setAttribute('tiledesk_context','parent');
+   
+    /** */
+    window.tiledesk.on('onInit', function(event_data) {
+        // console.log("launch onInit isopen", tiledeskScriptBaseLocation, window.tiledesk.angularcomponent.component.g.isOpen);
+        if (window.tiledesk.angularcomponent.component.g.isOpen) {
+            containerDiv.classList.add("open");
+            containerDiv.classList.remove("closed");
+            iDiv.classList.remove("callout");
+        } else {
+            containerDiv.classList.add("closed");
+            containerDiv.classList.remove("open");
+            iDiv.classList.remove("messagePreview");
+        }         
+    });
+    /** */
+    window.tiledesk.on('onOpen', function(event_data) {
+        containerDiv.classList.add("open");
+        containerDiv.classList.remove("closed");
+        iDiv.classList.remove("callout");
+        iDiv.classList.remove("messagePreview");
+    });
+    /** */
+    window.tiledesk.on('onClose', function(event_data) {
+        containerDiv.classList.add("closed");
+        containerDiv.classList.remove("open");
+    });
+
+    /** */
+    window.tiledesk.on('onOpenEyeCatcher', function(event_data) {
+        iDiv.classList.add("callout");
+    });
+    /** */
+    window.tiledesk.on('onClosedEyeCatcher', function(event_data) {
+        iDiv.classList.remove("callout");
+    });
+
+    /** */
+    window.tiledesk.on('onConversationUpdated', function(event_data) {
+        const messagePreview = window.tiledesk.angularcomponent.component.g.isOpenNewMessage
+        const isOpen = window.tiledesk.angularcomponent.component.g.isOpen
+        try {
+            if (!isOpen && messagePreview) {
+                iDiv.classList.add("messagePreview");
+                iDiv.classList.remove("callout");
+                // ----------------------------//
+            }  
+        } catch(er) {
+            console.error("onConversationUpdated > error: " + er);
+        }
+    });
+
+    window.tiledesk.on('onCloseMessagePreview', function(event_data) {
+        try {
+            iDiv.classList.remove("messagePreview");
+        } catch(er) {
+            console.error("onCloseMessagePreview > error: " + er);
+        }
+    });
+
+
+    /**** BEGIN EVENST ****/
+    /** */
+    window.tiledesk.on('onNewConversation', function(event_data) {
+        // console.log("test-custom-auth.html onNewConversation >>>",event_data);
+        const tiledeskToken = window.tiledesk.angularcomponent.component.g.tiledeskToken;
+        // console.log(">>>> tiledeskToken >>>> ",event_data.detail.appConfigs.apiUrl+event_data.detail.default_settings.projectid);
+        if(tiledeskToken) {
+          var httpRequest = createCORSRequest('POST', event_data.detail.appConfigs.apiUrl+event_data.detail.default_settings.projectid+'/events',true); //set async to false because loadParams must return when the get is complete
+          httpRequest.setRequestHeader('Content-type', 'application/json');
+          httpRequest.setRequestHeader('Authorization',tiledeskToken);
+          httpRequest.send(JSON.stringify({"name":"new_conversation","attributes": {"request_id":event_data.detail.newConvId, "department": event_data.detail.global.departmentSelected.id, "participants": event_data.detail.global.participants, "language": event_data.detail.global.lang, "subtype":"info", "fullname":event_data.detail.global.attributes.userFullname, "email":event_data.detail.global.attributes.userEmail, "attributes":event_data.detail.global.attributes}}));
+        }
+    });
+
+    /** @deprecated event */
+    window.tiledesk.on('onLoggedIn', function(event_data) {
+        // console.log("test-custom-auth.html onLoggedIn",event_data);
+        const tiledeskToken = window.tiledesk.angularcomponent.component.g.tiledeskToken;
+        // console.log("------------------->>>> tiledeskToken: ",window.tiledesk.angularcomponent.component.g);
+        if(tiledeskToken) {
+            var httpRequest = createCORSRequest('POST', event_data.detail.appConfigs.apiUrl+event_data.detail.default_settings.projectid+'/events',true); //set async to false because loadParams must return when the get is complete
+            httpRequest.setRequestHeader('Content-type','application/json');
+            httpRequest.setRequestHeader('Authorization',tiledeskToken);
+            httpRequest.send(JSON.stringify({"name":"logged_in","attributes": {"fullname":event_data.detail.global.attributes.userFullname, "email":event_data.detail.global.attributes.userEmail, "language": event_data.detail.global.lang, "attributes":event_data.detail.global.attributes}}));
+        }
+    });
+
+    /** */
+    window.tiledesk.on('onAuthStateChanged', function(event_data) {
+        // console.log("test-custom-auth.html onAuthStateChanged",event_data);
+        const tiledeskToken = window.tiledesk.angularcomponent.component.g.tiledeskToken;
+        // console.log("------------------->>>> tiledeskToken: ",window.tiledesk.angularcomponent.component.g);
+        if(tiledeskToken) {
+            var httpRequest = createCORSRequest('POST', event_data.detail.appConfigs.apiUrl+event_data.detail.default_settings.projectid+'/events',true); //set async to false because loadParams must return when the get is complete
+            httpRequest.setRequestHeader('Content-type','application/json');
+            httpRequest.setRequestHeader('Authorization',tiledeskToken);
+            httpRequest.send(JSON.stringify({"name":"auth_state_changed","attributes": {"user_id":event_data.detail.global.senderId, "isLogged":event_data.detail.global.isLogged, "event":event_data.detail.event, "subtype":"info", "fullname":event_data.detail.global.attributes.userFullname, "email":event_data.detail.global.attributes.userEmail, "language":event_data.detail.global.lang, "attributes":event_data.detail.global.attributes}}));  
+            httpRequest.onload = function(event) {
+              if(event.target && event.target.status === 401){
+                window.tiledesk.hide()
+                window.tiledesk.dispose()
+              }
+            } 
+          }
+    }); 
+    /**** END EVENST ****/
+
+    iDiv.appendChild(ifrm);
+
+    if(tiledeskScriptBaseLocation.includes('localhost')){
+      // ifrm.src = tiledeskScriptBaseLocation + '/base_script.html'
+        // buildIframeDOM(ifrm, tiledeskScriptBaseLocation)
+       ifrm.contentWindow.document.open();
+      ifrm.contentWindow.document.write(srcTileDesk);
+      ifrm.contentWindow.document.close();
+    }else {
+      ifrm.srcdoc = srcTileDesk
+    }
+    // ifrm.onload = function(ev){
+    //   const obj = {tiledeskSettings: window.tiledeskSettings}
+    //   ifrm.contentWindow.postMessage(obj, "*")
+    //   console.log('iframe contentwindowwww', ifrm.contentWindow)
+    //   // ifrm.contentWindow.tiledesk = window.tiledesk
+    // }
+    // ifrm.innerHTML = srcTileDesk
+    // ifrm.contentWindow.document.open();
+   
+
+}
+
+function buildIframeDOM(iframe, tiledeskScriptBaseLocation){
+
+  
+
+  var Idocument = iframe.contentDocument
+  console.log('iframeeee', Idocument)
+  var meta = Idocument.createElement('meta');
+  meta.setAttribute('charset', 'utf-8')
+  var meta_2 = Idocument.createElement('meta')
+  meta_2.setAttribute('name', 'viewport')
+  meta_2.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0')
+  var title = Idocument.createElement('title')
+  title.title = 'Tilechat Widget'
+  var base = Idocument.createElement('base')
+  base.setAttribute('href', './')
+  var link_1 = Idocument.createElement('link')
+  link_1.setAttribute('rel', 'icon')
+  link_1.setAttribute('type', 'image/x-icon')
+  link_1.setAttribute('href', 'favicon.ico')
+  var link_2 = Idocument.createElement('link')
+  link_2.setAttribute('rel', 'stylesheet')
+  link_2.setAttribute('type', 'text/css')
+  link_2.setAttribute('href', tiledeskScriptBaseLocation + '/assets/styles/tiledesk_v1.scss')
+  link_2.setAttribute('media','all')
+
+  
+  let head = Idocument.getElementsByTagName('head')[0]
+  head.appendChild(meta)
+  head.appendChild(meta_2)
+  head.appendChild(title)
+  head.appendChild(base)
+  head.appendChild(link_1)
+  head.appendChild(link_2)
+
+  var script_1 = Idocument.createElement('script')
+  script_1.setAttribute('type','text/javascript')
+  script_1.setAttribute('src',tiledeskScriptBaseLocation + '/runtime.js')
+  var script_2 = Idocument.createElement('script')
+  script_2.setAttribute('type','text/javascript')
+  script_2.setAttribute('src',tiledeskScriptBaseLocation + '/polyfills.js')
+  var link = Idocument.createElement('link')
+  link.setAttribute('type','text/css')
+  link.setAttribute('rel','stylesheet')
+  link.setAttribute('href',tiledeskScriptBaseLocation + '/styles.css')
+  link.setAttribute('media','all')
+  var script_4 = Idocument.createElement('script')
+  script_4.setAttribute('type','text/javascript')
+  script_4.setAttribute('src',tiledeskScriptBaseLocation + '/vendor.js')
+  var script_5 = Idocument.createElement('script')
+  script_5.setAttribute('type','text/javascript')
+  script_5.setAttribute('src',tiledeskScriptBaseLocation + '/main.js')
+
+  let body= Idocument.getElementsByTagName('body')[0]
+  body.appendChild(Idocument.createElement('chat-root'))
+  body.appendChild(script_1)
+  body.appendChild(script_2)
+  body.appendChild(link)
+  body.appendChild(script_4)
+  body.appendChild(script_5)
+}
+
+
+function initAysncEvents() {
+  console.log('INIT ASYNC EVENTS')
+
+  window.tileDeskAsyncInit = function() {  
+    // console.log('launch tiledeskAsyncInit:::', window.Tiledesk.q)
+    window.tiledesk.on('onLoadParams', function(event_data) {
+      if (window.Tiledesk && window.Tiledesk.q && window.Tiledesk.q.length>0) {
+        window.Tiledesk.q.forEach(f => {
+          if (f.length>=1) {
+            var functionName = f[0];
+            if (functionName==="onLoadParams") {
+              //CALLING ONLY FUNCTION 'onLoadParams'
+              if (f.length==2) {
+                var functionCallback = f[1];
+                if(typeof functionCallback === "function") {
+                  window.tiledesk.on(functionName, functionCallback); 
+                  functionCallback(event_data);
+                } else {
+                  console.error("initAysncEvents --> functionCallback is not a function.");
+                }
+              }   
+            }else if(functionName=='setParameter'){
+              //CALLING ONLY METHOD 'setParameter' AND CHECK IF IT HAS OBJECT ARG
+              if (f.length==2) {
+                var functionArgs = f[1];
+                if(typeof functionArgs === "object") {
+                  window.tiledesk[functionName](functionArgs);
+                } else {
+                  console.error("initAysncEvents --> functionArgs is not a object.");
+                }
+              }
+            }
+          }
+        });
+      }
+    });
+
+    window.tiledesk.on('onBeforeInit', function(event_data) {
+      if (window.Tiledesk && window.Tiledesk.q && window.Tiledesk.q.length>0) {
+        // console.log("w.q", window.Tiledesk.q);
+        window.Tiledesk.q.forEach(f => {
+          if (f.length>=1) {
+            var functionName = f[0];
+            if (functionName==="onLoadParams" || functionName==="setParameter") {
+              //SKIP FUNCTION WITH NAMES 'onLoadParams' AND METHOD 'setParameter'
+            } else if (functionName.startsWith("on")) {
+              // CALLING METHOD THAT STARTS WITH 'on'
+              if (f.length==2) {
+                var functionCallback = f[1];
+                if(typeof functionCallback === "function"){
+                  window.tiledesk.on(functionName, functionCallback); //potrei usare window.Tiledesk ?!?
+                  if (functionName==="onBeforeInit") {
+                      functionCallback(event_data)
+                  }
+                } else {
+                  console.error("functionCallback is not a function.");
+                }
+              }   
+            } else {
+              //CALLING REMAININGS METHOD and CHECK IF CONTAINS ARG TO PASS THROUGH THE METHOD
+              if (f.length==2) {
+                let args = f[1]
+                window.tiledesk[functionName](args);
+              } else {
+                window.tiledesk[functionName](); 
+              }
+            }
+
+          }   
+        });
+
+      }
+
+      // RICHIAMATO DOPO L'INIT DEL WIDGET
+      window.Tiledesk = function() {
+        if (arguments.length>=1) {
+          var functionName = arguments[0];
+          if (arguments.length==2) {
+              var functionCallback = arguments[1];
+          }
+          var methodOrProperty = window.tiledesk[functionName];
+          if(typeof methodOrProperty==="function"){            
+            return window.tiledesk[functionName](functionCallback);            
+          }else { //property
+            return window.tiledesk[functionName];
+          }
+        }
+      };
+
+    });
+  }
+}
+
+
+/**
+ * 
+ */
+function initWidget() {
+    var tiledeskroot = document.createElement('chat-root');
+    var tiledeskScriptLocation = document.getElementById("tiledesk-jssdk").src;
+    //var currentScript = document.currentScript;
+    //var tiledeskScriptLocation = '';
+    //setInterval(function(){
+        //tiledeskScriptLocation = currentScript.src;
+        var tiledeskScriptBaseLocation = tiledeskScriptLocation.replace("/launch.js","");
+        window.tiledesk = new function() {
+            //this.type = "macintosh";
+            this.tiledeskroot = tiledeskroot;
+            this.on = function (event_name, handler) {
+                tiledeskroot.addEventListener(event_name, handler);
+            };
+            this.getBaseLocation = function() {
+                return tiledeskScriptBaseLocation;
+            }
+        }
+
+        try {
+            window.tileDeskAsyncInit();
+        }catch(er) {
+            if (typeof window.tileDeskAsyncInit == "undefined") { 
+                console.log("tileDeskAsyncInit() doesn't exists");
+            } else {
+                console.log(er);
+            }
+        }
+        document.body.appendChild(tiledeskroot);
+        initCSSWidget(tiledeskScriptBaseLocation);
+        loadIframe(tiledeskScriptBaseLocation);
+    //},2000);
+}
+
+
+
+
+
+function initCSSWidget(tiledeskScriptBaseLocation) {
+    var cssId = 'iframeCss';  // you could encode the css path itself to generate id..
+    // if (!document.getElementById(cssId))
+    // {
+        var head  = document.getElementsByTagName('head')[0];
+        var link  = document.createElement('link');
+        link.id   = cssId;
+        link.rel  = 'stylesheet';
+        link.type = 'text/css';
+        link.href = tiledeskScriptBaseLocation+'/iframe-style.css';
+        link.media = 'all';
+        head.appendChild(link);
+    // }
+}
+
+
+//DEPRECATED
+function signInWithCustomToken() {
+    let json = JSON.stringify({
+        "id_project": "5b55e806c93dde00143163dd"
+    });
+	var httpRequest = createCORSRequest('POST', 'https://tiledesk-server-pre.herokuapp.com/auth/signinAnonymously',true); 
+    if (!httpRequest) {
+        throw new Error('CORS not supported');
+    }
+    httpRequest.setRequestHeader('Content-type','application/json');
+	  httpRequest.send(json);
+    httpRequest.onload = function() {
+      if (httpRequest.readyState === XMLHttpRequest.DONE) {
+        if (httpRequest.status === 200) {
+                    try {
+                        var response = JSON.parse(httpRequest.responseText);
+                        window.tiledesk.signInWithCustomToken(response);
+                    }
+                    catch(err) {
+                        console.error(err.message);
+                    }
+                    return true;
+        } else {
+            alert('There was a problem with the request.');
+        }
+      }
+   	};
+	httpRequest.onerror = function() {
+		console.error('There was an error!');
+        return false;
+	};
+}
+
+
+function createCORSRequest(method, url, async) {
+	var xhr = new XMLHttpRequest();
+	if ("withCredentials" in xhr) {
+		xhr.open(method, url, async);
+	} else if (typeof XDomainRequest != "undefined") {
+		xhr = new XDomainRequest();
+		xhr.open(method, url);
+	} else {
+		xhr = null;
+	}
+	return xhr;
+}

package/src/main.ts

@@ -3,6 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import 'zone.js'
 
 if (environment.production) {
   enableProdMode();

package/src/base_script.html

@@ -1,57 +0,0 @@
-<html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-        <title>Tilechat Widget</title>
-        <link rel="icon" type="image/x-icon" href="favicon.ico">
-        <script>
-            var tiledeskScriptBaseLocation = window.location.href.replace("/base_script.html","");
-            
-            var link_2 = document.createElement('link')
-            link_2.setAttribute('rel', 'stylesheet')
-            link_2.setAttribute('type', 'text/css')
-            link_2.setAttribute('href', tiledeskScriptBaseLocation + '/assets/styles/tiledesk_v1.scss')
-            link_2.setAttribute('media','all')
-
-            var script_1 = document.createElement('script')
-            script_1.setAttribute('type','text/javascript')
-            script_1.setAttribute('src',tiledeskScriptBaseLocation + '/runtime.js')
-            var script_2 = document.createElement('script')
-            script_2.setAttribute('type','text/javascript')
-            script_2.setAttribute('src',tiledeskScriptBaseLocation + '/polyfills.js')
-            var link = document.createElement('link')
-            link.setAttribute('type','text/css')
-            link.setAttribute('rel','stylesheet')
-            link.setAttribute('href',tiledeskScriptBaseLocation + '/styles.css')
-            link.setAttribute('media','all')
-            var script_4 = document.createElement('script')
-            script_4.setAttribute('type','text/javascript')
-            script_4.setAttribute('src',tiledeskScriptBaseLocation + '/vendor.js')
-            var script_5 = document.createElement('script')
-            script_5.setAttribute('type','text/javascript')
-            script_5.setAttribute('src',tiledeskScriptBaseLocation + '/main.js')
-
-            
-            window.addEventListener("load", (event) => {
-
-                let head = document.getElementsByTagName('head')[0]
-                head.appendChild(link_2)
-
-                let body = document.getElementsByTagName('body')[0]
-                body.appendChild(script_1)
-                body.appendChild(script_2)
-                body.appendChild(link)
-                body.appendChild(script_4)
-                body.appendChild(script_5)
-            });
-        </script>
-    </head> 
-    <body>
-        <chat-root></chat-root>
-        <!-- <script type="text/javascript" src="http://localhost:4202/runtime.js"></script>
-        <script type="text/javascript" src="http://localhost:4202/polyfills.js"></script>
-        <script type="text/css" src="http://localhost:4202/styles.css"></script>
-        <script type="text/javascript" src="http://localhost:4202/vendor.js"></script>
-        <script type="text/javascript" src="http://localhost:4202/main.js"></script> -->
-    </body>
-</html>