$(document).ready(function () {
          var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
          if(width > 1200) {
            var parentDiv = $("<div>", {
              class: "bubbleChatParent",
              style: "position: fixed; right:10px; bottom:10px; z-index:999999999999; align-items: end; display:flex;",
            }); 
            $("body").append(parentDiv);
          } else {
              var parentDiv = $("<div>", {
                class: "bubbleChatParent mobileIframe",
                style: "position: fixed; right:0px; bottom:0px; z-index:999999999999; width:100%; display:flex; justify-content: flex-end;",
              });
              $("body").append(parentDiv);
            }
          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",
                id: "bubbleChatIframe",
                src: "https://app.dropchat.co/public/bubble-chat/66830bbbe8216a0570db442b/U2FsdGVkX182Rt6g3zt2HpA5VXbrJhpROSWaNQy5wJ%2FFWnh5rv9OcWQooM8aw%2FFA",
                style:
                  "position: relative; height: 750px; width:500px; border-radius: 5px; bottom:3em; right:3em; border: none; box-shadow: 1px 1px 5px #000;",
              });
            } else {
              var iframe = $("<iframe>", {
                class: "bubbleChatIframe",
                id: "bubbleChatIframe",
                src: "https://app.dropchat.co/public/bubble-chat/66830bbbe8216a0570db442b/U2FsdGVkX182Rt6g3zt2HpA5VXbrJhpROSWaNQy5wJ%2FFWnh5rv9OcWQooM8aw%2FFA",
                style:
                "position: fixed; 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: relative; bottom: 10px; right: 10px; z-index: 9999; height: max-content; display:flex; background:#5E1224; border-radius:50%;opacity: 1; transform: scale(1); transition: all 0.3s ease 0s; width:50px; height:50px; justify-content: center;",
              });
             var showButtonWelcomeText = $("<div>", {
                id: "welcomeText",
                style:
                  "position: relative; bottom: 10px; right: 1.5rem; z-index: 9999; height: max-content; display:flex; width:270px; padding:5px 14px; border-radius: 16px; background:#5E1224; opacity: 0; transform: scale(1); transition: all 0.3s ease 0s; box-shadow: 0px 3px 1px 1px #000000d1;",
                });

              showButtonWelcomeText.append("<p style='color:#fff;'>👋 Welcome! If there's any way I can assist please let me know!</p>");

              showButtonWelcomeText.append('<img class="welcomeTextCross" src="https://book-chat.s3.amazonaws.com/5d94cd16-38aa-43d2-86fd-c5e87e77d2be/white-cross.svg-JTP54L.svg" style="cursor: pointer;position: absolute;top: -12px;right: -8px;background: #000;padding: 4px;border-radius: 20px;width: 24px;" alt="close" />');

              setTimeout(function() {
                $("#welcomeText").animate({
                    opacity: "1",
                }, 750);
              }, 2000 );

              var showImg = $("<img>", {
              src: "https://drop-chat-files.s3.amazonaws.com/dropchat-assets/bubble-chat-show-icon.svg",
              alt: "Hide",
              style: "border-radius:50%;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"});
              });
            $(".bubbleChatParent").append(showButtonWelcomeText);
            showButton.append(showImg);

            if(width > 1200){
              var hideButton = $("<div>", {
                id: "hide",
                style:
                "position: fixed; bottom: 10px; right: 10px; z-index: 9999; height: max-content; display:flex; background:#5E1224; border-radius:50%; width:50px; height:50px; justify-content: center;",
              });
              
              var hideImg = $("<img>", {
                src: "https://drop-chat-files.s3.amazonaws.com/dropchat-assets/bubble-chat-hide-icon.svg",
                alt: "Show",
                style: "border-radius:50%;outline: none;  cursor: pointer;width:30px;",
              });
              var hideIconButton = $("<div>", {
                id: "hideIcon",
                style:
                "position: absolute;z-index: 9999;border-radius:50%;justify-content: center;top: -2.4em;right: 3.5em;",
              });
              var hideIcon = $("<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;",
              });
              hideIconButton.append(hideIcon);
            } else {
              if(device === "iOS") {
                var hideButton = $("<div>", {
                  id: "hide",
                  style: "position: relative;right: 4px;top: 2.3dvh; z-index: 9999;width:30px; height:max-content; text-align:center; display:flex; justify-content: center;",
                });
              } else {
                var hideButton = $("<div>", {
                  id: "hide",
                  style: "position: relative;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(hideIconButton);
            $(".bubbleChatParent").append(showButton);
            $(".bubbleChatParent").append(hideButton);

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

            $(".welcomeTextCross").click(function () {
              $("#welcomeText").hide();
            });

            if(width > 1200){
              $("#hide").click(function () {
                $(".mobileIframe").css({"height": ""});
                $(".bubbleChatIframe").hide();
                $("#hide").hide();
                $("#hideIcon").hide();
                $("#show").show();
              });
              $("#hideIcon").click(function () {
                $(".mobileIframe").css({"height": ""});
                $(".bubbleChatIframe").hide();
                $("#hide").hide();
                $("#hideIcon").hide();
                $("#show").show();
              });
            } else {
              $("#hide").click(function () {
                $(".mobileIframe").css({"height": ""});
                $(".bubbleChatIframe").hide();
                $("#hide").hide();
                $("#hideIcon").hide();
                $("#show").show();
                $('html, body').css({
                  overflow: 'auto'
                });
              });
            }
            if(width > 1200){
              $("#show").click(function () {
                $(".mobileIframe").css({"height": "100%"});
                $(".bubbleChatIframe").show();
                $("#show").hide();
                $("#hide").show();
                $("#hideIcon").show();
                $("#welcomeText").hide();
              });
            } else {
              $("#show").click(function () {
                $(".mobileIframe").css({"height": "100%"});
                $(".bubbleChatIframe").show();
                $("#show").hide();
                $("#welcomeText").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" />');
        });