@chat21/chat21-web-widget 5.1.0-rc22 → 5.1.0-rc24

package/CHANGELOG.md

@@ -6,6 +6,12 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.0-rc24
+- **added**: size tiledeskSettings property
+
+# 5.1.0-rc23
+- **added**: hideHeaderConversation tiledeskSettings property
+
 # 5.1.0-rc22
 - **changed**: footer UI if fullscreenMode is enabled
 - **changed**: buttons alignment if fullscreenMode is enabled

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0-rc22",
+  "version": "5.1.0-rc24",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.scss

@@ -515,16 +515,6 @@ chat-root {
             border-radius: 16px;
         }
 
-        .chat21-fullscreen {
-            width: 100%;
-            height: 100%;
-            right: 0px;
-            left: 0px;
-            bottom: 0px;
-            border-radius: 0px;
-            max-height: none;
-        }
-
 
         /***************************
         ******** PAGE MODAL ********
@@ -596,7 +586,7 @@ chat-root {
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         position: relative;
         margin: 0;
         padding: 0;
@@ -617,7 +607,7 @@ chat-root {
 
         .c21-header-container{
             position: relative;
-            height: 52px;
+            height: 100%;
             width: 100%;
             margin: 0 auto;
 
@@ -688,7 +678,7 @@ chat-root {
     }
     .c21-body {
         position: absolute;
-        top: 52px;
+        top: var(--chat-header-height);
         bottom: 0;
         left: 0;
         right: 0;

package/src/app/app.component.ts

@@ -2122,7 +2122,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
         this.el.nativeElement.style.setProperty('--button-in-msg-font-family', this.g.fontFamily)
         
-
+        this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
     }
 
 

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

@@ -8,6 +8,7 @@
 
     <!-- HEADER -->
     <chat-conversation-header
+        *ngIf="!g?.hideHeaderConversation"
         [idConversation]= "conversationWith"
         [senderId]="senderId"
         [soundEnabled]="g?.soundEnabled"
@@ -19,6 +20,7 @@
         [hideSignOutOptionMenu]="(!g?.singleConversation || !g?.showLogoutOption)"
         [hideChatDetailOptionMenu]="(!g?.isDevMode)"
         [fullscreenMode]="g?.fullscreenMode"
+        [size]="g?.size"
         [stylesMap]="stylesMap"
         [translationMap]="translationMapHeader"
         [widgetTitle]="g?.project?.widgetTitle"

package/src/app/component/conversation-detail/conversation/conversation.component.scss

@@ -13,34 +13,36 @@
     bottom: var(--chat-footer-height) !important
 }
 
-:host-context(#chat21-conversations.full-screen-mode){
-    --button-in-msg-padding: 10px 16px;
-    #chat21-footer{
-        left: 20%;
-        right: 20%;
-    }
-
-    chat-conversation-content ::ng-deep{
-        .attachment_container,
-        .buttons-wrapper {
-            justify-content: flex-start;
-        }
-
-        .button-in-message{
-            padding: 14px 22px !important
+@media(min-width:688px){
+    :host-context(#chat21-conversations.full-screen-mode){
+        --button-in-msg-padding: 10px 16px;
+        #chat21-footer{
+            left: 20%;
+            right: 20%;
         }
-
-    }
-
-    chat-conversation-footer ::ng-deep {
-        .textarea-container {
-            padding: 8px 24px;
-            background-color: var(--chat-footer-background-color);
-            border-radius: 28px;
+    
+        chat-conversation-content ::ng-deep{
+            .attachment_container,
+            .buttons-wrapper {
+                justify-content: flex-start;
+            }
+    
+            .button-in-message{
+                padding: 14px 22px !important
+            }
+    
         }
-        #hiddenFooter,
-        #emoji-mart-container {
-            bottom: calc(100% + 10px)
+    
+        chat-conversation-footer ::ng-deep {
+            .textarea-container {
+                padding: 8px 24px;
+                background-color: var(--chat-footer-background-color);
+                border-radius: 28px;
+            }
+            #hiddenFooter,
+            #emoji-mart-container {
+                bottom: calc(100% + 10px)
+            }
         }
     }
 }

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

@@ -221,7 +221,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CLOSE',
       'MAXIMIZE',
       'MINIMIZE',
-      'FULLSCREEN',
+      'CENTER',
       'CLOSE_CHAT',
       'RESTART',
       'LOGOUT',
@@ -1020,9 +1020,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     //this.g.setParameter('activeConversation', null, false);
     /** remove Min/Max/fullscreen css classes */
     var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
-    tiledeskDiv.classList.remove('increaseSize')
-    tiledeskDiv.classList.remove('decreaseSize')
-    tiledeskDiv.classList.remove('top')
+    tiledeskDiv.classList.remove('max-size')
+    tiledeskDiv.classList.remove('min-size')
+    tiledeskDiv.classList.remove('top-size')
 
     this.onCloseWidget.emit();
   }
@@ -1073,20 +1073,21 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     // this.hideTextAreaContent = true
   }
   /** CALLED BY: conv-header component */
