<?php
$pageTitle = "WhatsApp Link Generator — Create wa.me Links & QR Codes Free";
$pageDesc  = "Generate a WhatsApp click-to-chat link instantly. Customise your QR code with your brand colours and logo. Free, no sign-up needed.";
$root = rtrim($_SERVER['DOCUMENT_ROOT'], '/');
include $root . "/includes/header.php";
?>
<link rel="canonical" href="https://fidusflo.com/tools/whatsapp-link-generator">

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>



<main>
<div class="tool-wrap">

  <!-- BREADCRUMB -->
  <div class="tools-breadcrumb">
    <a href="/tools/">All Tools</a>
    <span>/</span>
    <span>WhatsApp Link Generator</span>
  </div>

  <!-- HERO -->
  <div class="tool-hero reveal">
    <div class="kicker">FREE TOOL · NO SIGN-UP</div>
    <h1>WhatsApp Link Generator</h1>
    <p>Generate a wa.me click-to-chat link for any number. Add a pre-filled message, brand your QR code with your colours and logo — download and use anywhere.</p>
  </div>

  <!-- TOOL CARD -->
  <div class="tool-card reveal">

    <!-- PHONE -->
    <div class="phone-row">
      <div>
        <label class="field-label" for="cc">Country</label>
        <select class="field-input" id="cc">
          <option value="91" selected>🇮🇳 +91</option>
          <option value="1">🇺🇸 +1</option>
          <option value="44">🇬🇧 +44</option>
          <option value="971">🇦🇪 +971</option>
          <option value="65">🇸🇬 +65</option>
          <option value="60">🇲🇾 +60</option>
          <option value="966">🇸🇦 +966</option>
          <option value="49">🇩🇪 +49</option>
          <option value="61">🇦🇺 +61</option>
          <option value="27">🇿🇦 +27</option>
          <option value="55">🇧🇷 +55</option>
          <option value="234">🇳🇬 +234</option>
        </select>
      </div>
      <div>
        <label class="field-label" for="phone">Phone Number</label>
        <input class="field-input" type="tel" id="phone"
               placeholder="98765 43210" maxlength="15"
               oninput="this.value=this.value.replace(/[^0-9]/g,'')">
      </div>
    </div>

    <div class="field-group">
      <label class="field-label" for="msg">Pre-filled Message <span>(optional)</span></label>
      <div class="msg-chips">
        <button type="button" class="msg-chip" onclick="setMsg('Hi, I saw your property listing and would like more details.')">🏡 Property enquiry</button>
        <button type="button" class="msg-chip" onclick="setMsg('Hi, I\'d like to book an appointment. Please share your availability.')">📅 Appointment</button>
        <button type="button" class="msg-chip" onclick="setMsg('Hi, I\'d like to know more about your courses and fees.')">🎓 Course enquiry</button>
        <button type="button" class="msg-chip" onclick="setMsg('Hi, please share your pricing / quote for your services.')">💰 Get a quote</button>
        <button type="button" class="msg-chip" onclick="setMsg('Hi, I\'d like to place an order. Please guide me.')">📦 Place an order</button>
        <button type="button" class="msg-chip" onclick="setMsg('Hi, I need help with my account / order.')">🛠️ Support</button>
        <button type="button" class="msg-chip" onclick="setMsg('Hi, I\'d like to discuss a business collaboration.')">🤝 Partnership</button>
      </div>
      <textarea class="field-input" id="msg"
                placeholder="Type a custom message or pick one above…"></textarea>
    </div>

    <!-- BRAND CUSTOMISER -->
    <div class="brand-section">
      <div class="brand-section-title">🎨 Brand Your QR Code</div>

      <!-- Presets -->
      <div class="presets-row" id="presets">
        <button class="preset-btn active" data-dark="#000000" data-light="#ffffff" onclick="applyPreset(this)">
          <span class="preset-dot u-i-e4c1da31"></span> Classic
        </button>
        <button class="preset-btn" data-dark="#1B3A6B" data-light="#EBF2FA" onclick="applyPreset(this)">
          <span class="preset-dot u-i-446fab6d"></span> Navy
        </button>
        <button class="preset-btn" data-dark="#128C7E" data-light="#DCF8C6" onclick="applyPreset(this)">
          <span class="preset-dot u-i-b0d845bb"></span> WhatsApp
        </button>
        <button class="preset-btn" data-dark="#7B2D8B" data-light="#F3E8FF" onclick="applyPreset(this)">
          <span class="preset-dot u-i-1ebc37af"></span> Purple
        </button>
        <button class="preset-btn" data-dark="#C0392B" data-light="#FDE8E8" onclick="applyPreset(this)">
          <span class="preset-dot u-i-5d8a9ba0"></span> Red
        </button>
        <button class="preset-btn" data-dark="#1A1A2E" data-light="#E8F4FD" onclick="applyPreset(this)">
          <span class="preset-dot u-i-2ba697c3"></span> Midnight
        </button>
      </div>

      <!-- Custom colors -->
      <div class="color-row">
        <div class="color-field" onclick="document.getElementById('clr-dark').click()">
          <div class="color-swatch" id="swatch-dark" class="u-i-e4c1da31"></div>
          <input type="color" class="color-swatch-input" id="clr-dark" value="#000000"
                 oninput="onColorChange()">
          <div class="color-field-label">QR Colour</div>
          <div class="color-hex" id="hex-dark">#000000</div>
        </div>
        <div class="color-field" onclick="document.getElementById('clr-light').click()">
          <div class="color-swatch" id="swatch-light" class="u-i-54416925"></div>
          <input type="color" class="color-swatch-input" id="clr-light" value="#ffffff"
                 oninput="onColorChange()">
          <div class="color-field-label">Background</div>
          <div class="color-hex" id="hex-light">#ffffff</div>
        </div>
      </div>

      <!-- Logo upload -->
      <div>
        <label class="field-label">Logo in centre <span>(optional — PNG or SVG recommended)</span></label>
        <div class="logo-upload-area" id="logo-drop"
             ondragover="event.preventDefault();this.classList.add('drag-over')"
             ondragleave="this.classList.remove('drag-over')"
             ondrop="handleLogoDrop(event)">
          <input type="file" id="logo-file" accept="image/*" onchange="handleLogoFile(this)">
          <div id="logo-empty">
            <div class="logo-upload-icon">🖼️</div>
            <div class="logo-upload-text">
              <strong>Click to upload</strong> or drag your logo here<br>
              <span class="u-i-566c3482">PNG, SVG, JPG — max 2MB — square logos work best</span>
            </div>
          </div>
          <div class="logo-preview" id="logo-preview">
            <img id="logo-img" alt="Logo preview">
            <button class="btn-remove-logo" onclick="removeLogo(event)">Remove logo</button>
          </div>
        </div>
      </div>

    </div><!-- /brand-section -->

    <button class="btn-generate" onclick="generateLink()">
      ⚡ Generate Link &amp; QR Code
    </button>

    <!-- OUTPUT -->
    <div class="tool-output" id="tool-output">
      <div class="output-grid">

        <!-- Left: link + actions -->
        <div>
          <div class="output-label">Your WhatsApp Link</div>
          <a class="output-link-box" id="out-link" href="#" target="_blank" rel="noopener"></a>
          <div class="output-actions">
            <button class="btn-action btn-copy" id="btn-copy" onclick="copyLink()">📋 Copy Link</button>
            <a class="btn-action btn-wa" id="btn-open" href="#" target="_blank" rel="noopener">💬 Open in WhatsApp</a>
          </div>
          <div class="u-i-c7521d50">
            Share this link on your website, Instagram bio, Google Business profile, visiting cards, or anywhere online.
          </div>
        </div>

        <!-- Right: QR -->
        <div class="output-qr-col">
          <div class="qr-label">Branded QR Code</div>
          <div id="qr-box"></div>
          <div class="qr-dl-row">
            <a class="btn-dl" id="btn-dl-png" href="#" download="whatsapp-qr.png">↓ PNG</a>
            <button class="btn-dl" onclick="downloadSVGQR()">↓ SVG</button>
          </div>
        </div>

      </div>
    </div>

  </div><!-- /tool-card -->

  <!-- HOW IT WORKS -->
  <div class="support-section reveal">
    <h2>How to use</h2>
    <div class="three-grid">
      <div class="mini-card">
        <div class="num">1</div>
        <h3>Enter your number</h3>
        <p>Select your country code and enter the WhatsApp number you want people to contact.</p>
      </div>
      <div class="mini-card">
        <div class="num">2</div>
        <h3>Brand your QR</h3>
        <p>Pick a colour preset or enter your exact brand hex code. Upload your logo to appear in the centre.</p>
      </div>
      <div class="mini-card">
        <div class="num">3</div>
        <h3>Download &amp; share</h3>
        <p>Copy the link, open WhatsApp, or download the branded QR as PNG or SVG for print and digital.</p>
      </div>
    </div>

    <div class="u-i-2761b635">
      <h2>Who uses this</h2>
      <div class="use-grid">
        <div class="use-row"><div class="icon">🏪</div><div><h4>Small businesses</h4><p>Website, Instagram bio, Google Business profile, visiting cards.</p></div></div>
        <div class="use-row"><div class="icon">🏡</div><div><h4>Real estate agents</h4><p>Property listings — buyers reach you without saving your number.</p></div></div>
        <div class="use-row"><div class="icon">🎓</div><div><h4>Coaching institutes</h4><p>Pre-filled enrolment queries so every lead starts with context.</p></div></div>
        <div class="use-row"><div class="icon">🏥</div><div><h4>Clinics &amp; doctors</h4><p>Appointment booking with a pre-filled message — one tap.</p></div></div>
        <div class="use-row"><div class="icon">📣</div><div><h4>Marketers</h4><p>WhatsApp CTAs in ads, landing pages, and email campaigns.</p></div></div>
        <div class="use-row"><div class="icon">🛍️</div><div><h4>E-commerce</h4><p>Order support links with pre-filled order number field.</p></div></div>
      </div>
    </div>
  </div>

  <!-- FAQ -->
  <div class="faq-wrap reveal">
    <h2>Questions</h2>
    <div class="faq">
      <details><summary>What is a wa.me link?</summary><p>A wa.me link opens a WhatsApp conversation with a specific number without the other person needing to save your contact. Format: <code>https://wa.me/[country code][number]</code>. Officially supported by WhatsApp for businesses and individuals.</p></details>
      <details><summary>Can I use my brand colours on the QR code?</summary><p>Yes — use the colour pickers to set your exact brand hex codes for both the QR pattern and background. You can also upload your logo to appear in the centre. All done in-browser, nothing uploaded to any server.</p></details>
      <details><summary>What format should my logo be in?</summary><p>Square logos work best — PNG with transparent background is ideal. The logo is placed in the centre of the QR code with a white padding zone to keep scannability intact. Keep the logo under 30% of the QR area.</p></details>
      <details><summary>Does the QR code still scan with colours and a logo?</summary><p>Yes — the QR is generated with high error correction (Level H) which allows up to 30% of the code to be obscured while still scanning correctly. The logo is sized to stay within that limit.</p></details>
      <details><summary>What does the pre-filled message do?</summary><p>When someone clicks your link or scans the QR, WhatsApp opens with your message already typed — they just hit send. Useful for qualifying leads or guiding customers to the right enquiry.</p></details>
      <details><summary>Is this free? Do I need to sign up?</summary><p>Completely free, no account needed. Everything is generated in your browser — nothing is stored on any server.</p></details>
    </div>
  </div>

  <!-- CTA -->
  <div class="tool-cta reveal">
    <h3>Want to automate what happens after they message you?</h3>
    <p>FLO Konnect turns your WhatsApp number into a full automation engine — instant replies, follow-up sequences, team inbox, broadcasts. Official WABA.</p>
    <div class="actions">
      <a class="btn primary" href="/demo.php">Book a 20-Min Demo</a>
      <a class="btn" href="/flo-konnect.php">See FLO Konnect</a>
    </div>
  </div>

</div>
</main>

<!-- Schema -->
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebApplication","name":"WhatsApp Link Generator","url":"https://fidusflo.com/tools/whatsapp-link-generator","description":"Generate branded WhatsApp click-to-chat links and QR codes with custom brand colours and logo.","applicationCategory":"UtilityApplication","operatingSystem":"Any","offers":{"@type":"Offer","price":"0","priceCurrency":"INR"},"publisher":{"@type":"Organization","name":"FIDUS FLO","url":"https://fidusflo.com"}}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is a wa.me link?","acceptedAnswer":{"@type":"Answer","text":"A wa.me link opens a WhatsApp conversation without saving the contact. Format: https://wa.me/[countrycode][number]."}},{"@type":"Question","name":"Can I use my brand colours on the QR code?","acceptedAnswer":{"@type":"Answer","text":"Yes — use the colour pickers to set your exact brand hex codes for both the QR pattern and background. You can also upload your logo to appear in the centre."}},{"@type":"Question","name":"Does the QR code still scan with colours and a logo?","acceptedAnswer":{"@type":"Answer","text":"Yes — the QR is generated with high error correction (Level H) which allows up to 30% to be obscured while still scanning correctly."}}]}
</script>



<?php include $root . "/includes/footer.php"; ?>
