Blog Details

WhatsApp button WordPress doesn't need a plugin. In this guide you get three drop-in methods that work in any theme: a plain HTML/JS snippet in footer.php, a real [wutt_chat] shortcode, and a copy-paste block for the Elementor HTML widget. All three open wa.me/966500000000 with the message "Hi, I'd like to know more about Wutt." pre-filled.

Method 1 — Plugin-free HTML/JS in the theme footer

Best for developers and theme owners. Open Appearance → Theme File Editor → footer.php (or a child theme's footer.php) and paste this right before </body>:

<!-- Wutt WhatsApp floating button -->
<a id="wutt-chat"
   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="#25D366" 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"/>
    <path fill="#fff" d="M21.6 18.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>
<style>
  #wutt-chat{position:fixed;right:20px;bottom:20px;width:56px;height:56px;
    border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.2);display:flex;
    align-items:center;justify-content:center;z-index:9999;background:#fff}
  #wutt-chat svg{width:60%;height:60%}
  @media(max-width:600px){#wutt-chat{right:14px;bottom:14px;width:50px;height:50px}}
</style>

Method 2 — The [wutt_chat] shortcode

Drop this in your theme's functions.php (or a small must-use plugin) to register a real shortcode you can paste into the block editor, classic editor, widgets, and page builders:

add_shortcode('wutt_chat', function ($atts) {
    $a = shortcode_atts([
        'phone'   => '966500000000',
        'message' => "Hi, I'd like to know more about Wutt.",
        'label'   => 'Chat on WhatsApp',
        'style'   => 'inline', // inline | float
    ], $atts, 'wutt_chat');

    $href = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $a['phone'])
          . '?text=' . rawurlencode($a['message']);

    $class = $a['style'] === 'float'
        ? 'wutt-chat wutt-chat--float'
        : 'wutt-chat wutt-chat--inline';

    return ''
         . esc_html($a['label']) . '';
});

add_action('wp_footer', function () { ?>

[wutt_chat label="Talk to sales" style="float"]
[wutt_chat phone="971501234567" message="Hi, I want a demo" label="Demo"]

<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:8px;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 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>
    Chat with us
  </a>
</div>