Speech bubble not appearing every 30 seconds

I’m trying to create a speech bubble that appears every 30 seconds next to a floating button. I’ve added the necessary HTML, JavaScript, and CSS styles, but the speech bubble is not appearing as expected.

Here’s my code:

<div class="floating-button" style="
      position: fixed;
      bottom: 20px;
      right: 20px; /* Changed from left to right */
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #ff6347;
      box-shadow: 0 0 15px rgba(255, 99, 71, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: box-shadow 0.3s ease;
      cursor: pointer;
    " onmouseover="this.style.boxShadow='0 0 25px rgba(255, 99, 71, 1)'" onmouseout="this.style.boxShadow='0 0 15px rgba(255, 99, 71, 0.6)'">
            <!-- Image Inside the Button -->
      <img src="https://files.oaiusercontent.com/file-U1rw4cb2Q4LKzu41EK5M5J6S?se=2024-09-04T17%3A08%3A10Z&sp=r&sv=2024-08-04&sr=b&rscc=max-age%3D604800%2C%20immutable%2C%20private&rscd=attachment%3B%20filename%3D69cadf7d-9e41-48cd-aa92-8361b108725b.webp&sig=PVKZ92cCPlN8LRuR0RcR/wTJvaA%2BOuSJ5Ew7UwPh/74%3D" alt="Button Image" style="
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      ">
    </div>

<!-- Add a container for the speech bubble -->
<div class="speech-bubble-container" style="
  position: fixed;
  bottom: 80px;
  right: 20px;
"></div>

<script>
  // Get the speech bubble container
  const speechBubbleContainer = document.querySelector('.speech-bubble-container');

  // Function to create a speech bubble
  function createSpeechBubble(message) {
    const speechBubble = document.createElement('div');
    speechBubble.className = 'speech-bubble';
    speechBubble.textContent = message;
    speechBubble.style = `
      background-color: #fff;
      border-radius: 10px;
      padding: 10px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      animation: fadeOut 2s forwards;
    `;
    speechBubbleContainer.appendChild(speechBubble);

    // Remove the speech bubble after 2 seconds
    setTimeout(() => {
      speechBubble.remove();
    }, 2000);
  }

  // Create a speech bubble every 30 seconds
  setInterval(() => {
    createSpeechBubble('Hi');
  }, 30000);
</script>

The speech bubble is not appearing every 30 seconds as expected. I’ve tried moving the CSS styles into the HTML code, but that didn’t work either.

Can anyone help me figure out what’s going wrong?