Test

<!-- Google Fonts --> 
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> 
 
 <!-- Font Awesome --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<!-- Chat Widget -->
<div id="chat-widget">

  <!-- Floating Button -->
  <button class="button floating-button">
    <i class="fa-solid fa-comment-dots"></i> Chat With Us
  </button>

  <!-- Modal -->
  <div class="modal-overlay">
    <div class="modal-container">

      <!-- Close -->
      <button class="close" aria-label="Close">
        <i class="fa-solid fa-xmark"></i>
      </button>

      <!-- Content area where JS will inject avatar, headings, text, button, iframes -->
      <div class="content"></div>

      <!-- Tabs -->
      <div class="tabs">
        <div class="tab" data-tab="email">
          <i class="fa-solid fa-envelope"></i>
          <span>Email Me</span>
        </div>
        <div class="tab" data-tab="call">
          <i class="fa-solid fa-mobile-screen"></i>
          <span>Call Me</span>
        </div>
        <div class="tab" data-tab="text">
          <i class="fa-solid fa-comment-dots"></i>
          <span>Text With Me</span>
        </div>
      </div>

      <!-- Preloaded iframes (hidden) -->
      <div id="iframes-container" style="display:none;">
        <iframe id="iframe-email"
          src="https://api.leadconnectorhq.com/widget/form/lnobftVLJJMkxzQ6EROJ"
          style="width:100%;height:100%;border:none;border-radius:0px"
          id="inline-lnobftVLJJMkxzQ6EROJ" 
          data-layout="{'id':'INLINE'}"
          data-trigger-type="alwaysShow"
          data-trigger-value=""
          data-activation-type="alwaysActivated"
          data-activation-value=""
          data-deactivation-type="neverDeactivate"
          data-deactivation-value=""
          data-form-name="Email Me Form - Salem"
          data-height="530"
          data-layout-iframe-id="inline-lnobftVLJJMkxzQ6EROJ"
          data-form-id="lnobftVLJJMkxzQ6EROJ"
          title="Email Me Form - Salem"></iframe>

        <iframe id="iframe-call"
          src="https://api.leadconnectorhq.com/widget/form/UX9usvZvKqC7UJtKAj3n"
          style="width:100%;height:100%;border:none;border-radius:0px"
          id="inline-UX9usvZvKqC7UJtKAj3n" 
          data-layout="{'id':'INLINE'}"
          data-trigger-type="alwaysShow"
          data-trigger-value=""
          data-activation-type="alwaysActivated"
          data-activation-value=""
          data-deactivation-type="neverDeactivate"
          data-deactivation-value=""
          data-form-name="Call Me Form - Salem"
          data-height="530"
          data-layout-iframe-id="inline-UX9usvZvKqC7UJtKAj3n"
          data-form-id="UX9usvZvKqC7UJtKAj3n"
          title="Call Me Form - Salem"></iframe>

        <iframe id="iframe-text"
          src="https://api.leadconnectorhq.com/widget/form/bEJotmLuXOjyJerD3KTa"
          style="width:100%;height:100%;border:none;border-radius:0px"
          id="inline-bEJotmLuXOjyJerD3KTa" 
          data-layout="{'id':'INLINE'}"
          data-trigger-type="alwaysShow"
          data-trigger-value=""
          data-activation-type="alwaysActivated"
          data-activation-value=""
          data-deactivation-type="neverDeactivate"
          data-deactivation-value=""
          data-form-name="Text With Me Form"
          data-height="530"
          data-layout-iframe-id="inline-bEJotmLuXOjyJerD3KTa"
          data-form-id="bEJotmLuXOjyJerD3KTa"
          title="Text With Me Form"></iframe>
      </div>

    </div>
  </div>
</div>

<!-- HighLevel Forms JS -->
<script src="https://link.msgsndr.com/js/form_embed.js"></script>

<!-- CSS -->
<style>
#chat-widget {
  --primary-color: #1e1e1e;
  --accent-color: #004892;
  --text-color: #666666;
  --background-accent: #f4f4f4;
  --border-color: #e1e1e1;
  --font-family: "Montserrat";
  font-size: 16px;
}

/* Buttons */
#chat-widget .button {
  width: 100%;
  text-align: center;
  background-color: var(--accent-color);
  color: white;
  border: none;
  font-family: var(--font-family);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.3em;
  border-radius: 0.313em;
  padding: 1em 1.5em;
  transition: all 0.2s linear;
}
#chat-widget .button:hover {
  opacity: 0.75;
  transform: scale(0.975);
}

/* Floating Button */
#chat-widget .floating-button {
  cursor: pointer;
  width: auto;
  position: fixed;
  bottom: -100%;
  right: 1.25em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2rem);
  transition: transform 0.9s ease, opacity 0.9s ease, bottom 0.9s ease;
  z-index: 999;
}
#chat-widget .floating-button.visible {
  opacity: 1;
  pointer-events: auto;
  bottom: 1.25em;
  transform: translateY(0);
}
#chat-widget .floating-button.visible:hover {
  opacity: 0.75;
  transform: translateY(0) scale(0.975);
  box-shadow: none;
}

/* Modal Overlay */
#chat-widget .modal-overlay {
  display: flex;
  justify-content: end;
  align-items: end;
  position: fixed;
  bottom: -100%;
  right: 1.25em;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: bottom 0.9s ease, opacity 0.9s ease;
}
@media (max-width: 440px) {
  #chat-widget .modal-overlay { 
    right: 0;
  }
}
#chat-widget .modal-overlay.show {
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 440px) {
  #chat-widget .modal-overlay { 
    width: 100%;
  }
}

