@chat21/chat21-web-widget 5.0.71-rc.1 → 5.0.71-rc.12

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

@@ -14,11 +14,22 @@
         @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
         @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
 
+        body{
+            --font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif;
+            --blu: #506493;
+            --gray-light-02: rgb(223, 227, 237);
+            --base-company-logo: rgb(224,106,88);
+            --header-height: 60px;
+
+        }
+
         #preloader {
             background: #fff;
             position: fixed;
             top: 0;
             left: 0;
+            bottom: 0;
+            right: 0;
             height: 100%;
             width: 100%;
             z-index: 999999;
@@ -51,6 +62,52 @@
             animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
         }
 
+        .loader{
+            display: block;
+            z-index: 99;
+            position: absolute;
+            top: calc( 50% - 50px);
+            left: calc( 50% - 50px);
+            width: 100px;
+            height: 100px;
+            border: 3px solid rgb(224, 106, 88);
+            border-radius: 50%;
+
+            animation: spin 7s ease-in-out;
+            animation-iteration-count: infinite;
+            transition-duration: 0.1s;
+        }
+
+        .loader:hover {
+            scale: 0.95;
+            /*Loader on hover effect*/
+        }
+
+        .loader:active {
+            scale: 1.2;
+            /*Loader on click effect*/
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+                border-bottom: solid 3px transparent;
+                border-top: solid 3px transparent;
+            }
+            50% {
+                transform: rotate(1800deg);
+                border: 3px solid white;
+                border-left: solid 3px transparent;
+                border-right: solid 3px transparent;
+            }
+            100% {
+                /*Reversed spinning*/
+                transform: rotate(0deg);
+                border-bottom: solid 3px transparent;
+                border-top: solid 3px transparent;
+            }
+        }
+
         #deferred-styles {
             display: none;
         }
@@ -162,6 +219,71 @@
             z-index: 2;
             position: absolute;
             cursor: pointer;
+            font-size: 21px;
+            height: var(--header-height);
+            font-family: var(--font-family-poppins);
+            color: var(--blu);
+            background: white;
+            border-bottom: 1px solid var(--gray-light-02);
+            display: flex;
+            width: 100%;
+            
+        }
+
+        .header-left{
+            max-width: var(--header-height);
+            width: 100%;
+            transition: 0.3s;
+            border-right: 1px solid transparent;
+            /* border-right: 1px solid var(--gray-light-02); */
+            padding: 10px;
+        }
+
+        .header-left div {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            box-shadow: rgba(17, 49, 96, 0.16) 0px 8px 16px 0px, rgba(17, 49, 96, 0.06) 0px 0px 0px 1px;        ;
+        }
+
+        .header-left div .logo {
+            opacity: 1;
+            width: 25px;
+            position: absolute;
+            transition: opacity 0.2s ease-in-out;
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            justify-content: start;
+            width: 100%;
+            padding: 0px 10px;
+            box-sizing: border-box;
+        }
+
+        .header-right .header-go-back {
+            cursor: pointer;
+            position: relative;
+        }
+
+        .header-right .header-go-back .cds-text {
+            font-weight: 700;
+            color: var(--base-company-logo);
+        }
+
+        .header-right .header-title{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 5px;
+            font-weight: 300;
+            width: 80%;
+
         }
 
         .share-btn{
@@ -198,7 +320,9 @@
         }
 
         .b-agent-demo_powered_by a {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
             margin-top: 30px;
             margin-bottom: 30px;
             text-decoration: none;
@@ -212,8 +336,7 @@
         }
         .b-agent-demo_powered_by img {
             display: inline-block;
-            height: 24px;
-            /* margin-left: 20px; */
+            height: 40px;
         }
 
         /* The snackbar - position it at the bottom and in the middle of the screen */
@@ -263,6 +386,12 @@
             to {bottom: 0; opacity: 0;}
         }
 
