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

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.59-rc.3
+- bug-fixed: if mobileMarginX or MobileMarginY is set, widget do not fit on fullscreen once is opened
+
 ### 5.0.59-rc.2
 - added: handler for buttons in last-message component
 - changed: tooltip custom directive

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.59-rc.2",
+  "version": "5.0.59-rc.3",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.ts

@@ -1,3 +1,4 @@
+import { ScriptService } from './../chat21-core/providers/scripts/script.service';
 import { TYPE_DIRECT } from './../chat21-core/utils/constants';
 /** ANGULAR MODULES */
 import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
@@ -113,6 +114,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     private appStorageService: AppStorageService,
     private translatorService: TranslatorService,
     private translateService: CustomTranslateService,
+    private scriptService: ScriptService,
     public chatManager: ChatManager,
     private tiledeskRequestsService: TiledeskRequestsService,
     public tiledeskAuthService: TiledeskAuthService,
@@ -123,220 +125,222 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     public imageRepoService: ImageRepoService,
     public typingService: TypingService,
     public presenceService: PresenceService,
-    public uploadService: UploadService
+    public uploadService: UploadService 
   ){}
 
-  ngOnInit(): void {
-    this.logger.info('[APP-CONF]---------------- ngOnInit: APP.COMPONENT ---------------- ')
-    this.initWidgetParamiters();
-  }
+    ngOnInit(): void {
+        this.logger.info('[APP-CONF]---------------- ngOnInit: APP.COMPONENT ---------------- ')
+        this.initWidgetParamiters();
+    }
 
-  ngAfterViewInit(): void {
-    this.logger.info('[APP-CONF]---------------- ngAfterViewInit: APP.COMPONENT ---------------- ')
-    this.ngZone.run(() => {
-        const that = this;
-        const subChangedConversation = this.conversationsHandlerService.conversationChanged.subscribe((conversation) => {
-            // that.ngZone.run(() => {
-            if (conversation) {
-                this.onImageLoaded(conversation)
-                this.onConversationLoaded(conversation)
+    ngAfterViewInit(): void {
+        this.logger.info('[APP-CONF]---------------- ngAfterViewInit: APP.COMPONENT ---------------- ')
+        this.ngZone.run(() => {
+            const that = this;
+            const subChangedConversation = this.conversationsHandlerService.conversationChanged.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (conversation) {
+                    this.onImageLoaded(conversation)
+                    this.onConversationLoaded(conversation)
 
-                if(conversation.recipient === this.g.senderId && isUserBanned(conversation)){
-                    that.disposeWidget();
+                    if(conversation.recipient === this.g.senderId && isUserBanned(conversation)){
+                        that.disposeWidget();
+                        return;
+                    }
+    
+                    if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
+                        that.manageTabNotification();
+                    }
+
+                    if (that.g.isOpen === true) {
+                        that.g.setParameter('displayEyeCatcherCard', 'none');
+
+                        this.logger.debug('[APP-COMP] obsChangeConversation ::: ', conversation);
+                        if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
+                            return;
+                        }
+
+                    } else {
+                        // if(conversation.is_new && isJustRecived(this.g.startedAt.getTime(), conversation.timestamp)){
+                        //widget closed
+                        if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
+                            that.lastConversation = conversation;
+                            that.g.isOpenNewMessage = true;
+                            that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
+                        }
+                        
+
+                        let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
+                        that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
+                        // }
+                    }
+
+                    that.triggerOnConversationUpdated(conversation);
+                } else {
+                    this.logger.debug('[APP-COMP] oBSconversationChanged null: errorrr')
                     return;
                 }
- 
-                if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
-                    that.manageTabNotification();
-                }
+                
+                // });
+            });
+            this.subscriptions.push(subChangedConversation);
 
-                if (that.g.isOpen === true) {
+            const subAddedConversation = this.conversationsHandlerService.conversationAdded.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (that.g.isOpen === true && conversation) {
                     that.g.setParameter('displayEyeCatcherCard', 'none');
-
-                    this.logger.debug('[APP-COMP] obsChangeConversation ::: ', conversation);
+                    that.triggerOnConversationUpdated(conversation);
+                    that.logger.debug('[APP-COMP] obsAddedConversation ::: ', conversation);
                     if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
                         return;
                     }
-
-                } else {
-                    // if(conversation.is_new && isJustRecived(this.g.startedAt.getTime(), conversation.timestamp)){
-                    //widget closed
-                    if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
+                    if (conversation.is_new) {
+                        that.manageTabNotification()
+                        // this.soundMessage(); 
+                    }
+                    if(this.g.isOpen === false){
                         that.lastConversation = conversation;
                         that.g.isOpenNewMessage = true;
-                        that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
                     }
-                    
+                } else {
+                    //widget closed
 
                     let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
                     that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
-                    // }
                 }
-
-                that.triggerOnConversationUpdated(conversation);
-            } else {
-                this.logger.debug('[APP-COMP] oBSconversationChanged null: errorrr')
-                return;
-            }
-            
-            // });
-        });
-        this.subscriptions.push(subChangedConversation);
-
-        const subAddedConversation = this.conversationsHandlerService.conversationAdded.subscribe((conversation) => {
-            // that.ngZone.run(() => {
-            if (that.g.isOpen === true && conversation) {
-                that.g.setParameter('displayEyeCatcherCard', 'none');
-                that.triggerOnConversationUpdated(conversation);
-                that.logger.debug('[APP-COMP] obsAddedConversation ::: ', conversation);
-                if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
-                    return;
+                // that.manageTabNotification()
+                // });
+                if(conversation){
+                    this.onImageLoaded(conversation)
+                    this.onConversationLoaded(conversation)
                 }
-                if (conversation.is_new) {
-                    that.manageTabNotification()
-                    // this.soundMessage(); 
+                
+            });
+            this.subscriptions.push(subAddedConversation);
+
+            const subAddedArchivedConversations = this.archivedConversationsService.archivedConversationAdded.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (conversation) {
+                    that.triggerOnConversationUpdated(conversation);
+                    this.onImageLoaded(conversation)
+                    this.onConversationLoaded(conversation)
                 }
-                if(this.g.isOpen === false){
-                    that.lastConversation = conversation;
-                    that.g.isOpenNewMessage = true;
+                // });
+            });
+            this.subscriptions.push(subAddedArchivedConversations);
+
+            const subRemovedArchivedConversations = this.archivedConversationsService.archivedConversationRemoved.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (conversation) {
+                    this.isConversationArchived = false;
+                    that.triggerOnConversationUpdated(conversation);
                 }
-            } else {
-                //widget closed
+                // });
+            });
+            this.subscriptions.push(subRemovedArchivedConversations);
 
