White space below my footer in my website when i add a bubble chat icon

HTML-CSS
1

When i add a bubble chat icon to my website, it works well on my homepage but on other pages it leaves a white space below the footer. Here is my code:

<html><head><meta content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&amp;subset=latin-ext"><link href="https://embed.tawk.to/_s/v4/app/61483167bf6/css/min-widget.css" rel="stylesheet"><style>
:root {
					--tawk-header-background-color: #32b87d !important;
					--tawk-header-text-color: #ffffff !important;
				}.tawk-visitor-chat-bubble {
				background :  #e5e5e5 !important;
				color :  #333333 !important;
			}.tawk-agent-chat-bubble {
				background :  #32b87d !important;
				color :  #ffffff !important;
		</style>
	</head><body class="font-lato"><div style="width: 100%; height: 100%;"><div class="tawk-min-container" style=""><!----><button type="button" class="tawk-custom-color tawk-custom-border-color tawk-button tawk-button-circle tawk-button-large" class= "chatBtn"onclick="ciscoBubbleChat.showChatWindow()" tabindex="20" style="bottom: 30px; right: 0px; position: fixed; z-index: 1000; border: px none;"><div isroundwidget="true"><!----><div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" height="32px" width="32px" role="img" alt="Start Chat" class="tawk-min-chat-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M400 26.2c-193.3 0-350 156.7-350 350 0 136.2 77.9 254.3 191.5 312.1 15.4 8.1 31.4 15.1 48.1 20.8l-16.5 63.5c-2 7.8 5.4 14.7 13 12.1l229.8-77.6c14.6-5.3 28.8-11.6 42.4-18.7C672 630.6 750 512.5 750 376.2c0-193.3-156.7-350-350-350zm211.1 510.7c-10.8 26.5-41.9 77.2-121.5 77.2-79.9 0-110.9-51-121.6-77.4-2.8-6.8 5-13.4 13.8-11.8 76.2 13.7 147.7 13 215.3.3 8.9-1.8 16.8 4.8 14 11.7z"></path></svg></div></div></button>
</body>
</html>
2

I’ll be honest, this code is a mess. It’s got a style tag and inline styles at the same time, duplicate attributes in tags, odd formatting.

Anyway, the issue is in your <button>

<button type="button" class="tawk-custom-color tawk-custom-border-color tawk-button tawk-button-circle tawk-button-large" class= "chatBtn" onclick="ciscoBubbleChat.showChatWindow()" tabindex="20" style="bottom: 30px; right: 0px; position: fixed; z-index: 1000; border: px none;">

note in the style attribute you have bottom:30px; change that to however high you want the bubble to be.

3

It’s pretty hard to say anything based on what was posted.

But I don’t really see how the button would create white space below the footer. Do you mean before the footer? That is, between the button and the footer.

There are errors in the code you posted as well. Here is a (sort of) cleaned-up version.

Summary 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&amp;subset=latin-ext"
    />
    <link
      href="https://embed.tawk.to/_s/v4/app/61483167bf6/css/min-widget.css"
      rel="stylesheet"
    />
    <style>
      :root {
        --tawk-header-background-color: #32b87d !important;
        --tawk-header-text-color: #ffffff !important;
      }
      .tawk-visitor-chat-bubble {
        background: #e5e5e5 !important;
        color: #333333 !important;
      }
      .tawk-agent-chat-bubble {
        background: #32b87d !important;
        color: #ffffff !important;
      }
    </style>
  </head>
  <body class="font-lato">
    <div style="width: 100%; height: 100%">
      <div class="tawk-min-container">
        <!---->
        <button
          type="button"
          class="
            tawk-custom-color
            tawk-custom-border-color
            tawk-button
            tawk-button-circle
            tawk-button-large
            chatBtn
          "
          onclick="ciscoBubbleChat.showChatWindow()"
          tabindex="20"
          style="
            bottom: 30px;
            right: 0px;
            position: fixed;
            z-index: 1000;
            border: none;
          "
        >
          <div isroundwidget="true"><!----></div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 800 800"
            height="32px"
            width="32px"
            role="img"
            alt="Start Chat"
            class="tawk-min-chat-icon"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M400 26.2c-193.3 0-350 156.7-350 350 0 136.2 77.9 254.3 191.5 312.1 15.4 8.1 31.4 15.1 48.1 20.8l-16.5 63.5c-2 7.8 5.4 14.7 13 12.1l229.8-77.6c14.6-5.3 28.8-11.6 42.4-18.7C672 630.6 750 512.5 750 376.2c0-193.3-156.7-350-350-350zm211.1 510.7c-10.8 26.5-41.9 77.2-121.5 77.2-79.9 0-110.9-51-121.6-77.4-2.8-6.8 5-13.4 13.8-11.8 76.2 13.7 147.7 13 215.3.3 8.9-1.8 16.8 4.8 14 11.7z"
            ></path>
          </svg>
        </button>
      </div>
    </div>
  </body>
</html>
4

Awesome code cleanup man.

Since there was no actual <footer> element in their code, plus the button being position:fixed;, I took it to mean that the button is higher than they expected. But you are right, I think I misinterpreted the question.

I think they meant what they want to use as a footer is now not at the very bottom of the webpage after adding the button? Idk.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.