$(document).ready(function () {
          var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
          if(width > 1200) {
            var parentDiv = $("<div>", {
              class: "bubbleChatParent",
              style: "position: fixed; right:50px; bottom:50px; z-index:999999999999;",
            }); 
            $("body").append(parentDiv);
          } else {
              var parentDiv = $("<div>", {
                class: "bubbleChatParent mobileIframe",
                style: "position: fixed; right:0px; bottom:0px; z-index:999999999999; width:100%;",
              });
              $("body").append(parentDiv);
            }
        });

        $(document).ready(function () {
          let device;
          var userAgent = navigator.userAgent || navigator.vendor || window.opera;
          if (/android/i.test(userAgent)) {
            device = "Android";
          }
          if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            device = "iOS";
          }
          var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
            if(width > 1200){
              var iframe = $("<iframe>", {
                class: "bubbleChatIframe",
                src: "https://app.dropchat.co/public/bubble-chat/65cd1b455f752bfdfc457fae/U2FsdGVkX182Rt6g3zt2HpA5VXbrJhpROSWaNQy5wJ%2FFWnh5rv9OcWQooM8aw%2FFA",
                style:
                  "position: relative; height: 500px; border-radius: 5px; border: none; box-shadow: 1px 1px 5px #000;",
              });
            } else {
              var iframe = $("<iframe>", {
                class: "bubbleChatIframe",
                src: "https://app.dropchat.co/public/bubble-chat/65cd1b455f752bfdfc457fae/U2FsdGVkX182Rt6g3zt2HpA5VXbrJhpROSWaNQy5wJ%2FFWnh5rv9OcWQooM8aw%2FFA",
                style:
                "position: relative; height: 100%; width: 100%; border-radius: 0px; border: none; box-shadow: 1px 1px 5px #000;",
              });
            }

            // add the iframe to the body of the page
            
            $(".bubbleChatParent").append(iframe);

            var showButton = $("<div>", {
              id: "show",
              style:
                "position: fixed; bottom: 20px; right: 20px; z-index: 9999; height: max-content; display:flex; background:#f47735; border-radius:50%;padding: 10px;",
              });

            var showImg = $("<img>", {
              src: "https://drop-chat-files.s3.amazonaws.com/dropchat-assets/bubble-chat-show-icon.svg",
              alt: "Hide",
              style: "outline: none; cursor: pointer;width:30px;",
            });
            showButton.hover(function() {
                  $(this).css({"opacity": "0.8", "transform": "scale(1.2)", "transition": "0.3s"});
              }, function() {
                  $(this).css({"opacity": "1", "transform": "scale(1)", "transition": "0.3s"});
              });
            showButton.append(showImg);

            if(width > 1200){
              var hideButton = $("<div>", {
                id: "hide",
                style:
                "position: fixed; bottom: 20px; right: 20px; z-index: 9999; height: max-content; display:flex; background:#f47735; border-radius:50%;padding: 10px;",
              });
              
              var hideImg = $("<img>", {
                src: "https://drop-chat-files.s3.amazonaws.com/dropchat-assets/bubble-chat-hide-icon.svg",
                alt: "Show",
                style: "outline: none;  cursor: pointer;width:30px;",
              });
            } else {
              if(device === "iOS") {
                var hideButton = $("<div>", {
                  id: "hide",
                  style: "position: fixed;right: 4px;top: 1.4dvh; z-index: 9999;width:30px; height:max-content; text-align:center; display:flex; justify-content: center;",
                });
              } else {
                var hideButton = $("<div>", {
                  id: "hide",
                  style: "position: fixed;right: 4px;top: 1.75dvh; z-index: 9999;width:30px; height:max-content; text-align:center; display:flex; justify-content: center;",
                });
              }
              var hideImg = $("<img>", {
                src: "https://book-chat.s3.amazonaws.com/5d94cd16-38aa-43d2-86fd-c5e87e77d2be/white-cross.svg-JTP54L.svg",
                alt: "Show",
                style: "outline: none;  cursor: pointer; width:20px;",
              });
            }
            hideButton.hover(function() {
                  $(this).css({"opacity": "0.8", "transform": "scale(1.2)", "transition": "0.3s"});
              }, function() {
                  $(this).css({"opacity": "1", "transform": "scale(1)", "transition": "0.3s"});
              });
            hideButton.append(hideImg);

            // add the buttons to the body of the page
            $(".bubbleChatParent").append(showButton);
            $(".bubbleChatParent").append(hideButton);

            $("#hide").hide();

            if(width > 1200){
              $("#hide").click(function () {
                $(".mobileIframe").css({"height": ""});
                $(".bubbleChatIframe").hide();
                $("#hide").hide();
                $("#show").show();
              });
            } else {
              $("#hide").click(function () {
                $(".mobileIframe").css({"height": ""});
                $(".bubbleChatIframe").hide();
                $("#hide").hide();
                $("#show").show();
                $('html, body').css({
                  overflow: 'auto'
                });
              });
            }
            if(width > 1200){
              $("#show").click(function () {
                $(".mobileIframe").css({"height": "100%"});
                $(".bubbleChatIframe").show();
                $("#show").hide();
                $("#hide").show();
              });
            } else {
              $("#show").click(function () {
                $(".mobileIframe").css({"height": "100%"});
                $(".bubbleChatIframe").show();
                $("#show").hide();
                $("#hide").show();
                $('html, body').css({
                  overflow: 'hidden'
                });
              });
            }
        });

        $(document).ready(function () {
          $(".bubbleChatIframe").hide();
          $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />');
        });