-                let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
-                that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
-            }
-            // that.manageTabNotification()
-            // });
-            if(conversation){
-                this.onImageLoaded(conversation)
-                this.onConversationLoaded(conversation)
-            }
-            
         });
-        this.subscriptions.push(subAddedConversation);
+        this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
+        this.tiledeskAuthService.initialize(this.appConfigService.getConfig().apiUrl)
+        this.tiledeskRequestsService.initialize(this.appConfigService.getConfig().apiUrl, this.g.projectid)
+        this.messagingAuthService.initialize();
+        this.chatManager.initialize();
+        this.uploadService.initialize();
+    }
 
-        const subAddedArchivedConversations = this.archivedConversationsService.archivedConversationAdded.subscribe((conversation) => {
-            // that.ngZone.run(() => {
-            if (conversation) {
-                that.triggerOnConversationUpdated(conversation);
-                this.onImageLoaded(conversation)
-                this.onConversationLoaded(conversation)
-            }
-            // });
-        });
-        this.subscriptions.push(subAddedArchivedConversations);
+    private initWidgetParamiters(){
+        const that = this;
+        const obsSettingsService = this.globalSettingsService.obsSettingsService.subscribe((resp) => {
+            if(resp){
+
+                // /** INIT  */
+                this.logger.setLoggerConfig(this.g.isLogEnabled, this.g.logLevel)
+                this.tabTitle = this.g.windowContext.window.document.title
+                this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
+                this.logger.debug('[APP-COMP] check if token is passed throw url: ', this.g.jwt);
+                /**CHECK IF JWT IS IN URL PARAMETERS */
+                if (this.g.jwt) {
+                    // logging in with custom token from url
+                    // add JWY token to localstorage and authenticate with it           this.logger.debug('[APP-COMP] token from url. isShown:', this.g.isShown, 'autostart:', this.g.autoStart)
+                    this.logger.debug('[APP-COMP]  ----------------  logging in with custom token from url ---------------- ');
+                    //   this.g.autoStart = false;
+                    const storedTiledeskToken = this.appStorageService.getItem('tiledeskToken')
+                    storedTiledeskToken === this.g.jwt? null: this.appStorageService.setItem('tiledeskToken', this.g.jwt);
+                    this.g.tiledeskToken = this.g.jwt;
+                    // this.signInWithCustomToken(this.g.jwt) // moved to authenticate() in else(tiledeskToken)
+                }
 
-        const subRemovedArchivedConversations = this.archivedConversationsService.archivedConversationRemoved.subscribe((conversation) => {
-            // that.ngZone.run(() => {
-            if (conversation) {
-                this.isConversationArchived = false;
-                that.triggerOnConversationUpdated(conversation);
+                /** INIT LABELS TRANSLATIONS */
+                this.translatorService.initI18n().then((result) => {
+                    this.logger.debug('[APP-COMP] »»»» APP-COMPONENT.TS initI18n result', result);
+                    const browserLang = this.translatorService.getLanguage();
+                    // moment.locale(browserLang)
+                    dayjs.locale(browserLang)
+                    this.translatorService.translate(this.g);
+                }).then(() => {
+                    /** INIT  */
+                    that.initAll();
+                    /** TRIGGER ONBEFORE INIT */
+                    that.triggerOnBeforeInit();
+                    /** AUTH */
+                    that.setAuthSubscription();
+                    /** SCRIPT LOAD */
+                    that.loadCustomScript(this.appConfigService.getConfig())
+                })
+        
             }
-            // });
         });
-        this.subscriptions.push(subRemovedArchivedConversations);
-
-    });
-    this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
-    this.tiledeskAuthService.initialize(this.appConfigService.getConfig().apiUrl)
-    this.tiledeskRequestsService.initialize(this.appConfigService.getConfig().apiUrl, this.g.projectid)
-    this.messagingAuthService.initialize();
-    this.chatManager.initialize();
-    this.uploadService.initialize();
-  }
-
-  private initWidgetParamiters(){
-    const that = this;
-    const obsSettingsService = this.globalSettingsService.obsSettingsService.subscribe((resp) => {
-        if(resp){
-
-            // /** INIT  */
-            this.logger.setLoggerConfig(this.g.isLogEnabled, this.g.logLevel)
-            this.tabTitle = this.g.windowContext.window.document.title
-            this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
-            this.logger.debug('[APP-COMP] check if token is passed throw url: ', this.g.jwt);
-            /**CHECK IF JWT IS IN URL PARAMETERS */
-            if (this.g.jwt) {
-                // logging in with custom token from url
-                // add JWY token to localstorage and authenticate with it           this.logger.debug('[APP-COMP] token from url. isShown:', this.g.isShown, 'autostart:', this.g.autoStart)
-                this.logger.debug('[APP-COMP]  ----------------  logging in with custom token from url ---------------- ');
-                //   this.g.autoStart = false;
-                const storedTiledeskToken = this.appStorageService.getItem('tiledeskToken')
-                storedTiledeskToken === this.g.jwt? null: this.appStorageService.setItem('tiledeskToken', this.g.jwt);
-                this.g.tiledeskToken = this.g.jwt;
-                // this.signInWithCustomToken(this.g.jwt) // moved to authenticate() in else(tiledeskToken)
-            }
-
-            /** INIT LABELS TRANSLATIONS */
-            this.translatorService.initI18n().then((result) => {
-                this.logger.debug('[APP-COMP] »»»» APP-COMPONENT.TS initI18n result', result);
-                const browserLang = this.translatorService.getLanguage();
-                // moment.locale(browserLang)
-                dayjs.locale(browserLang)
-                this.translatorService.translate(this.g);
-            }).then(() => {
-                /** INIT  */
-                that.initAll();
-                /** TRIGGER ONBEFORE INIT */
-                that.triggerOnBeforeInit();
-                /** AUTH */
-                that.setAuthSubscription();
-            })
-      
-        }
-    });
-    this.subscriptions.push(obsSettingsService);
-    this.globalSettingsService.initWidgetParamiters(this.g, this.el);
+        this.subscriptions.push(obsSettingsService);
+        this.globalSettingsService.initWidgetParamiters(this.g, this.el);
 
-    // SET AUDIO
-    this.audio = new Audio();
-    this.audio.src = this.g.baseLocation + URL_SOUND_LIST_CONVERSATION;
-    this.audio.load();
-  }
+        // SET AUDIO
+        this.audio = new Audio();
+        this.audio.src = this.g.baseLocation + URL_SOUND_LIST_CONVERSATION;
+        this.audio.load();
+    }
 
