Embedding a shadowDOM and Iframe widgets in HTML

<-- shadowDOM widget for the inline version -->
<enquiries-ai-widget></enquiries-ai-widget>
<script type="module" src="https://ai-chat-app.netlify.app/enquiries-ai-widget.umd.js"></script>

<-- iframe widget for the floating mode -->
<div id="chatbot-container">
  <style>
    /* Chat Widget Styles */
    #chatbot-container {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 9999;
      font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    #chat-toggle-btn {
      position: relative;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #050a23 0%, #0a0448 100%);
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    #chat-toggle-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    }

    #chat-toggle-btn:active {
      transform: scale(0.95);
    }

    .chat-icon, .close-icon {
      width: 24px;
      height: 24px;
      fill: white;
      transition: all 0.3s ease;
      position: absolute;
    }

    .close-icon {
      opacity: 0;
      transform: rotate(180deg) scale(0.8);
    }

    #chat-toggle-btn.active .chat-icon {
      opacity: 0;
      transform: rotate(-180deg) scale(0.8);
    }

    #chat-toggle-btn.active .close-icon {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }

    #chatbot-iframe {
      position: absolute;
      bottom: 70px;
      right: 0;
      width: 360px;
      height: 450px;
      border: none;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      background: white;
      transform: translateY(20px) scale(0.95);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: bottom right;
    }

    #chatbot-iframe.visible {
      transform: translateY(0) scale(1);
      opacity: 1;
      visibility: visible;
    }

    /* Pulse animation */
    @keyframes pulse {
      0% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(102, 126, 234, 0.7);
      }
      70% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(102, 126, 234, 0);
      }
      100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(102, 126, 234, 0);
      }
    }

    #chat-toggle-btn.pulse {
      animation: pulse 2s infinite;
    }

    /* Mobile responsiveness */
    @media (max-width: 480px) {
      #chatbot-container {
        bottom: 20px;
        right: 20px;
      }

      #chatbot-iframe {
        width: calc(100vw - 40px);
        height: 400px;
        right: -20px;
      }

      #chat-toggle-btn {
        width: 56px;
        height: 56px;
      }
    }
  </style>

  <!-- Chat Toggle Button -->
  <button id="chat-toggle-btn" class="pulse" aria-label="Toggle Chat">
    <svg class="chat-icon" viewBox="0 0 24 24">
      <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
    </svg>
    <svg class="close-icon" viewBox="0 0 24 24">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
    </svg>
  </button>

  <!-- Chat iframe -->
  <iframe id="chatbot-iframe" src="https://gilded-ganache-565a17.netlify.app/floating/floating.html"></iframe>

  <script>
    // Chat widget functionality
    (function() {
      const toggleBtn = document.getElementById('chat-toggle-btn');
      const chatIframe = document.getElementById('chatbot-iframe');
      let isOpen = false;
      let hasInteracted = false;

      // Toggle chat function
      function toggleChat() {
        isOpen = !isOpen;
        
        if (isOpen) {
          chatIframe.classList.add('visible');
          toggleBtn.classList.add('active');
          toggleBtn.classList.remove('pulse');
          hasInteracted = true;
        } else {
          chatIframe.classList.remove('visible');
          toggleBtn.classList.remove('active');
        }

        // Update aria-label for accessibility
        toggleBtn.setAttribute('aria-label', isOpen ? 'Close Chat' : 'Open Chat');
      }

      // Event listeners
      toggleBtn.addEventListener('click', toggleChat);

      // Close chat when clicking outside
      document.addEventListener('click', function(event) {
        if (isOpen && !document.getElementById('chatbot-container').contains(event.target)) {
          toggleChat();
        }
      });

      // Keyboard accessibility
      document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape' && isOpen) {
          toggleChat();
        }
      });

      // Stop pulsing after 10 seconds
      setTimeout(function() {
        toggleBtn.classList.remove('pulse');
      }, 10000);

      
    })();
  </script>

</div>