Back to blog

WhatsApp button for your website: how to create yours (with and without code)

By José Pedro · Co-founder of CRPRO

A visitor who has to hunt for your phone number in the footer never becomes a lead. See how to create a floating WhatsApp button for your website: ready-to-copy HTML code, a WordPress plugin, via Google Tag Manager — and the best practices that make the button convert.

An interested visitor who has to hunt for a phone number in the footer, copy it, and open WhatsApp by hand never becomes a lead — they give up along the way. A WhatsApp button for your website (that floating green one in the corner of the screen) cuts the journey down to one click, and for most businesses, it's the site's #1 conversion channel. See how to create yours: with ready-made code, without code on WordPress, or via Google Tag Manager.

Before the button: the link

Every WhatsApp button is, underneath, a link in the format wa.me/COUNTRYCODEAREACODENUMBER?text=message. Two things to watch:

  • The number with country code and area code, digits only: wa.me/5531999998888
  • A pre-filled message in ?text= with the spaces encoded — this is where hand-built links break

The error-free way is to generate it with CRPRO's free WhatsApp link generator: number + message ("Hi! I came from the website and want a quote") and the link comes out ready, already encoded.

Option 1: ready-made HTML code (any website)

Paste this before the </body> tag of your site, swapping in your own number and message:

<a href="https://wa.me/5531999998888?text=Hi!%20I%20came%20from%20the%20website"
   target="_blank" rel="noopener" aria-label="Chat on WhatsApp"
   style="position:fixed;bottom:24px;right:24px;z-index:999;
          width:60px;height:60px;border-radius:50%;
          background:#25D366;display:flex;align-items:center;
          justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25);">
  <svg viewBox="0 0 32 32" width="34" height="34" fill="#fff" aria-hidden="true">
    <path d="M16 3C9.4 3 4 8.3 4 14.9c0 2.1.6 4.1 1.6 5.9L4 29l8.4-1.6c1.7.9 3.6 1.4 5.6 1.4 6.6 0 12-5.3 12-11.9S22.6 3 16 3zm0 21.8c-1.8 0-3.5-.5-5-1.3l-.4-.2-5 1 1-4.8-.3-.4c-1-1.6-1.5-3.4-1.5-5.2 0-5.5 4.6-10 10.2-10s10.2 4.5 10.2 10-4.6 9.9-10.2 9.9zm5.6-7.4c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.6c.2-.2.2-.3.3-.6.1-.2 0-.4 0-.6-.1-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.3c.2.2 2.3 3.6 5.6 5 .8.3 1.4.5 1.9.7.8.2 1.5.2 2.1.1.6-.1 1.8-.7 2.1-1.5.3-.7.3-1.3.2-1.5-.1-.1-.3-.2-.6-.4z"/>
  </svg>
</a>

Done: a floating button, fixed in the bottom-right corner, working on desktop and mobile, with no dependency on any external service.

Option 2: WordPress (no code)

On WordPress, the 5-minute path is a plugin: in the dashboard, Plugins → Add New, search for "WhatsApp chat button" and pick one that's well rated and up to date. Setup asks for the number, the opening message, and the button's position. Prefer plugins that:

  • Use the wa.me link directly (with no third-party server in between)
  • Allow a pre-filled message and a display schedule
  • Don't load heavy scripts (performance is also SEO)

In builders like Elementor, you can skip the plugin: add a regular button, paste the link from the generator, and pin the position with a "sticky" class.

Option 3: Google Tag Manager (no theme editing)

If you can't edit the site (locked theme, IT is unreachable), inject the button through GTM:

  1. New tag → Custom HTML and paste the code from Option 1.
  2. Trigger: All pages (or just product/service pages).
  3. Publish.

GTM bonus: set up a click trigger on the button and send the event to Google Analytics/Ads as a conversion — that way you know how many leads the site generates through WhatsApp and can optimize campaigns for it.

Best practices that boost conversion

  • A pre-filled message with context: "I came from the website and want a quote" already qualifies the lead and saves the first question.
  • Bottom-right corner, without covering purchase buttons on mobile.
  • Don't auto-open a popup on every page — an aggressive prompt hurts the experience; a stationary button already does the job.
  • A prepared landing page for the click: an automatic greeting message so nobody falls into the void, especially after hours — in the CRPRO benchmark, 20% of contacts arrive outside business hours.
  • Measure: a click event in GTM/Analytics; without a number, the button is just decoration.

The click is the beginning, not the end

The button solves the lead's arrival. The sale happens afterward: who replies, how fast, and whether the contact turns into a pipeline entry or gets forgotten. By connecting the number to a WhatsApp CRM, every click from the site becomes a contact with a tracked source, lands in a multi-agent support queue, and can be answered by AI in 24 seconds — versus 15 hours for the manual flow, according to our benchmark with real companies.

Next steps:

Frequently Asked Questions

Do I have to pay anything to have a WhatsApp button on my site? No. The wa.me link is official and free, and the code above is yours. Plugins have free tiers that are enough.

Does the button work with WhatsApp Business and the official API? Yes — the link format is the same for personal WhatsApp, Business, and numbers connected to the official API.

Does a WhatsApp button hurt the site's SEO? The button itself doesn't. What hurts is heavy third-party scripts — that's why the plain code (Option 1) is the lightest choice.

How do I know how many clicks the button generates? Set up a click event in Google Tag Manager pointing to Analytics. In CRMs like CRPRO, the contact already arrives with the "website" source tagged.

Can I have buttons with different numbers per page? Yes — one number for sales on the product page, another for support in the help center. With multi-agent support, a single number can handle it with queues and tags instead.