+        @media (max-width: 451px) {
+            .cds-text{
+                display: none;
+            }
+        }
+
     </style>
 
     <!-- <script type="text/javascript">
@@ -333,8 +462,10 @@
             marginY: "50px",
             // calloutTimer: 1,
             singleConversation: true,
-            restartConversation: true,
-            hideCloseConversationOptionMenu: true
+            restartConversation: false,
+            hideHeaderCloseButton: true,
+            hideCloseConversationOptionMenu: true,
+            isLogEnabled:true
             // autostart: false
 
         };
@@ -368,8 +499,9 @@
         });
         
         window.Tiledesk('onBeforeInit', function(event_data) {
-            console.log("onBeforeInit Tiledesk FN", event_data);
-            
+            // console.log("onBeforeInit Tiledesk FN", event_data);
+            var brandSrc = event_data.detail.appConfigs.brandSrc? getBrandResources(event_data.detail.appConfigs.brandSrc) : null;
+
             setTimeout(() => {
                 document.getElementById("preloader").style.display = "none";
                 if(event_data && event_data.detail && event_data.detail.appConfigs){
@@ -387,7 +519,8 @@
         });
         
         window.Tiledesk('onInit', function(event_data) {
-            console.log("onInit Tiledesk FN", event_data); 
+            // console.log("onInit Tiledesk FN", event_data); 
+            window.Tiledesk('setParameter', {key: 'poweredBy', value: ''})
             // setTimeout(() => {
             //     document.getElementById("preloader").style.display = "none";
             // }, 1000);
@@ -400,7 +533,7 @@
         });
 
         window.Tiledesk('onAuthStateChanged', function(event_data) {
-        	console.log("AUTHENTICATED!", event_data);
+        	// console.log("AUTHENTICATED!", event_data);
        		// if(event_data.detail.isLogged){
             // 	console.log("isLogged!!!!", event_data);
             // 	window.Tiledesk('show')
@@ -408,13 +541,20 @@
         });
 
         window.Tiledesk('onMessageCreated', function(event_data) {
-        	console.log("onMessageCreated!", event_data);
+        	// console.log("onMessageCreated!", event_data);
             window.parent.postMessage(event_data.detail, '*')
        		// if(event_data.detail.isLogged){
             // 	console.log("isLogged!!!!", event_data);
             // 	window.Tiledesk('show')
             // }
         });
+
+        window.addEventListener('message', (event_data)=> {
+            if(event_data && event_data.data && event_data.data.action === 'restart'){
+                window.Tiledesk('startConversation', event_data.data.intentName)
+            }
+        })
+
     </script>
 
     <script type="application/javascript">
@@ -433,6 +573,7 @@
                         
         var url = new URL(currentUrl);
         var tiledesk_projectid = url.searchParams.get("tiledesk_projectid");
+        var tiledesk_widgetTitle = url.searchParams.get("tiledesk_widgetTitle");
         var project_name = url.searchParams.get("project_name");
         var role = url.searchParams.get("role")
         var urlConsole = baseUrlConsole + "#/projects/"+tiledesk_projectid+"/home";
@@ -449,6 +590,36 @@
             return(false);
         }
 
+        window.onload = function() {
+            document.getElementById("tiledesk_widgetTitle").innerHTML = tiledesk_widgetTitle;
+        }
+
+
+        function getBrandResources(url) {
+            var xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4) {
+                    var brandJson = JSON.parse(xhr.response)
+                    if(brandJson){
+                        /** TITLE AND FAVICON **/
+                        brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
+                        brandJson['WIDGET'].FAVICON_URL?  document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
+                        /** FOOTER-LOGO **/
+                        brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
+                        brandJson['COMMON'].COMPANY_SITE_NAME? document.getElementById('footer-logo').alt = brandJson['COMMON'].COMPANY_SITE_NAME : null;
+                        brandJson['COMMON'].COMPANY_SITE_URL? document.getElementById('footer-link').href = brandJson['COMMON'].COMPANY_SITE_URL : null;
+                        /** HEADER-LOGO **/  
+                        brandJson['COMMON'].BASE_LOGO_NO_TEXT? document.getElementById('header-logo').src = brandJson['COMMON'].BASE_LOGO_NO_TEXT: null;
+                        brandJson['COMMON'].BRAND_PRIMARY_COLOR? document.body.style.setProperty('--base-company-logo', brandJson['COMMON'].BRAND_PRIMARY_COLOR): null;
+                    }
+                }
+                    
+            }
+            xhr.open('GET', url, true);
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+            xhr.send();
+        }
+
         
 
     </script>
