Merge pull request #1468 from Kommunicate-io/HrithikKrishna56-patch-2

HrithikKrishna56 · web-flow · commit 723484be5e9d · 2026-02-23T14:14:48.000+05:30
Updated the script for full screen chat widget
diff --git a/kommunicate-script-example/km-fullscreen-script.html b/kommunicate-script-example/km-fullscreen-script.html
@@ -1,37 +1,33 @@
+<!-- Working: 
+1. Create a <div> on your page and assign it an ID (e.g., widget-container)
+2. Set the desired width and height on that div
+3. Pass the div ID into the Kommunicate settings via the containerId parameter and replace App-Id with your actual App Id
+4. The chat widget will automatically take the dimensions of the div and open on page load -->
+
 <!DOCTYPE html>
-<html lang="en">
+<html>
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Kommunicate Script</title>
+    <meta charset="UTF-8" />
+    <title>Kommunicate Container Test</title>
 </head>
+
 <body>
+
+    <!-- Custom Container -->
+    <div id="widget-container" style="width: 700px; height: 600px; border: 1px solid #ccc;">
+    </div>
     <script type="text/javascript">
-        (function(d, m){
-          var kommunicateSettings = {"appId":"1c59bc4cac28d23cd3c21c876e60be920","conversationTitle":"Vibhor Sharma",
-              "onInit": function() {
-                  var iframeStyle = document.createElement('style');
-                  var classSettings = ".change-kommunicate-iframe-height{height:100%!important;width:100%!important;right:0!important;bottom:0!important;max-height: 100%!important;}";
-                  iframeStyle.type = 'text/css';
-                  iframeStyle.innerHTML = classSettings;
-                  document.getElementsByTagName('head')[0].appendChild(iframeStyle);
-                  var launcherIconStyle = "@media(min-width: 510px){.mck-sidebox.fade.in,.mck-box .mck-box-sm{width:100%; height:100%;max-height:100%!important;border-radius:0px!important;}.mck-sidebox{right:0!important;bottom:0!important;}}";
-                  Kommunicate.customizeWidgetCss(launcherIconStyle);
-                  var iframe = window.top.document.getElementsByTagName("iframe")[0];
-                  var addClassToIframe = iframe.contentDocument.getElementById("kommunicate-widget-iframe");
-                  addClassToIframe.classList.add("change-kommunicate-iframe-height");  
-                  KommunicateGlobal.document.getElementById('km-chat-widget-close-button').addEventListener('click',function(){
-                      var closeButtonClick = parent.document.getElementById("kommunicate-widget-iframe");
-                      closeButtonClick.classList.add("change-kommunicate-iframe-height");
-                  });
-              }
-          };
-          var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
-          s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
-          var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
-          window.kommunicate = m; m._globals = kommunicateSettings;
+        (function (d, m) {
+            var kommunicateSettings =
+                { "appId": "App-Id", "popupWidget": true, "containerId": "widget-container","automaticChatOpenOnNavigation": true };
+            var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
+            s.src = "https://widget.kommunicate.io/kommunicate-widget-3.0.min.js";
+            var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
+            window.kommunicate = m; m._globals = kommunicateSettings;
         })(document, window.kommunicate || {});
+        /* NOTE : Use web server to view HTML files as real-time update will not work if you directly open the HTML file in the browser. */
     </script>
 </body>
+
 </html>
