Blog Details

Squarespace WhatsApp widget can be installed with built-in tools only — no plugin marketplace, no theme edits. This page shows three real approaches: Code Injection for site-wide code, a Code Block for per-page buttons, and the CSS to position the floating widget above Squarespace's own mobile bar.

1. Code Injection (header / footer)

Open Settings → Advanced → Code Injection. Paste the following in the Footer field. The widget will appear on every page of your Squarespace 7.1 site:

<a id="wutt-sq-fab"
   href="https://wa.me/966500000000?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20Wutt."
   target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
  <svg viewBox="0 0 32 32" aria-hidden="true">
    <path fill="#fff" d="M16 3C9 3 3.5 8.5 3.5 15.5c0 2.4.7 4.7 1.9 6.7L3 29l7-1.8c1.9 1 4 1.5 6 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3zm5.6 15.2c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.7.7 2.4.8 3.3.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2 0-.1-.2-.2-.5-.4z"/>
  </svg>
</a>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wutt-net/cdn@1/wutt-squarespace.css">

Or inline the CSS directly inside Code Injection's Header field so you avoid the external stylesheet request:

<style>
  #wutt-sq-fab{position:fixed;right:20px;bottom:96px;z-index:9999;
    width:60px;height:60px;border-radius:50%;background:#25D366;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.25);text-decoration:none}
  #wutt-sq-fab svg{width:34px;height:34px}
  @media(max-width:768px){#wutt-sq-fab{bottom:80px;right:14px;width:54px;height:54px}}
</style>

2. Per-page Code Block

Edit any page, click + and add a Code Block. Paste the button code where you want it to appear in the layout. This is the best way to put a "Schedule on WhatsApp" button inline next to a service description:

<div style="text-align:center;margin:24px 0">
  <a href="https://wa.me/966500000000?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20Wutt."
     target="_blank" rel="noopener"
     style="display:inline-flex;align-items:center;gap:10px;
            background:#25D366;color:#fff;padding:14px 22px;
            border-radius:999px;font-weight:700;text-decoration:none">
    <svg width="20" height="20" viewBox="0 0 32 32" aria-hidden="true">
      <path fill="#fff" d="M16 3C9 3 3.5 8.5 3.5 15.5c0 2.4.7 4.7 1.9 6.7L3 29l7-1.8c1.9 1 4 1.5 6 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3z"/>
    </svg>
    Book a free consult
  </a>
</div>

3. CSS for proper positioning

Squarespace's own bottom mobile bar overlaps the floating button. Use this CSS in Code Injection → Header to lift the widget above it and add a "Chat" label:

<style>
  /* Lift above Squarespace's bottom bar */
  #wutt-sq-fab{bottom:96px !important}

  /* Add a "Chat" tooltip */
  #wutt-sq-fab::after{
    content:"Chat";position:absolute;right:100%;top:50%;
    transform:translateY(-50%);margin-right:10px;
    background:#0a0a0a;color:#fff;padding:6px 10px;
    border-radius:6px;font-size:12px;font-weight:700;
    white-space:nowrap;opacity:0;transition:opacity .2s ease;
    pointer-events:none
  }
  #wutt-sq-fab:hover::after{opacity:1}

  /* On the Squarespace cart page, lift higher to clear the sticky checkout bar */
  body.sqs-cart-page #wutt-sq-fab{bottom:140px}

  /* Hide the button on a specific page using the page slug */
  body#collection-66abc123 #wutt-sq-fab{display:none}
</style>

7.1 vs 7.0

• Squarespace 7.1: use Settings → Advanced → Code Injection (above) and per-page Code Blocks.
• Squarespace 7.0: same Code Injection works, but the site uses a different markup, so the body-class workaround may not apply. Use the page's URL slug in CSS instead.

Tracking

Squarespace doesn't expose a built-in click event for embedded anchors. Use Google Tag Manager's "Click - Just Links" trigger to fire a GA4 event wutt_click when the button is clicked.