-  private initAll() {
-    this.addComponentToWindow(this.ngZone);
+    private initAll() {
+        this.addComponentToWindow(this.ngZone);
 
-    //INIT TRIGGER-HANDLER
-    this.triggerHandler.setElement(this.el)
-    this.triggerHandler.setWindowContext(this.g.windowContext)
+        //INIT TRIGGER-HANDLER
+        this.triggerHandler.setElement(this.el)
+        this.triggerHandler.setWindowContext(this.g.windowContext)
 
-    // /** TRANSLATION LOADER: */
-    // //  this.translatorService.translate(this.g);
-    // this.translatorService.initI18n().then((result) => {
-    //     this.g.wdLog(['»»»» APP-COMPONENT.TS initI18n result', result]);
-    //     this.translatorService.translate(this.g);
-    // });
+        // /** TRANSLATION LOADER: */
+        // //  this.translatorService.translate(this.g);
+        // this.translatorService.initI18n().then((result) => {
+        //     this.g.wdLog(['»»»» APP-COMPONENT.TS initI18n result', result]);
+        //     this.translatorService.translate(this.g);
+        // });
 
-    /** SET ATTRIBUTES */
-    const attributes = this.setAttributesFromStorageService();
-    if (attributes) {
-        this.g.attributes = attributes;
-    }
-    this.setStyleMap()
+        /** SET ATTRIBUTES */
+        const attributes = this.setAttributesFromStorageService();
+        if (attributes) {
+            this.g.attributes = attributes;
+        }
+        this.setStyleMap()
 
-    // ------------------------------- //
+        // ------------------------------- //
 
-    // ------------------------------- //
-    /**
-     * INIZIALIZE GLOBALS :
-     * create settings object used in trigger
-     * set isMobile
-     * set attributes
-    */
-    this.g.initialize();
-    // ------------------------------- //
+        // ------------------------------- //
+        /**
+         * INIZIALIZE GLOBALS :
+         * create settings object used in trigger
+         * set isMobile
+         * set attributes
+        */
+        this.g.initialize();
+        // ------------------------------- //
 
-    this.removeFirebasewebsocketFromLocalStorage();
-    // this.triggerLoadParamsEvent();
-    // this.addComponentToWindow(this.ngZone); // forse dovrebbe stare prima di tutti i triggers
+        this.removeFirebasewebsocketFromLocalStorage();
+        // this.triggerLoadParamsEvent();
+        // this.addComponentToWindow(this.ngZone); // forse dovrebbe stare prima di tutti i triggers
 
-    this.initLauncherButton();
-    this.triggerLoadParamsEvent(); // first trigger
-    //this.setAvailableAgentsStatus();
+        this.initLauncherButton();
+        this.triggerLoadParamsEvent(); // first trigger
+        //this.setAvailableAgentsStatus();
 
-  }
+    }
 
     // ========= begin:: SUBSCRIPTIONS ============//
     private async setAuthSubscription(){
@@ -2064,6 +2068,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.el.nativeElement.style.setProperty('--button-in-msg-font-size', this.g.buttonFontSize)
     }
 
