@chat21/chat21-web-widget 5.0.84-rc.2 → 5.0.85

package/src/app/component/message/audio/audio.component.scss

@@ -0,0 +1,122 @@
+#audio_container{
+    display: flex;
+}
+
+#play-icon,
+#pause-icon {
+    margin: 20px 2.5% 10px 2.5%;
+}
+
+.time {
+    display: inline-block;
+    width: 37px;
+    text-align: center;
+    font-size: 20px;
+    margin: 28.5px 0 18.5px 0;
+    float: left;
+}
+output {
+    display: inline-block;
+    width: 32px;
+    text-align: center;
+    font-size: 20px;
+    margin: 10px 2.5% 0 5%;
+    float: left;
+    clear: left;
+}
+
+input[type="range"] {
+    position: relative;
+    -webkit-appearance: none;
+    width: 48%;
+    margin: 0;
+    padding: 0;
+    height: 19px;
+    margin: 30px 2.5% 20px 2.5%;
+    float: left;
+    outline: none;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::before {
+    position: absolute;
+    content: "";
+    top: 8px;
+    left: 0;
+    width: var(--seek-before-width);
+    height: 3px;
+    background-color: #007db5;
+    cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    -webkit-appearance: none;
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+    margin: -7px 0 0 0;
+}
+input[type="range"]:active::-webkit-slider-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::-moz-range-progress {
+    background-color: #007db5;
+}
+input[type="range"]::-moz-focus-outer {
+    border: 0;
+}
+input[type="range"]::-moz-range-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+input[type="range"]:active::-moz-range-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+input[type="range"]::-ms-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: transparent;
+    border: solid transparent;
+    color: transparent;
+}
+input[type="range"]::-ms-fill-lower {
+    background-color: #007db5;
+}
+input[type="range"]::-ms-fill-upper {
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::-ms-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+input[type="range"]:active::-ms-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}

package/src/app/component/message/{audio-track/audio-track.component.spec.ts → audio/audio.component.spec.ts}

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AudioTrackComponent } from './audio-track.component';
+import { AudioComponent } from './audio.component';
 