/* Modal Container */
#chat-widget .modal-container {
  position: relative;
  width: 375px;
  min-width: 375px;
  max-width: calc(100% - 2.5em);
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 1em 1em 0 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.9s ease, opacity 0.9s ease;

  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#chat-widget .modal-overlay.show .modal-container {
  transform: translateY(0);
}
@media (max-width: 440px) {
  #chat-widget .modal-container { 
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

/* Close Button */
#chat-widget .close {
  cursor: pointer;
  opacity: 1;	
  position: absolute;
  top: 0.935em;
  right: 0.935em;
  width: 2em;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-color);
  color: white;
  border-radius: 50%;
  border: none;
  padding: 0;
  transition: all 0.3s linear;
}
#chat-widget .close:hover { 
  opacity: 0.75;
  transform: scale(0.95); 
}
#chat-widget .close i { 
  font-size: 1.125em; 
}

/* Modal Content */
#chat-widget .content {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  padding: 2.5em 1.25em;
}
#chat-widget .content.main-slide {
  text-align: left;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 1.25em;
}
#chat-widget .content img {
  width: 4em;
  height: 4em;
  object-fit: contain;
  border-radius: 50%;
}

/* Text */
#chat-widget .heading {
  align-self: center;
  text-align: center;
  color: var(--primary-color);
  font-family: var(--font-family);
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.3em;
  margin: 0;
}
#chat-widget .text {
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.6em;
  margin: 0 0 1.25em 0;
}

/* Tabs */
#chat-widget .tabs {
  display: flex;
  gap: 1px;
  background-color: var(--border-color);
}
#chat-widget .tab {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background-color: var(--background-accent);
  color: var(--primary-color);
  text-align: center;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 1em;
  padding: 0.935em;
  transition: all 0.3s ease;
}
#chat-widget .tab i {
  font-size: 1.25em; 
  margin-bottom: 0.625em; 
}
#chat-widget .tab:hover,
#chat-widget .tab.active { 
  background-color: var(--accent-color); 
  color: white; 
}
#chat-widget .tab:hover i,
#chat-widget .tab.active i { 
  color: white; 
}
</style>

<!-- JS -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const chatWidget = document.getElementById('chat-widget');
  const chatBtn = chatWidget.querySelector('.floating-button');
  const chatModal = chatWidget.querySelector('.modal-overlay');
  const closeBtn = chatWidget.querySelector('.close');
  const modalMain = chatWidget.querySelector('.content');

  // Grab preloaded iframes
  const preloadedIframes = {
    email: document.getElementById('iframe-email'),
    call: document.getElementById('iframe-call'),
    text: document.getElementById('iframe-text')
  };

  // Tab content
  const tabContent = {
    main: {
      image: "https://themaidssalem.com/wp-content/uploads/2025/09/chat-widget-avatar-2025.webp",
      heading: "Let's Talk",
      text: "Thanks for stopping by! Please don't hesitate to reach out.",
      buttonText: "Have questions, submit here.",
      buttonAction: () => activateTab('email')
    },
    email: { heading: "Email Me" },
    call: { heading: "Call Me" },
    text: { heading: "Text With Me" }
  };

  // Render modal content
  function renderContent(tabId) {
    modalMain.classList.toggle('main-slide', tabId === 'main');
    modalMain.innerHTML = '';
    const content = tabContent[tabId];

    if (tabId === 'main') {
      const img = document.createElement('img');
      img.src = content.image;
      img.className = 'avatar';

      const h2 = document.createElement('h2');
      h2.textContent = content.heading;
      h2.className = 'heading';

      const p = document.createElement('p');
      p.textContent = content.text;
      p.className = 'text';

      const btn = document.createElement('button');
      btn.className = 'button';
      btn.textContent = content.buttonText;
      btn.onclick = content.buttonAction;

      modalMain.append(img, h2, p, btn);

    } else {
      const h2 = document.createElement('h2');
      h2.textContent = content.heading;
      h2.className = 'heading';
      modalMain.appendChild(h2);

      // Clone preloaded iframe
      const iframeClone = preloadedIframes[tabId].cloneNode(true);
      iframeClone.style.display = 'block';
      modalMain.appendChild(iframeClone);
    }
  }

  // Activate tab
  function activateTab(tabId) {
    const tabs = chatWidget.querySelectorAll('.tab'); // Grab tabs fresh each time
    tabs.forEach(t => t.classList.remove('active'));
    const tab = chatWidget.querySelector(`.tab[data-tab="${tabId}"]`);
    if (tab) tab.classList.add('active');
    renderContent(tabId);
  }

  // Reset to main tab
  function resetToMain() {
    activateTab('main');
  }

  // Show floating button
  function showFloatingButton() {
    chatBtn.classList.add('visible');
  }

  // Modal open/close
  let modalCount = parseInt(sessionStorage.getItem('modalCount') || 0, 10);

  function openModal(auto = false) {
    if (auto && modalCount >= 2) {
      showFloatingButton();
      return;
    }
    resetToMain();
    chatModal.classList.add('show');
    chatBtn.classList.remove('visible');
    if (auto) {
      modalCount++;
      sessionStorage.setItem('modalCount', modalCount);
    }
  }

  function closeModal() {
    chatModal.classList.remove('show');
    setTimeout(showFloatingButton, 300);
  }

  chatBtn.addEventListener('click', () => openModal(false));
  closeBtn.addEventListener('click', closeModal);
  window.addEventListener('click', e => { if (e.target === chatModal) closeModal(); });

  // Add tab click listeners
  const tabs = chatWidget.querySelectorAll('.tab');
  tabs.forEach(tab => {
    tab.addEventListener('click', () => activateTab(tab.dataset.tab));
  });

  // Auto-open after 1.5s
  setTimeout(() => openModal(true), 1500);
});
</script>