+
+    private loadCustomScript(config){
+        if(config.hasOwnProperty("globalRemoteJSSrc")){
+          this.scriptService.buildScriptArray(config['globalRemoteJSSrc'])
+        }
+    }
+
     // ========= begin:: DESTROY ALL SUBSCRIPTIONS ============//
     /** elimino tutte le sottoscrizioni */
     ngOnDestroy() {

package/src/app/app.module.ts

@@ -62,10 +62,11 @@ import { TranslateModule } from '@ngx-translate/core';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { LoggerModule, NGXLogger, NgxLoggerLevel } from "ngx-logger";
 
-//DIRECTIVES
+//DIRECTIVES-PIPES
 import { HtmlEntitiesEncodePipe } from './pipe/html-entities-encode.pipe';
 import { MarkedPipe } from './pipe/marked.pipe';
 import { SafeHtmlPipe } from './pipe/safe-html.pipe';
+import { TooltipDirective } from 'src/app/directives/tooltip.directive';
 
 //LOGGER SERVICES
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
@@ -128,7 +129,7 @@ import { WaitingService } from './providers/waiting.service';
 import { StarRatingWidgetService } from './providers/star-rating-widget.service';
 import { LikeUnlikeComponent } from './component/message/like-unlike/like-unlike.component';
 import { Rules } from './utils/rules';
-import { TooltipDirective } from 'src/app/directives/tooltip.directive';
+import { ScriptService } from 'src/chat21-core/providers/scripts/script.service';
 
 
 const appInitializerFn = (appConfig: AppConfigService, logger: NGXLogger) => {
@@ -381,7 +382,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     TranslatorService,
     CustomTranslateService,
     Triggerhandler,
-    WaitingService
+    WaitingService,
+    ScriptService
   ],
   bootstrap: [AppComponent]
 })

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html