-describe('AudioTrackComponent', () => {
-  let component: AudioTrackComponent;
-  let fixture: ComponentFixture<AudioTrackComponent>;
+describe('AudioComponent', () => {
+  let component: AudioComponent;
+  let fixture: ComponentFixture<AudioComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AudioTrackComponent ]
+      declarations: [ AudioComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(AudioTrackComponent);
+    fixture = TestBed.createComponent(AudioComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/src/app/component/message/audio/audio.component.ts

@@ -0,0 +1,122 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+// import lottieWeb from 'https://cdn.skypack.dev/lottie-web';
+
+@Component({
+  selector: 'chat-audio',
+  templateUrl: './audio.component.html',
+  styleUrls: ['./audio.component.scss']
+})
+export class AudioComponent implements OnInit {
+
+  @Input() metadata: any;
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
+
+  uidAudioPlayng: string = ''
+  divPlay: HTMLAudioElement
+  playState: HTMLElement
+  status: 'play' | 'pause' = 'play'
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit() {
+    // this.divPlay = this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#audio_msg')
+    // this.playState= this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#duration')
+  }
+
+  onPlayPause(status: string){
+    // const divPlay = (<HTMLAudioElement>document.getElementById('audio_msg'));
+    if(status === 'play') {
+      this.divPlay.play();
+      this.status = 'pause'
+    } else {
+      this.divPlay.pause();
+      this.status = 'play'
+    }
+  }
+  
+  pauseAudioMsg(e) {
+    try {
+      // stop all audio
+      if (this.uidAudioPlayng) {
+        const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
+        divPlay.pause();
+        // console.log('> pausa: ', divPlay);
+      }
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+
+    try {
+      // console.log(e.target.id);
+      if (this.uidAudioPlayng) {
+        this.uidAudioPlayng = '';
+      }
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+  }
+
+  playAudioMsg(e) {
+    // stop all audio
+    if (this.uidAudioPlayng) {
+      const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
+      divPlay.pause();
+      // console.log('> pausa: ', divPlay);
+    }
+    try {
+      // console.log(e.target.id);
+      // set uid audio playng
+      this.uidAudioPlayng = e.target.id;
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+  }
+
+  updateTimeAudioMsg(ev){
+    var currTime = Math.floor(ev.target.currentTime); 
+    var duration = Math.floor(ev.target.duration);
+
+    let minutes = 0;
+    if(currTime > 60){
+      minutes = Math.floor(currTime / 60);
+    }
+    const seconds = currTime - minutes * 60
+    // console.log('timeeee', minutes + ':' + seconds )
+    // this.playState.innerHTML = minutes + ':' + seconds
+  }
+
+
+
+  /**
+   *
+   * @param uid
+   */
+  playPausaAudioMsg(uid: string) {
+    // console.log('playPausaAudioMsg: ', uid);
+    const that = this;
+    try {
+      const divPause = (<HTMLAudioElement>document.getElementById(that.uidAudioPlayng));
+      const divPlay = (<HTMLAudioElement>document.getElementById(uid));
+      if (divPause) {
+        divPause.pause();
+      }
+
+      if (that.uidAudioPlayng === uid) {
+        that.uidAudioPlayng = '';
+      } else {
+        if (divPlay) {
+          setTimeout(function() {
+            // if (that.g.autoplay_activated) {
+            //   divPlay.play();
+            // }
+            this.uidAudioPlayng = uid;
+          }, 300);
+        }
+      }
+
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+  }
+
+}

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -1,26 +1,9 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- ngStyle]="{'padding': (isImage(message) || isFrame(message))?'1px':'0 8px'}" -->
 <!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px': null  -->
-
-
+<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0 0px':'0 8px'}" class="messages primary-color">
+  
     
-<!-- <div id="bubble-message" *ngIf="isAudio(message)" [ngStyle]="{'padding': '0'}" class="messages primary-color">
-  <div>
-    <chat-audio-track  *ngIf="isAudio(message)"
-      [metadata]="message.metadata" 
-    ></chat-audio-track>
-  </div>
-</div> 
-
-
-[ngStyle]="{'padding': (isImage(message) || isFrame(message) || isAudio(message))?'0 0px':'0 8px'}"
--->
-
-
-
-
-
-<div id="bubble-message"  class="messages primary-color">
     <div>
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
@@ -53,18 +36,10 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-frame>
 
-      <!-- <chat-audio *ngIf="isAudio(message)"
+      <chat-audio *ngIf="isAudio(message)"
         [metadata]="message.metadata" 
         (onElementRendered)="onElementRenderedFN($event)">
-      </chat-audio> -->
-
-      <chat-audio-track  *ngIf="isAudio(message)"
-        [metadata]="message.metadata"
-        [color]="fontColor"
-        [fontSize]="fontSize"
-        [stylesMap]="stylesMap">
-      </chat-audio-track>
-
+      </chat-audio>
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
@@ -76,7 +51,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
       <!-- tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom" -->
-      <div *ngIf="message?.text && !isAudio(message)" >
+      <div *ngIf="message?.text" >
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"
@@ -94,7 +69,16 @@
           [themeColor]="stylesMap.get('themeColor')"
           [foregroundColor]="stylesMap.get('foregroundColor')">
         </chat-html>
-
+        <!-- <p #messageEl class="message_innerhtml marked" [innerHTML]="printMessage(message, messageEl, this) | marked"></p> -->
+        <!-- <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here
+            is ignored</div>
+        <ng-template #contentPopup>
+            <p style="text-decoration: underline; padding:8px; cursor: pointer;"
+                (click)="popupUrl(g.windowContext, message.text,'windowName')">{{strip_tags(message.text)}}</p>
+        </ng-template>
+        <ng-template #contentNewTab>
+            <p #messageEl [innerHTML]="printMessage(message, messageEl, this) | linky"></p>
+        </ng-template> -->
       </div>
   
     </div>

package/src/app/component/message/bubble-message/bubble-message.component.scss

@@ -5,9 +5,6 @@
     border-radius: var(--border-radius-bubble-message);
     padding: 0;
     word-wrap: break-word;
-
-    background: transparent;
-    
     // padding: 14px;
     // padding: 6px 6px 6px 6px;
     // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -29,8 +26,4 @@
         height: auto;
         object-fit: cover;
     }
-
-    chat-audio-track {
-        display: flex;
-    }
 }

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -42,7 +42,6 @@ export class BubbleMessageComponent implements OnInit {
   constructor(public sanitizer: DomSanitizer) { }
 
   ngOnInit() {
-    // console.log("---- > MSG:", this.message);
   }
 
   ngOnChanges() {

package/src/app/utils/globals.ts

@@ -388,7 +388,7 @@ export class Globals {
     /**enable user to set a facebook messanger page to chat with */
     this.telegramUsername = ''
     /**enable user to set a telegram number to chat with */
-    this.fileUploadAccept = "image/*,.pdf,.txt,.mp3"
+    this.fileUploadAccept = "image/*,.pdf,.txt"
     /**enable auto disconnect from messaging after a defined amount of time (s)*/
     this.disconnetTime = 0
 
@@ -567,10 +567,10 @@ export class Globals {
     if(isOpen && isMobile){
       //block body scroll
       // window.parent.document.body.style.height = '100vh';
-      window.parent.document.body.style.height = '0';
-      window.parent.document.body.style.width = '100%';
-      window.parent.document.body.style.overflowY = 'hidden'
-      window.parent.document.body.style.position = 'fixed';
+      window.parent.document.body.style.setProperty('height', '0', 'important')
+      window.parent.document.body.style.setProperty('width', '100%', 'important')
+      window.parent.document.body.style.setProperty('overflow-y', 'hidden', 'important')
+      window.parent.document.body.style.setProperty('position', 'fixed', 'important')
     }else if(!isOpen && isMobile){
       //reset body style
       window.parent.document.body.style.removeProperty('height')

package/src/assets/i18n/en.json

@@ -55,7 +55,7 @@
     "CLOSE_CHAT": "Close chat",
     "MINIMIZE":"Minimize",
     "MAXIMIZE":"Maximize",
-    "CONFIRM_CLOSE_CHAT":"Are you sure you wanna close this chat?",
+    "CONFIRM_CLOSE_CHAT":"Are you sure you want to close this chat?",
     
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"you",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"have been added to ",

package/src/assets/i18n/es.json

@@ -55,7 +55,7 @@
     "CLOSE_CHAT": "Cerrar chat",
     "MINIMIZE":"Minimizar",
     "MAXIMIZE":"Maximizar",
-    "CONFIRM_CLOSE_CHAT":"¿Estás segura de que quieres cerrar este chat?",
+    "CONFIRM_CLOSE_CHAT":"¿Estás seguro de que quieres cerrar este chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tú",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"han sido agregados a ",

package/src/assets/i18n/fr.json

@@ -31,7 +31,7 @@
     "ALERT_LEAVE_CHAT": "Voulez-vous quitter la conversation?",
     "YES": "Oui",
     "NO": "Non",
-    "BUTTON_CLOSE_TO_ICON": "Minimisez le chat",
+    "BUTTON_CLOSE_TO_ICON": "Minimisez la discussion",
     "BUTTON_EDIT_PROFILE": "Modifier le profil",
     "RATE_CHAT": "évaluer la conversation",
     "WELCOME_TITLE": "Salut, bienvenue à Tiledesk 👋",
@@ -44,7 +44,7 @@
     "CLOSE": "Fermer",
     "RESTART":"Redémarrer",
     "PREV_CONVERSATIONS": "Vos conversations",
-    "YOU": "Toi",
+    "YOU": "Tu",
     "SHOW_ALL_CONV": "voir tout",
     "START_A_CONVERSATION": "Démarrer une conversation",
     "NO_CONVERSATION": "Aucune conversation active",
@@ -52,17 +52,17 @@
     "WAITING_TIME_FOUND": "L'équipe répond généralement en $reply_time",
     "WAITING_TIME_NOT_FOUND": "Nous vous répondrons dans les plus brefs délais",
     "CLOSED": "Fermé",
-    "CLOSE_CHAT": "Fermer le chat",
+    "CLOSE_CHAT": "Fermer la discussion",
     "MINIMIZE":"Minimiser",
     "MAXIMIZE":"Maximiser",
     "CONFIRM_CLOSE_CHAT":"Etes-vous sûr de vouloir fermer cette discussion?",
 
-    "INFO_SUPPORT_USER_ADDED_SUBJECT":"toi",
+    "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"ont été ajoutés à ",
     "INFO_SUPPORT_USER_ADDED_COMPLEMENT":"rejointe",
     "INFO_SUPPORT_USER_ADDED_VERB":"la discussion",
-    "INFO_SUPPORT_CHAT_REOPENED":"Chat rouvert",
-    "INFO_SUPPORT_CHAT_CLOSED":"Chat fermé",
+    "INFO_SUPPORT_CHAT_REOPENED":"Discussion rouvert",
+    "INFO_SUPPORT_CHAT_CLOSED":"Discussion fermé",
     "INFO_SUPPORT_LEAD_UPDATED":"Prospect mis à jour",
     "INFO_SUPPORT_MEMBER_LEFT_GROUP":"supprimé du groupe",
     "INFO_SUPPORT_MEMBER_ABANDONED_GROUP":"a quitté la conversation",

package/src/assets/i18n/it.json

@@ -55,7 +55,7 @@
     "CLOSE_CHAT": "Chiudi chat",
     "MINIMIZE":"Minimizza",
     "MAXIMIZE":"Massimizza",
-    "CONFIRM_CLOSE_CHAT":"Vuoi davvero chiudere questa chat?",
+    "CONFIRM_CLOSE_CHAT":"Sei sicuro di voler chiudere questa chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"sei stato aggiunto ",

package/src/assets/twp/blank.html

@@ -148,9 +148,6 @@
     <meta property="og:image" content="https://tiledesk.com/wp-content/uploads/2022/12/6029654-02-min.png" />
     <meta property="og:locale" content="en">
     
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-
 
     <script type="application/javascript">
         window.tiledeskSettings = {
@@ -310,5 +307,11 @@
     <div id="preloader">
         <div class="loader"></div>
     </div>
+
+<div>
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
+</div>
 </body>
 </html>

package/src/assets/twp/chatbot-panel.html

@@ -438,12 +438,10 @@
     <meta property="og:locale" content="en">
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
-  
+
     <!-- <script type="application/javascript">
         window.tiledeskSettings = {
             marginX: "100px",
@@ -594,7 +592,7 @@
         }
 
         window.onload = function() {
-            document.getElementById("tiledesk_widgetTitle").value = tiledesk_widgetTitle;
+            document.getElementById("tiledesk_widgetTitle").innerHTML = tiledesk_widgetTitle;
         }
 
 
@@ -714,5 +712,15 @@
 </script>
 
 <!-- Google Analytics -->
+
+
+
+
+<div>
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
+    <!-- <link href="./tiledesk_widget_files/css" rel="stylesheet" type="text/css"> -->
+</div>
 </body>
 </html>

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

@@ -469,10 +469,8 @@
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-    <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
+    <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
 
     <script type="application/javascript">
         window.tiledeskSettings = {
@@ -506,8 +504,8 @@
                 document.getElementById('events').scrollTop = document.getElementById('events').scrollHeight
             }
 
-            document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
-            document.getElementById("project_name").value = project_name;
+            document.getElementById("project_id").innerHTML = '"' + tiledesk_projectid + '"';
+            document.getElementById("project_name").innerHTML = project_name;
         });
 
         window.Tiledesk('onBeforeInit', function(event_data) {
@@ -520,7 +518,7 @@
                     
                     var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
                     document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
-                    document.getElementById("base_url").value = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
+                    document.getElementById("base_url").innerHTML = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
                     
                     baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
                 }
@@ -1446,8 +1444,8 @@
         // console.log('project_name: ', project_name);
         
         // window.onload = function() {
-        //     document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
-        //     document.getElementById("project_name").value = project_name;
+        //     document.getElementById("project_id").innerHTML = '"' + tiledesk_projectid + '"';
+        //     document.getElementById("project_name").innerHTML = project_name;
         // }
 
 
@@ -2618,5 +2616,15 @@
 </script> -->
 
 <!-- Google Analytics -->
+
+
+
+
+<div>
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
+    <!-- <link href="./tiledesk_widget_files/css" rel="stylesheet" type="text/css"> -->
+</div>
 </body>
 </html>

package/src/assets/twp/index.html

@@ -245,10 +245,7 @@
     <meta property="og:locale" content="en">
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
-    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
 
@@ -300,7 +297,7 @@
                     
                     var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
                     document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
-                    document.getElementById("base_url").value = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
+                    document.getElementById("base_url").innerHTML = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
                     
                     baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
                 }
@@ -439,8 +436,8 @@
         // console.log('project_name: ', project_name);
 
         window.onload = function() {
-            document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
-            document.getElementById("project_name").value = project_name;
+            document.getElementById("project_id").innerHTML = '"' + tiledesk_projectid + '"';
+            document.getElementById("project_name").innerHTML = project_name;
             
             if(role !== 'agent'){
                 document.getElementById("testPageButton").style.display = 'block'
@@ -632,5 +629,14 @@
 </script> -->
 
 <!-- Google Analytics -->
+
+
+
+
+<div>
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
+</div>
 </body>
 </html>