Free Squarespace 7.1 Floating Contact & Share Bar

Free Squarespace 7.1 Floating Contact & Share Bar: Add Quick Actions Without Plugins

Looking for a lightweight Squarespace floating action bar solution? This free, open-source JavaScript snippet adds a smooth floating contact and share bar (WhatsApp, Email, Phone, Native Share) with flexbox alignment, tooltips, and zero external dependencies to any Squarespace 7.1 site without third-party subscriptions.

If you'd like to customize or modify this snippet, feel free to pass the code to ChatGPT or Claude. Make sure to update the URLs, phone numbers, and email addresses in the code to match your own business details before pasting it into your site. God bless you.

How to Customize the Code for Your Site

Before pasting this snippet into Settings > Advanced > Code Injection > Footer (or a Code Block), make sure to update the following placeholder values with your own business details:

WhatsApp Link: Change [https://wa.me/33600000000](https://wa.me/33600000000) to your own international phone number without spaces or special characters (e.g., 33612345678).
Email Link: Change mailto:contact@votre-domaine.com to your actual email address.
Phone Link: Change tel:0600000000 to your phone number (e.g., tel:0610351303).
Colors & Styling (Optional): You can easily modify the background color hex codes (e.g., #25D366 for WhatsApp, #2c3e50 for Email) in the <style> section to match your brand palette.

Squarespace — Barre flottante

.et_pb_preload:before{--wpr-bg-dc811907-7616-41de-bdaf-fef74561b5e7: url('https://www.albertnet.fr/wp-content/themes/Divi/includes/builder/styles/images/preloader.gif');}

<!-- Floating Contact & Share Bar for Squarespace 7.1 -->
<div class="floating-actions-container">
  
  <!-- WhatsApp -->
  <a href="https://wa.me/33600000000" class="float-action-btn float-btn--wa" aria-label="WhatsApp" title="WhatsApp">
    <svg viewBox="0 0 24 24"><path fill="#fff" d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.81 9.81 0 0 0 12.04 2zm.01 16.59c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.24 8.24z"/></svg>
    <span class="float-tooltip">WhatsApp</span>
  </a>

  <!-- Email -->
  <a href="mailto:contact@votre-domaine.com" class="float-action-btn float-btn--email" aria-label="Email" title="Email">
    <svg viewBox="0 0 24 24"><path fill="#fff" d="M20 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>
    <span class="float-tooltip">Email</span>
  </a>

  <!-- Phone -->
  <a href="tel:0600000000" class="float-action-btn float-btn--tel" aria-label="Téléphone" title="Appeler">
    <svg viewBox="0 0 24 24"><path fill="#fff" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
    <span class="float-tooltip">Appeler</span>
  </a>

  <!-- Share -->
  <button type="button" class="float-action-btn float-btn--share" id="squarespaceShareBtn" aria-label="Partager" title="Partager">
    <svg viewBox="0 0 24 24"><path fill="#fff" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.04 9.81C6.5 9.31 5.79 9 5 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
    <span class="float-tooltip">Partager</span>
  </button>

</div>

<style>
.floating-actions-container {
  position: fixed;
  bottom: 25px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.float-action-btn {
  pointer-events: auto;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.float-action-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.float-action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.float-btn--wa { background: #25D366; }
.float-btn--email { background: #2c3e50; }
.float-btn--tel { background: #007bb5; }
.float-btn--share { background: #e74c3c; }

.float-tooltip {
  position: absolute;
  bottom: 50px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.float-action-btn:hover .float-tooltip {
  opacity: 1;
}

@media (max-width: 480px) {
  .floating-actions-container { bottom: 15px; right: 15px; gap: 8px; }
  .float-action-btn { width: 34px; height: 34px; }
  .float-action-btn svg { width: 15px; height: 15px; }
  .float-tooltip { display: none; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var shareBtn = document.getElementById('squarespaceShareBtn');
  if (!shareBtn) return;

  shareBtn.addEventListener('click', function (e) {
    e.preventDefault();
    if (navigator.share) {
      navigator.share({
        title: document.title,
        url: window.location.href
      }).catch(function () {});
    } else {
      navigator.clipboard.writeText(window.location.href).then(function () {
        alert('Link copied to clipboard!');
      });
    }
  });
});
</script>