@@ -1,7 +1,7 @@
 <!-- LOGO-->
 <div id="hiddenFooter" *ngIf="!hideTextAreaContent && poweredBy" class="fade-in-bottom" 
     [class.hideTextReply]="hideTextReply">
-    <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy"></div>
+    <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy" (click)="managePoweredBy($event)"></div>
 </div>
 
 <!-- TEXTAREA + ICONS: conv active-->

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -596,4 +596,47 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
+
+
+  managePoweredBy(event: Event){
+    event.stopPropagation();
+    this.segmentLogoClick()
+    let target = (event.target as Element) || (event.srcElement as Element) || (event.currentTarget as Element)
+    if(target.parentElement.tagName === 'A' && target.parentElement.hasAttribute('href')){
+     window.open(target.parentElement.getAttribute('href'), '_blank')
+    }
+  }
+
+
+  private segmentLogoClick(){
+    let that = this
+    if(window['analytics']){
+      try {
+        window['analytics'].page("Widget Conversation Page, LogoClick", {});
+      } catch (err) {
+        this.logger.error('Event:Signed In [page] error', err);
+      }
+  
+      try {
+        window['analytics'].identify(that.senderId, {
+          name: that.userFullname,
+          email: that.userEmail,
+          logins: 5,
+        });
+      } catch (err) {
+        this.logger.error('Event:LogoClick [identify] error', err);
+      }
+      // Segments
+      try {
+        window['analytics'].track('LogoClick', {
+          "username": that.userFullname,
+          "userId": that.userEmail,
+          "attributes": that.attributes
+        });
+      } catch (err) {
+        this.logger.error('Event:LogoClick [track] error', err);
+      }
+    }
+  }
+
 }

package/src/app/component/home/home.component.html

@@ -144,7 +144,7 @@
     <!-- FOOTER -->
     <div class="c21-footer fade-in-bottom-footer">
         <div id="c21-powered-by" (mouseover)="hover=true" (mouseleave)="hover=false">
-            <div tabindex="-1" class="c21-powered-by" [innerHTML]="g.poweredBy"></div>
+            <div tabindex="-1" class="c21-powered-by" [innerHTML]="g.poweredBy" (click)="managePoweredBy($event)"></div>
             <!-- <div class="build_version">{{g.BUILD_VERSION}}</div> -->
         </div>
         <chat-menu-options *ngIf="!hideSettings"

package/src/app/component/home/home.component.ts