@@ -457,15 +628,36 @@
 
 <body class="website white" >
 
+    <!-- <div id="preloader">
+        <div class="logo"></div>
+    </div> -->
 
     <div id="preloader">
-        <div class="logo"></div>
+        <div class="loader"></div>
     </div>
 
     <header id="header">
         <!-- <ul class="nav navbar-nav navbar-left">
             <li class="sign-up"><button class="share-btn" onclick="copyLink()">SHARE THIS PROTOTYPE</button></li>
         </ul> -->
+        <div class="header-left">
+            <div>
+                <img id="header-logo" class="logo" src="./tiledesk_widget_files/logo-short.png">
+            </div>
+        </div>
+        <div class="header-right">
+            <div class="header-go-back">
+                <!-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#006cff">
+                    <path d="M0 0h24v24H0z" fill="none"/><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/>
+                </svg> -->
+                <span class="cds-text">
+                    Design Studio
+                </span>
+                
+            </div>
+            <div class="header-title ellips" id="tiledesk_widgetTitle"></div>
+        </div>
+
     </header>
     <!-- The actual snackbar -->
     <div id="snackbar">Copied to clipboard...</div>
@@ -475,9 +667,9 @@
 
     <footer id="footer">
         <div class="b-agent-demo_powered_by">
-            <a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;">
+            <a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;" id="footer-link">
                 <span style="position: relative; top: 2px;">Powered by</span>
-                <img src="./tiledesk_widget_files/logo@2x-black.png">
+                <img src="./tiledesk_widget_files/logo@2x-black.png" id="footer-logo">
             </a>
         </div>
     </footer>

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

@@ -14,6 +14,15 @@
         @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
         @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
 
+        body{
+            --font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif;
+            --blu: #506493;
+            --gray-light-02: rgb(223, 227, 237);
+            --base-company-logo: rgb(224,106,88);
+            --header-height: 80px;
+            --footer-height: 80px;
+        }
+
         #preloader {
             background: #fff;
             position: fixed;
@@ -51,6 +60,52 @@
             animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
         }
 
+        .loader{
+            display: block;
+            z-index: 99;
+            position: absolute;
+            top: calc( 50% - 50px);
+            left: calc( 50% - 50px);
+            width: 100px;
+            height: 100px;
+            border: 3px solid var(--base-company-logo);
+            border-radius: 50%;
+
+            animation: spin 7s ease-in-out;
+            animation-iteration-count: infinite;
+            transition-duration: 0.1s;
+        }
+
+        .loader:hover {
+            scale: 0.95;
+            /*Loader on hover effect*/
+        }
+
+        .loader:active {
+            scale: 1.2;
+            /*Loader on click effect*/
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+                border-bottom: solid 3px transparent;
+                border-top: solid 3px transparent;
+            }
+            50% {
+                transform: rotate(1800deg);
+                border: 3px solid white;
+                border-left: solid 3px transparent;
+                border-right: solid 3px transparent;
+            }
+            100% {
+                /*Reversed spinning*/
+                transform: rotate(0deg);
+                border-bottom: solid 3px transparent;
+                border-top: solid 3px transparent;
+            }
+        }
+
         #deferred-styles {
             display: none;
         }