-  onWidgetSizeChange(mode){
+  onWidgetSizeChange(mode: 'min' | 'max' | 'top'){
     var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
+    this.g.size = mode 
     if(mode==='max'){
-      tiledeskDiv.classList.add('increaseSize')
-      tiledeskDiv.classList.remove('decreaseSize')
-      tiledeskDiv.classList.remove('top')
+      tiledeskDiv.classList.add('max-size')
+      tiledeskDiv.classList.remove('min-size')
+      tiledeskDiv.classList.remove('top-size')
     }else if(mode==='min'){
-      tiledeskDiv.classList.add('decreaseSize')
-      tiledeskDiv.classList.remove('increaseSize')
-      tiledeskDiv.classList.remove('top')
+      tiledeskDiv.classList.add('min-size')
+      tiledeskDiv.classList.remove('max-size')
+      tiledeskDiv.classList.remove('top-size')
     }else if(mode=== 'top'){
-      tiledeskDiv.classList.add('top')
-      tiledeskDiv.classList.remove('increaseSize')
-      tiledeskDiv.classList.remove('decreaseSize')
+      tiledeskDiv.classList.add('top-size')
+      tiledeskDiv.classList.remove('max-size')
+      tiledeskDiv.classList.remove('min-size')
 
     }
     this.isMenuShow = false;
@@ -1307,7 +1308,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   private onIncreaseWith(){
     try{
       const tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
-      tiledeskDiv.classList.add('increaseSize')
+      tiledeskDiv.classList.add('max-size')
       const chat21conversations = document.getElementById('chat21-conversations')
       chat21conversations.style.borderRadius = '16px'
       // tiledeskDiv.style.width = '696px'
@@ -1320,8 +1321,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   private restoreDefaultWidgetSize(){
     try{
       const tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
-      tiledeskDiv.classList.remove('increaseSize')
-      tiledeskDiv.classList.remove('decreaseSize')
+      tiledeskDiv.classList.remove('max-size')
+      tiledeskDiv.classList.remove('min-size')
       // tiledeskDiv.style.width = '376px'
       // tiledeskDiv.style.maxHeight = '620px'
     }catch(e){

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

@@ -123,7 +123,7 @@
     </div> -->
     
     <!-- ICON MAXIMIZE -->
-    <div class="c21-header-button c21-right" *ngIf="heightStatus==='min' && !fullscreenMode" (click)="onChangeSize('max')">
+    <div class="c21-header-button c21-right" *ngIf="size === 'min' && !fullscreenMode" (click)="onChangeSize('max')">
         <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
             <path d="M6.49001 8.30999L3.69 11.11V9.40999C3.69 8.93999 3.31 8.55999 2.84 8.55999C2.37 8.55999 1.99001 8.93999 1.99001 9.40999V14.01H6.59C7.06 14.01 7.44 13.63 7.44 13.16C7.44 12.69 7.06 12.31 6.59 12.31H4.89L7.69 9.50999L6.49001 8.30999ZM9.41 1.98999C8.94 1.98999 8.56001 2.36999 8.56001 2.83999C8.56001 3.30999 8.94 3.68999 9.41 3.68999H11.11L8.31001 6.48999L9.51 7.68999L12.31 4.88999V6.58999C12.31 7.05999 12.69 7.43999 13.16 7.43999C13.63 7.43999 14.01 7.05999 14.01 6.58999V1.98999H9.41Z" fill="currentColor"></path>
@@ -132,7 +132,7 @@
         <span class="label-menu-item">{{ translationMap?.get('MAXIMIZE') }}</span>
     </div>
     <!-- ICON MINIMIZE -->
-    <div class="c21-header-button c21-right" *ngIf="heightStatus==='max' || heightStatus==='top' || fullscreenMode" (click)="onChangeSize('min')">
+    <div class="c21-header-button c21-right" *ngIf="(size==='max' || size==='top') && !fullscreenMode" (click)="onChangeSize('min')">
         <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
             <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85" fill="currentColor"></path>
@@ -140,17 +140,17 @@
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('MINIMIZE') }}</span>
     </div>
-
     <!-- ICON TOP -->
-    <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus!=='top' && !fullscreenMode" (click)="onChangeSize('top')">
+    <div class="c21-header-button c21-right" *ngIf="size!=='top' && !fullscreenMode" (click)="onChangeSize('top')">
         <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
-            <path fill="currentColor" d="M6.5,8.3l-2.8,2.8v-1.7c0-.5-.4-.9-.9-.9s-.8.4-.8.9v4.6h4.6c.5,0,.8-.4.8-.9s-.4-.8-.8-.8h-1.7l2.8-2.8-1.2-1.2ZM9.4,2c-.5,0-.8.4-.8.8s.4.9.8.9h1.7l-2.8,2.8,1.2,1.2,2.8-2.8v1.7c0,.5.4.8.8.8s.9-.4.9-.8V2h-4.6Z"/>
-            <path fill="currentColor" d="M8.3,9.5l2.8,2.8h-1.7c-.5,0-.9.4-.9.9s.4.8.9.8h4.6v-4.6c0-.5-.4-.8-.9-.8s-.8.4-.8.8v1.7l-2.8-2.8-1.2,1.2ZM2,6.5c0,.5.4.8.8.8s.9-.4.9-.8v-1.7l2.8,2.8,1.2-1.2-2.8-2.8h1.7c.5,0,.8-.4.8-.8s-.4-.9-.8-.9H2v4.6Z"/>
-            <title id="altIconTitle">{{ translationMap?.get('FULLSCREEN') }}</title>
+            <path fill="currentColor" d="M3.7,7.6L2.5,6.4C2.2,6,2.2,5.5,2.5,5.2s0.9-0.4,1.2-0.1L7,8.4l-3.3,3.3c-0.4,0.4-0.8,0.3-1.1,0s-0.4-0.9-0.1-1.2l1.2-1.2 H1.5l0-1.7H3.7z"/>
+            <path fill="currentColor" d="M13.3,7.6l1.2-1.2c0.4-0.4,0.3-0.8,0-1.1s-0.9-0.4-1.2-0.1L10,8.4l3.3,3.3c0.4,0.4,0.8,0.3,1.1,0s0.4-0.9,0.1-1.2l-1.2-1.2 h2.2l0-1.7H13.3z"/>
+            <path fill="currentColor" d="M8.5,14.5L8.5,14.5c-0.5,0-0.9-0.4-0.9-0.8V3.3c0-0.5,0.4-0.8,0.8-0.8h0c0.5,0,0.8,0.4,0.8,0.8v10.4 C9.4,14.2,9,14.5,8.5,14.5z"/>
+            <title id="altIconTitle">{{ translationMap?.get('CENTER') }}</title>
         </svg>
-        <span class="label-menu-item">{{ translationMap?.get('FULLSCREEN') }}</span>
-    </div> -->
+        <span class="label-menu-item">{{ translationMap?.get('CENTER') }}</span>
+    </div>
 
     <!-- ICON LOGOUT -->
     <div class="c21-header-button c21-right"  *ngIf="!hideSignOutOptionMenu" (click)="signOut()">

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

@@ -23,6 +23,7 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   @Input() typingLocation: string;
   @Input() isTrascriptDownloadEnabled: boolean;
   @Input() fullscreenMode: boolean;
+  @Input() size: 'min' | 'max' | 'top';
   @Input() hideCloseConversationOptionMenu: boolean;
   @Input() hideHeaderCloseButton: boolean;
   @Input() hideHeaderBackButton: boolean;
@@ -104,10 +105,9 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
     this.onMenuOptionClick.emit(HEADER_MENU_OPTION.LOGOUT)
   }
   /**
-   * @param status : string 'max' || 'min'
+   * @param status : string 'max' || 'min' || 'top'
    */
   onChangeSize(status){
-    this.heightStatus = status
     if(status === 'min') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MINIMIZE)
     if(status === 'max') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MAXIMIZE)
     if(status === 'top') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.TOP)

package/src/app/component/form/prechat-form/prechat-form.component.scss

@@ -6,7 +6,7 @@
         .c21-header {
             overflow: hidden;
             width: 100%;
-            height: 52px;
+            height: var(--chat-header-height);
             .c21-header-button {
                 .c21-close-button.c21-small {
                     width: 31px;

package/src/app/component/list-all-conversations/list-all-conversations.component.scss

@@ -15,7 +15,7 @@
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         position: relative;
         margin: 0;
         padding: 0;
@@ -64,7 +64,7 @@
 
         .c21-header-container{
             position: relative;
-            height: 52px;
+            height: 100%;
             width: 100%;
             margin: 0 auto;
 

package/src/app/component/selection-department/selection-department.component.scss

@@ -12,7 +12,7 @@
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         .c21-header-button {
             .c21-close-button.c21-small {
                 width: 31px;

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

@@ -760,13 +760,19 @@ export class GlobalSettingsService {
         TEMP = tiledeskSettings['fullscreenMode'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fullscreenMode:: ', TEMP);
         if (TEMP !== undefined) {
-            globals.fullscreenMode = TEMP;
+            globals.fullscreenMode = (TEMP === true) ? true : false;
             // globals.setParameter('fullscreenMode', TEMP);
         }
         TEMP = tiledeskSettings['hideHeaderCloseButton'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderCloseButton:: ', TEMP);
         if (TEMP !== undefined) {
-            globals.hideHeaderCloseButton = TEMP;
+            globals.hideHeaderCloseButton = (TEMP === true) ? true : false;
+            // globals.setParameter('hideHeaderCloseButton', TEMP);
+        }
+        TEMP = tiledeskSettings['hideHeaderConversation'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderCloseButton:: ', TEMP);
+        if (TEMP !== undefined) {
+            globals.hideHeaderConversation = (TEMP === true) ? true : false;
             // globals.setParameter('hideHeaderCloseButton', TEMP);
         }
         TEMP = tiledeskSettings['themeColor'];
@@ -909,7 +915,7 @@ export class GlobalSettingsService {
             globals.hideSettings = (TEMP === true) ? true : false;;
         }
         TEMP = tiledeskSettings['isLogEnabled'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > logLevel:: ', TEMP]);
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > isLogEnabled:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.isLogEnabled = TEMP;
         }
@@ -958,7 +964,7 @@ export class GlobalSettingsService {
             globals.fontFamily = TEMP + ',' + globals.fontFamily;
         }
         TEMP = tiledeskSettings['fontFamilySource'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamily:: ', TEMP]);
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamilySource:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.fontFamilySource = TEMP;
         }
@@ -1007,7 +1013,7 @@ export class GlobalSettingsService {
             globals.nativeRating = (TEMP === true) ? true : false;
         }
         TEMP = tiledeskSettings['showInfoMessage'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showBubbleInfoMessage:: ', TEMP]);
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showInfoMessage:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.showInfoMessage = TEMP.split(',').map(key => { return key.trim()});
         }
@@ -1050,7 +1056,7 @@ export class GlobalSettingsService {
             globals.telegramUsername = TEMP;
         }
         TEMP = tiledeskSettings['fileUploadAccept'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > telegramUsername:: ', TEMP]);
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fileUploadAccept:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.fileUploadAccept = TEMP;
         } 
@@ -1090,9 +1096,14 @@ export class GlobalSettingsService {
             globals.showEmojiFooterButton = (TEMP === true) ? true : false;
         } 
         TEMP = tiledeskSettings['showAudioRecorderFooterButton'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showEmojiFooterButton:: ', TEMP]);
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showAudioRecorderFooterButton:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.showAudioRecorderFooterButton = (TEMP === true) ? true : false;
+        }
+        TEMP = tiledeskSettings['size'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > size:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.size = TEMP;
         } 
     }
 
@@ -1510,6 +1521,11 @@ export class GlobalSettingsService {
             globals.hideHeaderCloseButton = stringToBoolean(TEMP);
         }
 
+        TEMP = getParameterByName(windowContext, 'tiledesk_hideHeaderConversation');
+        if (TEMP) {
+            globals.hideHeaderConversation = stringToBoolean(TEMP);
+        }
+
         TEMP = getParameterByName(windowContext, 'tiledesk_themeColor');
         if (TEMP) {
             const themecolor = stringToBoolean(TEMP);
@@ -1830,6 +1846,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.showEmojiFooterButton = stringToBoolean(TEMP);
         }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_size');
+        if (TEMP) {
+            globals.size = TEMP;
+        }
         
     }
 

package/src/app/sass/_variables.scss

@@ -28,6 +28,8 @@
 
     --bkg-color-info-message: rgba(24, 119, 242, 0.1);
 
+    --chat-header-height: 52px;
+    
     --chat-footer-height: 64px;
     --chat-footer-logo-height: 30px;
     --chat-footer-border-radius: 16px;

package/src/app/utils/globals.ts

@@ -135,7 +135,6 @@ export class Globals {
   userEmail: string;
   widgetTitle: string;
   fullscreenMode: boolean;
-  hideHeaderCloseButton: boolean;
   themeColor: string;
   themeColorOpacity: number;
   themeForegroundColor: string;
@@ -161,6 +160,8 @@ export class Globals {
   baloonShape: string;
   isLogEnabled: boolean;
   openExternalLinkButton: boolean;
+  hideHeaderConversation: boolean
+  hideHeaderCloseButton: boolean;
   hideHeaderConversationOptionsMenu: boolean;
   hideCloseConversationOptionMenu: boolean;
   hideSettings: boolean;
@@ -223,6 +224,8 @@ export class Globals {
   allowedOnSpecificUrlList: Array<string> // *******  new ********
 
   fontFamilySource: string; // *******  new ********
+
+  size: 'min' | 'max' | 'top'; // *******  new ********
   constructor(
   ) { }
 
@@ -245,156 +248,160 @@ export class Globals {
     // ============ BEGIN: SET EXTERNAL PARAMETERS ==============//
     this.baseLocation = 'https://widget.tiledesk.com/v2';
     this.autoStart = true;
-    this.startHidden = false;
     /** start Authentication and startUI */
-    this.isShown = true;
+    this.startHidden = false;
     /** show/hide all widget -> js call: showAllWidget */
-    this.isOpen = false;
+    this.isShown = true;
     /** show/hide window widget -> js call: hideAllWidget */
-    this.startFromHome = true;
+    this.isOpen = false;
     /** start from Home or Conversation */
-    this.isOpenPrechatForm = true;
+    this.startFromHome = true;
     /** check open/close modal prechatform if g.preChatForm is true  */
-    this.isOpenStartRating = false;
+    this.isOpenPrechatForm = true;
     /** show/hide all rating chat */
-    this.projectid = '';
+    this.isOpenStartRating = false;
     /** The TileDesk project id. Find your TileDesk ProjectID in the
-    TileDesk Dashboard under the Widget menu. */
-    this.preChatForm = false;
+     TileDesk Dashboard under the Widget menu. */
+    this.projectid = '';
     /** You can require customers to enter information like name and email
     before sending a chat message by enabling the Pre-Chat form. Permitted
     values: true, false. The default value is false. */
-    this.align = '';
+    this.preChatForm = false;
     /** if it is true, the chat window is automatically open when the
-    widget is loaded. Permitted values: true, false. Default value : false */
-    this.calloutTimer = -1;
+     widget is loaded. Permitted values: true, false. Default value : false */
+    this.align = '';
     /** Proactively open the chat windows to increase the customer engagement.
     Permitted values: -1 (Disabled), 0 (Immediatly) or a positive integer value.
     For exmaple: 5 (After 5 seconds), 10 (After 10 seconds). */
-    this.calloutTitle = '';
+    this.calloutTimer = -1;
     /** title box callout */
-    this.calloutMsg = '';
+    this.calloutTitle = '';
     /** stato callout (shown only first time) */
-    this.calloutStaus = true;
+    this.calloutMsg = '';
     /** message box callout */
-    this.userFullname = '';
+    this.calloutStaus = true;
     /** userFullname: Current user fullname. Set this parameter to specify
     the visitor fullname. */
-    this.userEmail = '';
+    this.userFullname = '';
     /** Current user email address. Set this parameter to specify the visitor
     email address.  */
-    this.widgetTitle = '';
+    this.userEmail = '';
     /** Set the widget title label shown in the widget header. Value type : string.
     The default value is Tiledesk. */
-    this.dynamicWaitTimeReply = true;  
+    this.widgetTitle = '';
     /** The user can decide whether or not to share the 
-     * average response time of his team (if 'dynamicWaitTimeReply' is 
-     * false the WAITING_TIME_NOT_FOUND will always be displayed) 
-     * is set to true for backward compatibility with old projects */
-    this.hideHeaderCloseButton = false;
-    /** Hide the close button in the widget header. Permitted values: true,
-    false. The default value is false. */
-    this.fullscreenMode = false;
+    * average response time of his team (if 'dynamicWaitTimeReply' is 
+    * false the WAITING_TIME_NOT_FOUND will always be displayed) 
+    * is set to true for backward compatibility with old projects */
+    this.dynamicWaitTimeReply = true;  
+
     /** if it is true, the chat window is open in fullscreen mode. Permitted
     values: true, false. Default value : false */
-    this.themeColor = convertColorToRGBA('#2a6ac1', 100);
+    this.fullscreenMode = false;
     /** allows you to change the main widget's color
     (color of the header, color of the launcher button,
     other minor elements). Permitted values: Hex color
     codes, e.g. #87BC65 and RGB color codes, e.g. rgb(135,188,101) */
-    this.themeColorOpacity = 100
+    this.themeColor = convertColorToRGBA('#2a6ac1', 100);
     /**allows you to change opacity in background headers component 
-     * Permitted values: [0..1] */
-    this.themeForegroundColor = convertColorToRGBA('#ffffff', 100);
+    * Permitted values: [0..1] */
+    this.themeColorOpacity = 100
     /** allows you to change text and icons' color.
     Permitted values: Hex color codes, e.g. #425635 and RGB color
     codes, e.g. rgb(66,86,53) */
-    this.allowTranscriptDownload = false;
+    this.themeForegroundColor = convertColorToRGBA('#ffffff', 100);
     /** allows the user to download the chat transcript. The download button appears
     when the chat is closed by the operator. Permitter values: true, false.
     Default value: false */
-    this.poweredBy = BRAND_BASE_INFO.POWERED_BY;
+    this.allowTranscriptDownload = false;
     /** link nel footer widget */
-    this.logoChat = BRAND_BASE_INFO.LOGO_CHAT;
+    this.poweredBy = BRAND_BASE_INFO.POWERED_BY;
     /** url img logo */
-    this.marginX = '20px';
+    this.logoChat = BRAND_BASE_INFO.LOGO_CHAT;
     /** set margin left or rigth widget  */
-    this.marginY = '20px';
+    this.marginX = '20px';
     /** set margin bottom widget */
-    this.mobileMarginX = '0px';
+    this.marginY = '20px';
     /** set margin left or rigth widget for mobile */
-    this.mobileMarginY = '0px';
+    this.mobileMarginX = '0px';
     /** set margin bottom widget for mobile*/
-    this.launcherWidth = '60px'
+    this.mobileMarginY = '0px';
     /** set launcher width widget  */
-    this.launcherHeight = '60px'
+    this.launcherWidth = '60px'
     /** set launcher height widget  */
-    this.baloonImage='';
+    this.launcherHeight = '60px'
     /** set launcher baloon widget image: require SVG url  */
-    this.baloonShape = '50%';
+    this.baloonImage='';
     /** set launcher balon widget shape: can set corner by corner   */
-    this.isLogEnabled = false;
+    this.baloonShape = '50%';
     // this.parameters['isLogEnabled'] = false;
-    this.openExternalLinkButton = true;
+    this.isLogEnabled = false;
+    /** Hide the header conversation Permitted values: true,
+    false. The default value is false. */
+    this.hideHeaderConversation= false;
+    /** Hide the close button in the widget header. Permitted values: true,
+    false. The default value is false. */
+    this.hideHeaderCloseButton = false;
     /** enable to hide/show upper-right header conversation options menu */
-    this.hideHeaderConversationOptionsMenu = false;
+    this.openExternalLinkButton = true;
     /** enable to close a conversation from upper-right header menu  */
-    this.hideCloseConversationOptionMenu = false;
+    this.hideHeaderConversationOptionsMenu = false;
     /** enable to hide/show options menu in conversation detail header */
-    this.hideSettings = false;
+    this.hideCloseConversationOptionMenu = false;
     /** enable to hide/show options menu in home component */
-    this.filterByRequester = false;
+    this.hideSettings = false;
     /** show conversations with conversation.attributes.requester_id == user.uid */
-    this.persistence = 'local';
+    this.filterByRequester = false;
     /** set the auth persistence */
-    this.preChatFormJson = [{name: "userFullname", type:"text", mandatory:true, label:"LABEL_FIELD_NAME"},{name:"userEmail", type:"text", mandatory:true, regex:"/^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)+$/", label:"LABEL_FIELD_EMAIL", errorLabel:"LABEL_ERROR_FIELD_EMAIL"}]
+    this.persistence = 'local';
     /** set the preChatForm Json as default if preChatFormCustomFieldsEnabled is false or not exist */
-    this.bubbleSentBackground = convertColorToRGBA('#2a6ac1', 100); //'#62a8ea'
+    this.preChatFormJson = [{name: "userFullname", type:"text", mandatory:true, label:"LABEL_FIELD_NAME"},{name:"userEmail", type:"text", mandatory:true, regex:"/^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)+$/", label:"LABEL_FIELD_EMAIL", errorLabel:"LABEL_ERROR_FIELD_EMAIL"}]
     /** set the background of bubble sent message */
-    this.bubbleSentTextColor = convertColorToRGBA('#ffffff', 100); //'#ffffff'
+    this.bubbleSentBackground = convertColorToRGBA('#2a6ac1', 100); //'#62a8ea'
     /** set the text color of bubble sent message */
-    this.bubbleReceivedBackground= convertColorToRGBA('#f0f2f7', 100); //#f7f7f7;
+    this.bubbleSentTextColor = convertColorToRGBA('#ffffff', 100); //'#ffffff'
     /** set the background of bubble received message */
-    this.bubbleReceivedTextColor = convertColorToRGBA('#06132b', 100); //#1a1a1a
+    this.bubbleReceivedBackground= convertColorToRGBA('#f0f2f7', 100); //#f7f7f7;
     /** set the text color of bubble received message */
-    this.fontSize = '1.4em'
+    this.bubbleReceivedTextColor = convertColorToRGBA('#06132b', 100); //#1a1a1a
     /** set the text size of bubble messages */
-    this.fontFamily = "'Roboto','Google Sans', Helvetica, Arial, sans-serif"
+    this.fontSize = '1.4em'
     /** set the text family of bubble messages */
-    this.buttonFontSize = '15px'
+    this.fontFamily = "'Roboto','Google Sans', Helvetica, Arial, sans-serif"
     /** set the text size of attachment-buttons */
-    this.buttonBackgroundColor = convertColorToRGBA('#ffffff', 100)
+    this.buttonFontSize = '15px'
     /** set the backgroundColor of attachment-buttons */
-    this.buttonTextColor = convertColorToRGBA('#2a6ac1', 100)
+    this.buttonBackgroundColor = convertColorToRGBA('#ffffff', 100)
     /** set the text color of attachment-buttons */
+    this.buttonTextColor = convertColorToRGBA('#2a6ac1', 100)
+    /** set the text size of attachment-buttons */
     this.buttonHoverBackgroundColor = convertColorToRGBA('#2a6ac1', 100)
     /** set the text size of attachment-buttons */
     this.buttonHoverTextColor = convertColorToRGBA('#ffffff', 100);
-    /** set the text size of attachment-buttons */
-    this.singleConversation = false;
     /** set the single conversation mode for the widget */
-    this.restartConversation = false;
+    this.singleConversation = false;
     /** allow you to always restart a new converazioe */
-    this.nativeRating = true;
+    this.restartConversation = false;
     /** set if native rating componet has to be shown */
-    this.showInfoMessage = 'MEMBER_JOINED_GROUP'.split(',').map(key => { return key.trim()});
+    this.nativeRating = true;
     /** disable or show bubble info message 'MEMBER_JOINED_CHAT' */
-    this.typingLocation = 'content'
+    this.showInfoMessage = 'MEMBER_JOINED_GROUP'.split(',').map(key => { return key.trim()});
     /** set the location of typing indicator (header or content) */
-    this.allowReopen = false;
+    this.typingLocation = 'content'
     /** enable the user to reopen a closed conversation */
     // this.continueConversationBeforeTime = 48;
     /** enable user to continue archived confersation before the value time from last timeout message */
-    this.participants = [];
+    this.allowReopen = false;
     /** enable user to talk with specific chat-bots/humans */
-    this.whatsappNumber = '';
+    this.participants = [];
     /**enable user to set a whatsapp business number to chat with */
-    this.messangerPageTitle = ''
+    this.whatsappNumber = '';
     /**enable user to set a facebook messanger page to chat with */
-    this.telegramUsername = ''
+    this.messangerPageTitle = ''
     /**enable user to set a telegram number to chat with */
-    this.fileUploadAccept = "image/*,.pdf,.txt,.mp3"
+    this.telegramUsername = ''
     /**enable auto disconnect from messaging after a defined amount of time (s)*/
+    this.fileUploadAccept = "image/*,.pdf,.txt,.mp3"
     this.disconnetTime = 0
 
     this.showWaitTime = true;
@@ -426,57 +433,36 @@ export class Globals {
     this.allowedOnSpecificUrl = false
     /** set a list of pattern url able to load the widget */
     this.allowedOnSpecificUrlList = [];
+    /** set widget size from 3 different positions: min, max, top */
+    this.size = 'min';
 
     // ============ END: SET EXTERNAL PARAMETERS ==============//
 
 
     // ============ BEGIN: SET INTERNAL PARAMETERS ==============//
+    /** name tenant ex: tilechat */
     this.tenant = environment.firebaseConfig.tenant;
-    // this.parameters['tenant'] = environment.tenant;
-    // this.parameters.push({'tenant': environment.tenant});
-
-    /** Set the widget title label shown in the widget header. Value type : string.
-    The default value is Tiledesk. */
-                                                        /** name tenant ex: tilechat */
+    /** channelType: group/direct  */
     this.channelType = CHANNEL_TYPE.GROUP;
-    // this.parameters['channelType'] = CHANNEL_TYPE.GROUP;
-    // this.parameters.push({'channelType': CHANNEL_TYPE.GROUP});
-                                                        /** channelType: group/direct  */
+    /** settings for pass variables to js */                                                
     this.default_settings = {};
-    // this.parameters.push({'default_settings': '' });
-                                                        /** settings for pass variables to js */
+    /** detect is mobile : detectIfIsMobile() */                                         
     this.isMobile = false;
-    // this.parameters['isMobile'] = false;
-    // this.parameters.push({'isMobile': false});  /** detect is mobile : detectIfIsMobile() */
-
+    /** detect is logged */
     this.isLogged = false;
-    // this.parameters['isLogged'] = false;
-    // this.parameters.push({'isLogged': false});  /** detect is logged */
-
+    
     this.BUILD_VERSION = 'v.' + environment.version;
-    // this.parameters['BUILD_VERSION'] = 'v.' + environment.version;
-    // this.parameters.push({'BUILD_VERSION': 'v.' + environment.version});
 
     this.soundEnabled = true;
-    // this.parameters['soundEnabled'] = true;
-    // this.parameters.push({'soundEnabled': true});
 
     this.conversationsBadge = 0;
-    // this.parameters['conversationsBadge'] = 0;
-    // this.parameters.push({'conversationsBadge': 0});
 
     this.isOpenMenuOptions = false;
-    // this.parameters['isOpenMenuOptions'] = false;
-    // this.parameters.push({'isOpenMenuOptions': false});
 
     this.displayEyeCatcherCard = 'none';
-    // this.parameters['displayEyeCatcherCard'] = 'none';
-    // this.parameters.push({'displayEyeCatcherCard': 'none'});
     // ============ END: SET INTERNAL PARAMETERS ==============//
 
     this.supportMode = true;
-    // this.parameters['supportMode'] = true;
-    // this.parameters.push({'supportMode': true});
 
     this.newConversationStart = true;
 
@@ -534,7 +520,7 @@ export class Globals {
       'fullscreenMode': this.fullscreenMode,
       'filterByRequester': this.filterByRequester,
       'hideHeaderConversationOptionsMenu': this.hideHeaderConversationOptionsMenu, 'hideHeaderCloseButton': this.hideHeaderCloseButton,
-      'hideCloseConversationOptionMenu': this.hideCloseConversationOptionMenu,
+      'hideCloseConversationOptionMenu': this.hideCloseConversationOptionMenu, 'hideHeaderConversation': this.hideHeaderConversation,
       'hideSettings': this.hideSettings,
       'isLogEnabled': this.isLogEnabled,
       'isOpen': this.isOpen, 'isShown': this.isShown,
@@ -628,6 +614,11 @@ export class Globals {
       this.align === 'left'?  divTiledeskWidget.style.left = this.mobileMarginX : divTiledeskWidget.style.right = this.mobileMarginX; 
     }
 
+    //customize position for 'tiledeskdiv' for desktop
+    if(isOpen && !this.isMobile && divTiledeskWidget && this.size){
+      divTiledeskWidget.classList.add(this.size + '-size')
+    }
+
 
   }
 

package/src/assets/i18n/en.json

@@ -55,7 +55,7 @@
     "CLOSE_CHAT": "Close chat",
     "MINIMIZE":"Minimize window",
     "MAXIMIZE":"Expand window",
-    "FULLSCREEN":"Fullscreen",
+    "CENTER":"Center",
     "CONFIRM_CLOSE_CHAT":"Are you sure you want to close this chat?",
     
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"you",

package/src/assets/i18n/es.json

@@ -55,7 +55,7 @@
     "CLOSE_CHAT": "Cerrar chat",
     "MINIMIZE":" Minimizar ventana",
     "MAXIMIZE":"Expandir ventana",
-    "FULLSCREEN":"Pantalla completa",
+    "CENTER":"Centrar",
     "CONFIRM_CLOSE_CHAT":"¿Estás seguro de que quieres cerrar este chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tú",

package/src/assets/i18n/fr.json

@@ -55,7 +55,7 @@
     "CLOSE_CHAT": "Fermer la discussion",
     "MINIMIZE":"Réduire la fenêtre",
     "MAXIMIZE":"Agrandir la fenêtre",
-    "FULLSCREEN":"Plein écran",
+    "CENTER":"Centrer",
     "CONFIRM_CLOSE_CHAT":"Etes-vous sûr de vouloir fermer cette discussion?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",

package/src/assets/i18n/it.json

@@ -55,7 +55,7 @@
     "CLOSE_CHAT": "Chiudi chat",
     "MINIMIZE":"Comprimi finestra",
     "MAXIMIZE":"Espandi finestra",
-    "FULLSCREEN":"Fullscreen",
+    "CENTER":"Centra",
     "CONFIRM_CLOSE_CHAT":"Sei sicuro di voler chiudere questa chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",

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

@@ -835,6 +835,63 @@
             return true;
         }
 
+
+        /** WIDGET POSITION SECTION : start*/
+        function onClickSize(){
+            let status = document.querySelector('input[name="size"]:checked').value
+            window.tiledeskSettings['size'] = status
+            console.log('onClickSize: status-->',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+        
+        function onClickFullScreenMode(){
+            let status = document.querySelector('input[name="fullscreenMode"]:checked').value
+            window.tiledeskSettings['fullscreenMode'] = stringToBoolean(status)
+            console.log('onClickFullScreenMode: status-->',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+
+        function onClickAlign(){
+            let status = document.querySelector('input[name="align"]:checked').value
+            window.tiledeskSettings['align'] = status
+            console.log('onClickAlign: status-->',window.tiledeskSettings)
+            window.Tiledesk('restart')
+        }
+
+        function onClickMarginX(){
+            let text = document.getElementById('marginX').value
+            text === ""? text= '100px': text
+            window.tiledeskSettings['marginX'] = text
+            console.log('onClickMarginX:',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+
+        function onClickMarginY(){
+            let text = document.getElementById('marginY').value
+            text === ""? text= '50px' : text //set default value if user not write a value
+            window.tiledeskSettings['marginY'] = text
+            console.log('onClickMarginY:',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+
+        function onClickMobileMarginX(){
+            let text = document.getElementById('mobileMarginX').value
+            text === ""? text= '100px': text
+            window.tiledeskSettings['mobileMarginX'] = text
+            console.log('onClickMobileMarginX:',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+
+        function onClickMobileMarginY(){
+            let text = document.getElementById('mobileMarginY').value
+            text === ""? text= '50px' : text //set default value if user not write a value
+            window.tiledeskSettings['mobileMarginY'] = text
+            console.log('onClickMobileMarginY:',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+        /** WIDGET POSITION SECTION : end*/
+
+        /** WIDGET SETTINGS SECTION : start*/
         function onClickDisconnectTime(){
             let status = document.querySelector('input[name="disconnetTime"]:checked');
             let value;
@@ -869,13 +926,6 @@
             window.Tiledesk('restart')
         }
 
-        function onClickAlign(){
-            let status = document.querySelector('input[name="align"]:checked').value
-            window.tiledeskSettings['align'] = status
-            console.log('onClickAlign: status-->',window.tiledeskSettings)
-            window.Tiledesk('restart')
-        }
-
         function onClickCalloutTimer(){
             let status = document.querySelector('input[name="calloutTimer"]:checked');
             let value;
@@ -962,13 +1012,6 @@
             window.Tiledesk('restart')
         }
 
-        function onClickFullScreenMode(){
-            let status = document.querySelector('input[name="fullscreenMode"]:checked').value
-            window.tiledeskSettings['fullscreenMode'] = stringToBoolean(status)
-            console.log('onClickFullScreenMode: status-->',window.tiledeskSettings);
-            window.Tiledesk('restart')
-        }
-
         function onClickThemeColor(){
             let color = document.getElementById('themeColor').value
             document.getElementById('themeColorText').value = color
@@ -1043,38 +1086,6 @@
             window.Tiledesk('restart')
         }
 
-        function onClickMarginX(){
-            let text = document.getElementById('marginX').value
-            text === ""? text= '100px': text
-            window.tiledeskSettings['marginX'] = text
-            console.log('onClickMarginX:',window.tiledeskSettings);
-            window.Tiledesk('restart')
-        }
-
-        function onClickMarginY(){
-            let text = document.getElementById('marginY').value
-            text === ""? text= '50px' : text //set default value if user not write a value
-            window.tiledeskSettings['marginY'] = text
-            console.log('onClickMarginY:',window.tiledeskSettings);
-            window.Tiledesk('restart')
-        }
-
-        function onClickMobileMarginX(){
-            let text = document.getElementById('mobileMarginX').value
-            text === ""? text= '100px': text
-            window.tiledeskSettings['mobileMarginX'] = text
-            console.log('onClickMobileMarginX:',window.tiledeskSettings);
-            window.Tiledesk('restart')
-        }
-
-        function onClickMobileMarginY(){
-            let text = document.getElementById('mobileMarginY').value
-            text === ""? text= '50px' : text //set default value if user not write a value
-            window.tiledeskSettings['mobileMarginY'] = text
-            console.log('onClickMobileMarginY:',window.tiledeskSettings);
-            window.Tiledesk('restart')
-        }
-
         function onClickAutoStart(){
             let status = document.querySelector('input[name="autoStart"]:checked').value
             window.tiledeskSettings['autoStart'] = stringToBoolean(status)
@@ -1227,7 +1238,9 @@
             console.log('onClickNativeRating:', window.tiledeskSettings)
             window.Tiledesk('restart')
         }
+        /** WIDGET SETTINGS SECTION : end*/
 
+        /** WIDGET SOCIAL CHANNELS SECTION : start*/
         function onClickWhatsappNumber(){
             let status = document.getElementById('whatsappNumber').value
             window.tiledeskSettings['whatsappNumber'] = status
@@ -1248,6 +1261,15 @@
             console.log('onClickTelegramUsername:', window.tiledeskSettings)
             window.Tiledesk('restart')
         }
+        /** WIDGET SOCIAL CHANNELS SECTION : end*/
+
+        /** WIDGET CONVERSATION DETAIL SECTION : start*/
+        function onClickHideHeaderConversation(){
+            let status = document.querySelector('input[name="hideHeaderConversation"]:checked').value
+            window.tiledeskSettings['hideHeaderConversation'] = stringToBoolean(status)
+            console.log('onClickHideHeaderConversation: status-->',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
         
         function onClickHideHeaderCloseButton(){
             let status = document.querySelector('input[name="hideHeaderCloseButton"]:checked').value
@@ -1360,7 +1382,9 @@
             console.log('onClickshowAudioRecorderFooterButton:', window.tiledeskSettings)
             window.Tiledesk('restart')
         }
+        /** WIDGET CONVERSATION DETAIL SECTION : end*/
 
+        /** WIDGET BUBBLE MESSAGE SECTION : start*/
         function onClickFontSize(){
             let text = document.getElementById('fontSize').value
             text === ""? text= '1.4em': text
@@ -1381,6 +1405,9 @@
             window.Tiledesk('restart')
         }
 
+        /** WIDGET BUBBLE MESSAGE SECTION : end*/
+       
+        /**WIDGET BUTTON STYLE SECTION : start */
         function onClickButtonFontSize(){
             let text = document.getElementById('buttonFontSize').value
             text === ""? text= '15px': text
@@ -1388,9 +1415,7 @@
             console.log('onClickButtonFontSize:',window.tiledeskSettings);
             window.Tiledesk('restart')
         }
-
-       
-
+        /**WIDGET BUTTON STYLE SECTION : end */
 
         function onClickTestAll(){
             inputs = document.getElementsByTagName('input');
@@ -1782,6 +1807,78 @@
                             <button class="btn btn-light" onclick="onClickOpenConversationById()">Open conversation <i class="fa-regular fa-comment" aria-hidden="true"></i></button>
                         </div>
                     </div>
+                    <!-- WIDGET POSITION SECTION : start-->
+                    <div class="row section">
+                        <div><h3 style="line-height: 0.3;">Widget <em><strong>POSITION</strong></em></h3></div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>size</strong></em></span></div>
+                            <div class="col-md-5">
+                                <input class="form-check-input" type="radio" name="size" value="min" checked><label class="form-check-label" for="size">min</label>
+                                <input class="form-check-input" type="radio" name="size" value="max"><label class="form-check-label" for="size">max</label>
+                                <input class="form-check-input" type="radio" name="size" value="top"><label class="form-check-label" for="size">top</label>
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickSize()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>fullscreenMode</strong></em></span></div>
+                            <div class="col-md-5">
+                                <input class="form-check-input" type="radio" name="fullscreenMode" value="true"><label>True</label>
+                                <input class="form-check-input" type="radio" name="fullscreenMode" value="false" checked ><label>False</label>
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickFullScreenMode()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>align</strong></em></span></div>
+                            <div class="col-md-5">
+                                <input class="form-check-input" type="radio" name="align" value="left"><label class="form-check-label" for="preChatForm">Left</label>
+                                <input class="form-check-input" type="radio" name="align" value="right" checked><label class="form-check-label" for="preChatForm">Right</label>
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickAlign()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>marginX</strong></em></span></div>
+                            <div class="col-md-5 formElement">
+                                <input class="form-control col-sm-2" type="text" id="marginX" name="marginX" placeholder="Ex. 100px, 1em">
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickMarginX()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>marginY</strong></em></span></div>
+                            <div class="col-md-5 formElement">
+                                <input class="form-control col-sm-2" type="text" id="marginY" name="marginY" placeholder="Ex. 100px, 1em">
+                            </div>
+                            <div class="col-md-2 ">
+                                <button class="btn btn-light" onclick="onClickMarginY()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>mobileMarginX</strong></em></span></div>
+                            <div class="col-md-5 formElement">
+                                <input class="form-control col-sm-2" type="text" id="mobileMarginX" name="mobileMarginX" placeholder="Ex. 100px, 1em">
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickMobileMarginX()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>mobileMarginY</strong></em></span></div>
+                            <div class="col-md-5 formElement">
+                                <input class="form-control col-sm-2" type="text" id="mobileMarginY" name="mobileMarginY" placeholder="Ex. 100px, 1em">
+                            </div>
+                            <div class="col-md-2 ">
+                                <button class="btn btn-light" onclick="onClickMobileMarginY()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- WIDGET POSITION SECTION : end-->
                     <div class="row section c21-parameters">
                         <div><h3 style="line-height: 0.3;">MANAGE <em><strong>widget settings</strong></em></h3></div>
                         <div class="docs">Select an option for Tiledesk settings parameter</div>
@@ -1828,16 +1925,6 @@
                                 <button class="btn btn-light" onclick="onClickPreChatForm()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
                             </div>
                         </div>
-                        <div class="row">
-                            <div class="col-md-5 formElement"><span><em><strong>align</strong></em></span></div>
-                            <div class="col-md-5">
-                                <input class="form-check-input" type="radio" name="align" value="left"><label class="form-check-label" for="preChatForm">Left</label>
-                                <input class="form-check-input" type="radio" name="align" value="right" checked><label class="form-check-label" for="preChatForm">Right</label>
-                            </div>
-                            <div class="col-md-2">
-                                <button class="btn btn-light" onclick="onClickAlign()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
-                            </div>
-                        </div>
                         <div class="row">
                             <div class="col-md-5 formElement"><span><em><strong>calloutTimer</strong></em></span></div>
                             <div class="col-md-5">
@@ -1935,8 +2022,6 @@
                                 <button class="btn btn-light" onclick="onClickRestartConversation()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
                             </div>
                         </div>
-                        
-                       
                         <div class="row">
                             <div class="col-md-5 formElement"><span><em><strong>hideSettings</strong></em></span></div>
                             <div class="col-md-5">
@@ -1947,17 +2032,6 @@
                                 <button class="btn btn-light" onclick="onClickHideSettings()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
                             </div>
                         </div>
-                        
-                        <div class="row">
-                            <div class="col-md-5 formElement"><span><em><strong>fullscreenMode</strong></em></span></div>
-                            <div class="col-md-5">
-                                <input class="form-check-input" type="radio" name="fullscreenMode" value="true"><label>True</label>
-                                <input class="form-check-input" type="radio" name="fullscreenMode" value="false" checked ><label>False</label>
-                            </div>
-                            <div class="col-md-2">
-                                <button class="btn btn-light" onclick="onClickFullScreenMode()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
-                            </div>
-                        </div>
                         <div class="row">
                             <div class="col-md-5 formElement"><span><em><strong>themeColor</strong></em></span></div>
                             <div class="col-md-5 formElement">
@@ -1996,42 +2070,6 @@
                                 <button class="btn btn-light" onclick="onClickDepartmentId()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
                             </div>
                         </div>
-                        <div class="row">
-                            <div class="col-md-5 formElement"><span><em><strong>marginX</strong></em></span></div>
-                            <div class="col-md-5 formElement">
-                                <input class="form-control col-sm-2" type="text" id="marginX" name="marginX" placeholder="Ex. 100px, 1em">
-                            </div>
-                            <div class="col-md-2">
-                                <button class="btn btn-light" onclick="onClickMarginX()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col-md-5 formElement"><span><em><strong>marginY</strong></em></span></div>
-                            <div class="col-md-5 formElement">
-                                <input class="form-control col-sm-2" type="text" id="marginY" name="marginY" placeholder="Ex. 100px, 1em">
-                            </div>
-                            <div class="col-md-2 ">
-                                <button class="btn btn-light" onclick="onClickMarginY()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col-md-5 formElement"><span><em><strong>mobileMarginX</strong></em></span></div>
-                            <div class="col-md-5 formElement">
-                                <input class="form-control col-sm-2" type="text" id="mobileMarginX" name="mobileMarginX" placeholder="Ex. 100px, 1em">
-                            </div>
-                            <div class="col-md-2">
-                                <button class="btn btn-light" onclick="onClickMobileMarginX()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col-md-5 formElement"><span><em><strong>mobileMarginY</strong></em></span></div>
-                            <div class="col-md-5 formElement">
-                                <input class="form-control col-sm-2" type="text" id="mobileMarginY" name="mobileMarginY" placeholder="Ex. 100px, 1em">
-                            </div>
-                            <div class="col-md-2 ">
-                                <button class="btn btn-light" onclick="onClickMobileMarginY()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
-                            </div>
-                        </div>
                         <div class="row">
                             <div class="col-md-5 formElement"><span><em><strong>autoStart</strong></em></span></div>
                             <div class="col-md-5">
@@ -2245,6 +2283,16 @@
                         
 
                         <div><h3 style="line-height: 0.3;">MANAGE <em><strong>CONVERSATION DETAIL</strong></em></h3></div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>hideHeaderConversation</strong></em></span></div>
+                            <div class="col-md-5">
+                                <input class="form-check-input" type="radio" name="hideHeaderConversation" value="true"><label>True</label>
+                                <input class="form-check-input" type="radio" name="hideHeaderConversation" value="false" checked><label>False</label>
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickHideHeaderConversation()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
                         <div class="row">
                             <div class="col-md-5 formElement"><span><em><strong>hideHeaderCloseButton</strong></em></span></div>
                             <div class="col-md-5">

package/src/iframe-style.css

@@ -43,15 +43,14 @@
     height: 100%;  
 }
 
-#tiledeskdiv.top {
-    /* transition: width 1s, height 1s; */
-    /* transition: all 0.5s ease-in !important; */
+#tiledeskdiv.top-size {
     position: fixed;
-    top: 50%;
+    /* top: 50%; */
     left: 50%;
     width: var(--iframeMaxWidth);
     height: var(--iframeMaxHeight);
-    transform: translate(-50%, -50%);  
+    /* transform: translate(-50%, -50%);   */
+    transform: translate(-50%, 0%);  
 }
  
 
@@ -113,13 +112,13 @@
     box-shadow: none;
 }
 
-#tiledesk-container.open #tiledeskdiv.decreaseSize {
+#tiledesk-container.open #tiledeskdiv.min-size {
     transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
     width: var(--iframeMinWidth);
     height: var(--iframeMinHeight);
 }
 
-#tiledesk-container.open #tiledeskdiv.increaseSize {
+#tiledesk-container.open #tiledeskdiv.max-size {
     /* transition: width 1s, height 1s; */
     transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
     width: var(--iframeMaxWidth);