@@ -1,3 +1,4 @@
+import { TiledeskAuthService } from './../../../chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { ConversationModel } from '../../../chat21-core/models/conversation';
@@ -47,6 +48,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
   
   constructor(
     public g: Globals,
+    private tiledeskAuthService : TiledeskAuthService,
     private customTranslateService: CustomTranslateService,
   ) {
 
@@ -85,6 +87,49 @@ export class HomeComponent implements OnInit, AfterViewInit {
   }
 
 
+  managePoweredBy(event: Event){
+    event.stopPropagation();
+    this.segmentLogoClick()
+    let target = (event.target as Element) || (event.srcElement as Element) || (event.currentTarget as Element)
+    if(target.parentElement.tagName === 'A' && target.parentElement.hasAttribute('href')){
+     window.open(target.parentElement.getAttribute('href'), '_blank')
+    }
+  }
+
+
+  private segmentLogoClick(){
+    let that = this
+    let user = this.tiledeskAuthService.getCurrentUser()
+    if(window['analytics']){
+      try {
+        window['analytics'].page("Widget Home Page, LogoClick", {});
+      } catch (err) {
+        this.logger.error('Event:Signed In [page] error', err);
+      }
+  
+      try {
+        window['analytics'].identify(user.uid, {
+          name: user.firstname + ' ' + user.lastname,
+          email: user.email,
+          logins: 5,
+        });
+      } catch (err) {
+        this.logger.error('Event:LogoClick [identify] error', err);
+      }
+      // Segments
+      try {
+        window['analytics'].track('LogoClick', {
+          "username": user.firstname + ' ' + user.lastname,
+          "userId": user.uid,
+          "attributes": that.g.attributes
+        });
+      } catch (err) {
+        this.logger.error('Event:LogoClick [track] error', err);
+      }
+    }
+  }
+
+
   
 
 

package/src/app/providers/global-settings.service.ts

@@ -369,6 +369,7 @@ export class GlobalSettingsService {
             this.globals.isMobile? marginX= this.globals.mobileMarginX: marginX = this.globals.marginX
             divTiledeskiframe.style.right =  marginX;
         }
+        
         if (this.globals.isMobile) {
             divTiledeskiframe.style.bottom =  this.globals.mobileMarginY
         } else {

package/src/app/utils/globals.ts

@@ -587,6 +587,18 @@ export class Globals {
     } else if(!isOpen && chat21conversationsEL){
       chat21conversationsEL.classList.remove('isMobile')
     }
+
+
+    //customize position for 'tiledeskdiv' for mobile
+    if(isOpen && this.isMobile && divTiledeskWidget){
+      divTiledeskWidget.style.right = '0px'
+      divTiledeskWidget.style.bottom = '0px'
+    } else if(!isOpen && this.isMobile && divTiledeskWidget){
+      divTiledeskWidget.style.bottom = this.marginY
+      this.align === 'left'?  divTiledeskWidget.style.left = this.mobileMarginX : divTiledeskWidget.style.right = this.mobileMarginX; 
+    }
+
+
   }
 
   setWidgetPreviewContainerSize(width: number, height: number){

package/src/chat21-core/providers/scripts/script.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ScriptService } from './script.service';
+
+describe('ScriptService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ScriptService = TestBed.get(ScriptService);
+    expect(service).toBeTruthy();
+  });
+});

package/src/chat21-core/providers/scripts/script.service.ts

@@ -0,0 +1,71 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ScriptService {
+
+  private scriptList: Array<{name: string, loaded: boolean, src: string}> = []
+  private logger: LoggerService = LoggerInstance.getInstance();
+  
+  constructor(
+    public http: HttpClient,
+  ) { }
+
+  buildScriptArray(globalRemoteJSSrc: string){
+    this.logger.log('[SCRIPT-SERVICE] buildScriptArray globalRemoteJSSrc ', globalRemoteJSSrc);
+    if(!this.isEmpty(globalRemoteJSSrc)){
+      var scriptArray = globalRemoteJSSrc.split(",")
+
+      let count = 0;
+      scriptArray.forEach(element => {
+        count = count + 1;
+        this.scriptList.push({name: element.split('/').pop(), loaded: false, src: element})
+      });
+      this.logger.log('[SCRIPT-SERVICE] buildScriptArray ', this.scriptList);
+      this.load()
+       
+    }
+  }
+
+  load() {
+    this.logger.log('[SCRIPT-SERV] load ...scripts ', this.scriptList)
+    var promises: any[] = [];
+    this.scriptList.forEach((script) => promises.push(this.loadScript(script)));
+    return Promise.all(promises).catch((err) => {
+        // log that I have an error, return the entire array;
+        this.logger.error('A promise failed to resolve', err);
+
+    });
+  }
+
+
+  loadScript(currentScript){
+    this.logger.log('[SCRIPT-SERVICE] load script:', currentScript);
+    return new Promise((resolve, reject) => {
+      //resolve if already loaded
+      if (currentScript.loaded) {
+        resolve({ script: currentScript.name, loaded: true, status: 'Already Loaded' });
+      }
+      else {
+        //load script
+        let script = document.createElement('script')
+        script.type = 'text/javascript';
+        script.src = currentScript.src;
+        script.onload = () => {
+            currentScript.loaded = true;
+            resolve({ script: name, loaded: true, status: 'Loaded' });
+        }
+        script.onerror = (error: any) => resolve({ script: currentScript.name, loaded: false, status: 'Loaded' });
+        document.getElementsByTagName('head')[0].appendChild(script);
+      }
+    });
+  }
+
+  isEmpty(url: string) {
+    return (url === undefined || url == null || url.length <= 0) ? true : false;
+  }
+}