@@ -86,6 +141,20 @@
             height: 100%;
         }
 
+        .container{
+            display: flex;
+            align-items: center;
+            width: 100% !important;
+            justify-content: space-around;
+        }
+        #header-logo{
+            max-height: 45px;
+        }
+
+        .navbar{
+            display: flex;
+        }
+
         #wrapper {
             /* display: block!important; */
             min-height: 100%;
@@ -98,19 +167,21 @@
             left: 0px;
             right: 0px;
             overflow: hidden;
-            height: 80px;
+            height: var(--header-height);
+            font-family: var(--font-family-poppins);
         }
 
         #main {
+            padding: 20px;
             padding-bottom:100px;
-            margin: 20px;
+            margin: 20px auto 20px auto;
+            /* width: 970px !important; */
+            justify-content: start;
 
             position: absolute;
-            overflow: auto;
-            top: 80px;
-            bottom: 100px;
-            left: 0px;
-            right: 0px;
+            top: var(--header-height);
+            bottom: var(--footer-height);
+            overflow: scroll;
             width: 100%;
         }
 
@@ -119,6 +190,12 @@
             margin-right: 0 !important;
         }
 
+        @media screen and (max-width: 1020px){
+            .row{
+                width: 100% !important;
+            }
+        }
+
 
         .b_frame {
             -webkit-box-shadow: 0px 19px 147px -41px rgba(0,0,0,0.75);
@@ -171,7 +248,7 @@
 
             /* position: relative;
             margin-top: -100px; negative value of footer height */
-            height: 80px;
+            height: var(--footer-height);
             clear:both;
 
             position: absolute;
@@ -180,7 +257,9 @@
         }
 
         .b-agent-demo_powered_by a {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
             margin-top: 30px;
             margin-bottom: 30px;
             text-decoration: none;
@@ -280,7 +359,7 @@
         }
 
         div.section .btn:hover{
-            background: rgb(240,135,118);
+            background: var(--base-company-logo);
             color: #ffffff;
         }
 
@@ -338,7 +417,7 @@
         }
 
         div.method_container .btn:hover{
-            background: rgb(240,135,118);
+            background: var(--base-company-logo);
             color: #ffffff;
         }
 
@@ -436,6 +515,8 @@
         window.Tiledesk('onBeforeInit', function(event_data) {
             console.log("onBeforeInit Tiledesk FN", event_data); 
 
+            var brandSrc = event_data.detail.appConfigs.brandSrc? getBrandResources(event_data.detail.appConfigs.brandSrc) : null;
+
             setTimeout(() => {
                 if(event_data && event_data.detail && event_data.detail.appConfigs){
                     
@@ -610,7 +691,7 @@
                 TelegramShareUrl,
                 '_blank' 
             );
-         }
+        }
 
         function shareOnWhatsapp() {            
             var WhatsappShareUrl = "whatsapp://send?text=" + currentUrl;
@@ -633,6 +714,32 @@
             );
         }
 
+        function getBrandResources(url) {
+            var xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4) {
+                    var brandJson = JSON.parse(xhr.response)
+                    if(brandJson){
+                        /** TITLE AND FAVICON **/
+                        brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
+                        brandJson['WIDGET'].FAVICON_URL?  document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
+                        /** FOOTER-LOGO **/    
+                        brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
+                        brandJson['COMMON'].COMPANY_SITE_NAME? document.getElementById('footer-logo').alt = brandJson['COMMON'].COMPANY_SITE_NAME : null;
+                        brandJson['COMMON'].COMPANY_SITE_URL? document.getElementById('footer-link').href = brandJson['COMMON'].COMPANY_SITE_URL : null;
+                        /** HEADER-LOGO **/                 
+                        brandJson['COMMON'].BASE_LOGO_WHITE? document.getElementById('header-logo').src = brandJson['COMMON'].BASE_LOGO_WHITE : null;
+                        /** HEADER-DOCS RESOURCES **/    
+                        document.getElementsByClassName('docs')[0].style.display = 'none'
+                    }
+                }
+            }
+            xhr.open('GET', url, true);
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+            xhr.send();
+        }
+
+
         function onClickTestButton(event){
             console.log('onClickTestButton: event-->',event)
             if(event ==='hide'){
@@ -640,6 +747,7 @@
             }else{
                 window.Tiledesk(event);
             }
+            window.Tiledesk('setParameter', {key: 'poweredBy', value: ''})
         }
 
         function onClickSignInAnonymous(){
@@ -1549,8 +1657,12 @@
 </head>
 
 <body class="website white" >
-    <div id="preloader">
+    <!-- <div id="preloader">
         <div class="logo"></div>
+    </div> -->
+
+    <div id="preloader">
+        <div class="loader"></div>
     </div>
 
     <div id="wrapper">
@@ -1565,7 +1677,7 @@
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                         </button>
-                        <a class="navbar-brand" href="https://console.tiledesk.com/"></a>
+                        <img src="tiledesk_widget_files/logo.png" id="header-logo">
                     </div>
 
                     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
@@ -1583,9 +1695,8 @@
             </nav>
         </header>
 
-        <div id="main" class="container">
-            <div class="row">
-                <div class="col-md-7">
+        <div id="main">
+            <div class="row" style="width: 70%;">
                     <h1 style="min-height: 39px;">TEST ACTIONS</h1>
                     <h3 id="project_name" style="min-height: 39px;"></h3>
                     <div class="row method_container">
@@ -2372,24 +2483,21 @@
                             <button class="btn btn-light" onclick="onClickClearHistory()">Clear <i class="fa fa-trash" aria-hidden="true"></i></button>
                         </div>
                     </div>
-                </div>
 
-                <div class="col-md-6"></div>
-            </div>
-            
-            <div class="row">
-                <div class="col-md-6">
-                    <h1 id="project_name" style="min-height: 39px;"></h1>
-                    <h2></h2>
-                    <div class="b_integrations_agent_links">
-                        <a href="" data-toggle="modal" data-target="#embedModal" id="enbed" style="display: none;"><i class="fa-code fa"></i>Embed</a>
-                        <!-- <a href="mailto:?subject=Tiledesk%20widget%20test%20page"><i class="fa-envelope-o fa" target="_blank"></i>Email</a> -->
-                        <a href="" data-toggle="modal" data-target="#shareModal"><i class="fa-reply fa"></i>Share</a>
+                    <div class="row" style="width: 100%;">
+                        <h1 id="project_name" style="min-height: 39px;"></h1>
+                        <h2></h2>
+                        <div class="b_integrations_agent_links">
+                            <a href="" data-toggle="modal" data-target="#embedModal" id="enbed" style="display: none;"><i class="fa-code fa"></i>Embed</a>
+                            <!-- <a href="mailto:?subject=Tiledesk%20widget%20test%20page"><i class="fa-envelope-o fa" target="_blank"></i>Email</a> -->
+                            <a href="" data-toggle="modal" data-target="#shareModal"><i class="fa-reply fa"></i>Share</a>
+                        </div>
                     </div>
-                </div>
-                <div class="col-md-6"></div>
+
             </div>
             
+            
+            
 
             <div class="modal fade" tabindex="-1" id="embedModal" role="dialog">
                 <div class="modal-dialog">
@@ -2468,9 +2576,9 @@
 
     <footer id="footer">
         <div class="b-agent-demo_powered_by">
-            <a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;">
+            <a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;" id="footer-link">
                 <span style="position: relative; top: 2px;">Powered by</span>
-                <img src="./tiledesk_widget_files/logo@2x-black.png">
+                <img src="./tiledesk_widget_files/logo@2x-black.png" id="footer-logo">
             </a>
         </div>
     </footer>